@material-ui/core#Drawer JavaScript Examples

export default function AppDrawer(props) {
  const classes = useStyles();

  return (
    <Drawer
      variant="permanent"
      classes={{
        paper: clsx(classes.drawerPaper, !props.drawer.open && classes.drawerPaperClose),
      }}
      open={props.open}
    >
      <div className={classes.toolbarIcon}>
        <IconButton onClick={props.drawer.closeDrawer}>
          <ChevronLeftIcon />
        </IconButton>
      </div>
      <Divider />
      <Menu />
    </Drawer>
  );
}

Page = ({ children }) => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <NewHeader className={classes.appBar} />
            <Drawer
                className={classes.drawer}
                variant="permanent"
                classes={{
                    paper: classes.drawerPaper,
                }}
            >
                <Toolbar />
                <div className={classes.drawerContainer}>
                    <Sidebar />
                </div>
            </Drawer>
            <main className={classes.content}>
                <Toolbar />
                {children}
            </main>
        </div>
    );
}

function Sidebar(props) {
  const { open, variant, onClose } = props;
  const classes = useStyles();
  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      open={open}
      onClose={onClose}
      variant={variant}
    >
      <section className={classes.root}>
        <Hidden mdUp>
          <IconButton className={classes.menuButton} aria-label="Menu" onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Hidden>
        <Profile className={classes.profile} />
        <List component="div" disablePadding>
          {pages.map(page => (
            <ListItem
              key={page.title}
              activeClassName={classes.activeListItem}
              className={classes.listItem}
              component={NavLink}
              to={page.href}
            >
              <ListItemIcon className={classes.listItemIcon}>{page.icon}</ListItemIcon>
              <ListItemText classes={{ primary: classes.listItemText }} primary={page.title} />
            </ListItem>
          ))}
        </List>
      </section>
    </Drawer>
  );
}

AdminApp = () => {
  const classes = useStyles();
  return (
    <Box display="flex" width={1} height="100%">
      <CssBaseline />
      <Drawer
        open
        variant="persistent"
        classes={{ paper: classes.drawer }}
        PaperProps={{ elevation: 4 }}
      >
        <Box className={classes.logo} display="flex" alignItems="center">
          <NavLink to="/">{logo}</NavLink>
        </Box>
        <AdminNavigation />
      </Drawer>
      <Box width={1} className={classes.main}>
        <AppBar position="relative" elevation={2}>
          <Toolbar />
        </AppBar>
        <Container className={classes.content}>
          <Box mt={2}>
            <Switch>
              <Route path="/admin/dashboard" component={DashboardPage} />
              <Route path="/admin/applications" component={ApplicationPage} />
            </Switch>
          </Box>
        </Container>
      </Box>
    </Box>
  );
}

OftadehRightPanel = props => {
  const classes = useStyles();

  const { handleRightPanelOpen, openRightPanel } = React.useContext(
    NavigationContext
  );

  return (
    <Drawer
      className={classes.drawer}
      variant="temporary"
      anchor="right"
      open={openRightPanel}
      onClose={event => handleRightPanelOpen(event, 0)}
      classes={{
        paper: classes.drawerPaper
      }}
    >
      <OftadehRightPanelTab />
    </Drawer>
  );
}

SidebarView = ({ classes, theme, toggleSidebar, isSidebarOpened, isPermanent, location }) => {
  return (
    <Drawer
      variant={isPermanent ? 'permanent' : 'temporary'}
      className={classNames(classes.drawer, {
        [classes.drawerOpen]: isSidebarOpened,
        [classes.drawerClose]: !isSidebarOpened,
      })}
      classes={{
        paper: classNames(classes.drawer, {
          [classes.drawerOpen]: isSidebarOpened,
          [classes.drawerClose]: !isSidebarOpened,
        }),
      }}
      open={isSidebarOpened}
    >
      <div className={classes.mobileBackButton}>
        <IconButton
          onClick={toggleSidebar}
        >
          <ArrowBackIcon classes={{ root: classNames(classes.headerIcon, classes.headerIconCollapse) }} />
        </IconButton>
      </div>
      <List className={classes.sidebarList}>
        {structure.map(link => <SidebarLink key={link.id} location={location} isSidebarOpened={isSidebarOpened} {...link} />)}
      </List>
    </Drawer>
  );
}

SideBar = (props) => {
    const [menuItems, setItems] = useState([{ name: "Home", img: Home, link: "/" }, { name: "Notifications", img: Notification, onClick:`${props.notification}` }, {
        name: "Settings", img: Setting, link: "/settings"
    }, { name: "Organizations", img: Org, link: "/organizations" }, { name: " Profile", img: Profile, link: "/profile" }, , {
        name: "Bookmarks", img: Bookmark, link: "/bookmarks" }]);
    return (
        <>
            {window.innerWidth <= 750 && <Drawer open={props.open} anchor="right" onClose={props.toggleSlider}>
               <SideList menuItems={menuItems} />
            </Drawer>
            }

            {window.innerWidth > 750 &&
               <SideList menuItems={menuItems} />
            }
    </>
    )

}

SideNav = () => {
  const theme = useTheme();
  const isMaxScreenSm = useMediaQuery(theme.breakpoints.down("sm"));

  const isDrawerOpen = useSelector(({ layout }) => layout.isDrawerOpen);
  const isAuth = useSelector(({ channel }) => channel.isAuth);
  let isOpen;
  if (isMaxScreenSm) isOpen = isDrawerOpen;
  else isOpen = true; //We will control open by css
  const classes = useStyles();
  return (
    <Drawer
      variant={isMaxScreenSm ? "temporary" : "persistent"}
      open={isOpen}
      className={clsx(classes.drawer, {
        [classes.drawerOpen]: isDrawerOpen,
        [classes.drawerClose]: !isDrawerOpen,
      })}
      classes={{
        paper: clsx({
          [classes.drawerOpen]: isDrawerOpen,
          [classes.drawerClose]: !isDrawerOpen,
        }),
      }}
    >
      <div className={classes.navHead}>
        <StartNav mobile />
      </div>
      <Divider />
      <MainNavMenu />
      <Divider />
      {isDrawerOpen && !isAuth && <SideCategoryMenu />}
    </Drawer>
  );
}

function AppDrawer(props) {
  const {
    drawer: { dispatch, state },
  } = React.useContext(ContextStore)
  const classes = useStyles()

  return (
    <Drawer
      classes={{
        paper: classes.drawerPaper,
      }}
      anchor="left"
      open={state.open}
      variant="persistent"
    >
      <Container>
        <NavBarButton
          color="inherit"
          component="span"
          aria-label="Menu"
          onClick={() => {
            dispatch({ type: DRAWER_CLOSE })
          }}
        >
          <CloseIcon fontSize="small" />
        </NavBarButton>
        <MenuContainer>
        </MenuContainer>
      </Container>
    </Drawer>
  )
}

function Sidebar({ location }) {
  var classes = useStyles();
  var theme = useTheme();

  // global
  var { isSidebarOpened } = useLayoutState();
  var layoutDispatch = useLayoutDispatch();

  // local
  var [isPermanent, setPermanent] = useState(true);

  useEffect(function() {
    window.addEventListener("resize", handleWindowWidthChange);
    handleWindowWidthChange();
    return function cleanup() {
      window.removeEventListener("resize", handleWindowWidthChange);
    };
  });

  return (
    <Drawer
      variant={isPermanent ? "permanent" : "temporary"}
      className={classNames(classes.drawer, {
        [classes.drawerOpen]: isSidebarOpened,
        [classes.drawerClose]: !isSidebarOpened,
      })}
      classes={{
        paper: classNames({
          [classes.drawerOpen]: isSidebarOpened,
          [classes.drawerClose]: !isSidebarOpened,
        }),
      }}
      open={isSidebarOpened}
    >
      <div className={classes.toolbar} />
      <div className={classes.mobileBackButton}>
        <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
          <ArrowBackIcon
            classes={{
              root: classNames(classes.headerIcon, classes.headerIconCollapse),
            }}
          />
        </IconButton>
      </div>
      <List className={classes.sidebarList}>
        {structure.map(link => (
          <SidebarLink
            key={link.id}
            location={location}
            isSidebarOpened={isSidebarOpened}
            {...link}
          />
        ))}
      </List>
    </Drawer>
  );

  // ##################################################################
  function handleWindowWidthChange() {
    var windowWidth = window.innerWidth;
    var breakpointWidth = theme.breakpoints.values.md;
    var isSmallScreen = windowWidth < breakpointWidth;

    if (isSmallScreen && isPermanent) {
      setPermanent(false);
    } else if (!isSmallScreen && !isPermanent) {
      setPermanent(true);
    }
  }
}

export default function TemporaryDrawer(props) {
  const [state, setState] = React.useState({
    right: false,
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  return (
    <div>
      <React.Fragment>
        <Fab
          style={{
            position: "fixed",
            right: "0.5rem",
            bottom: "1rem",
          }}
          variant="extended"
          size="small"
          color="secondary"
          onClick={toggleDrawer("right", true)}
        >
          Prop Explorer
        </Fab>
        <Drawer
          anchor={"right"}
          open={state["right"]}
          onClose={toggleDrawer("right", false)}
        >
          <div
            style={{
              width: "70vw",
              maxWidth: 700,
              paddingLeft: "1rem",
            }}
          >
            {props.children}
          </div>
        </Drawer>
      </React.Fragment>
    </div>
  );
}

StyledDrawer = styled(({ ...rest }) => (
  <Drawer classes={{ paper: 'paper' }} {...rest} />
))`
  & .paper {
    width: ${drawerWidth}px;
  }
`

NavMenu = () => {
	const [open, setOpen] = useState(false);

	const classes = useStyles();

	const closeDrawer = () => {
		setOpen(false);
	};

	return (
		<>
			<Hidden smUp>
				<TopNav toggleMenu={() => setOpen(!open)} />
				<Drawer
					variant={"temporary"}
					open={open}
					onClose={closeDrawer}
					className={clsx(classes.drawer, {
						[classes.drawerOpen]: true,
						[classes.drawerClose]: false,
					})}
					classes={{
						paper: clsx({
							[classes.drawerOpen]: true,
							[classes.drawerClose]: false,
						}),
					}}
				>
					<MenuList closeDrawer={closeDrawer} />
				</Drawer>
			</Hidden>
			<Hidden xsDown>
				<Drawer
					variant={"permanent"}
					className={clsx(classes.drawer, {
						[classes.drawerOpen]: open,
						[classes.drawerClose]: !open,
					})}
					classes={{
						paper: clsx({
							[classes.drawerOpen]: open,
							[classes.drawerClose]: !open,
						}),
					}}
					onMouseEnter={() => setOpen(true)}
					onMouseLeave={closeDrawer}
				>
					<MenuList />
				</Drawer>
			</Hidden>
		</>
	);
}

export default function SideNav() {
  const classes = useStyles();

  return (
    <Drawer
      className={classes.drawer}
      variant="permanent"
      classes={{
        paper: classes.drawerPaper,
      }}
      anchor="left"
    >
      <div className={classes.toolbar}>
        <Typography variant="h6">SideNav</Typography>
      </div>
      <Divider />
      <List>
        <ListSubheader>Demo Pages</ListSubheader>
        <ListItem button component={Link} to="/">
          <ListItemText primary="Main" />
        </ListItem>
        <ListItem button component={Link} to="/ui-library">
          <ListItemText primary="UI Library" />
        </ListItem>
        <ListItem button component={Link} to="/dialog">
          <ListItemText primary="Dialog" />
        </ListItem>
        <ListItem button component={Link} to="/svelte">
          <ListItemText primary="Svelte Page" />
        </ListItem>
        <ListItem button component={Link} to="/routing/foo">
          <ListItemText primary="Routing" />
        </ListItem>
        <ListSubheader>Apps</ListSubheader>
        <ListItem button component="a" href="http://localhost:3001">
          <ListItemText primary="App #1" secondary="http://localhost:3001" />
        </ListItem>
        <ListItem button component="a" href="http://localhost:3002">
          <ListItemText primary="App #2" secondary="http://localhost:3002" />
        </ListItem>
        <ListItem button component="a" href="http://localhost:3003">
          <ListItemText primary="App #3" secondary="http://localhost:3003" />
        </ListItem>
        <ListItem button component="a" href="http://localhost:3004">
          <ListItemText primary="App #4" secondary="http://localhost:3004" />
        </ListItem>
        <ListItem button component="a" href="http://localhost:3005">
          <ListItemText primary="App #5" secondary="http://localhost:3005" />
        </ListItem>
      </List>
    </Drawer>
  );
}

export default function SideNav() {
  const classes = useStyles();

  return (
    <Drawer
      className={classes.drawer}
      variant="permanent"
      classes={{
        paper: classes.drawerPaper
      }}
      anchor="left"
    >
      <div className={classes.toolbar}>
        <Typography variant="h6">SideNav</Typography>
      </div>
      <Divider />
      <List>
        <ListSubheader>Demo Pages</ListSubheader>
        <ListItem button component={Link} to="/">
          <ListItemText primary="Main" />
        </ListItem>
        <ListItem button component={Link} to="/ui-library">
          <ListItemText primary="UI Library" />
        </ListItem>
        <ListItem button component={Link} to="/dialog">
          <ListItemText primary="Dialog" />
        </ListItem>
        <ListItem button component={Link} to="/routing/foo">
          <ListItemText primary="Routing" />
        </ListItem>
        <ListSubheader>Apps</ListSubheader>
        <ListItem button component="a" href="http://localhost:3001">
          <ListItemText primary="App #1" secondary="http://localhost:3001" />
        </ListItem>
        <ListItem button component="a" href="http://localhost:3002">
          <ListItemText primary="App #2" secondary="http://localhost:3002" />
        </ListItem>
        <ListItem button component="a" href="http://localhost:3003">
          <ListItemText primary="App #3" secondary="http://localhost:3003" />
        </ListItem>
      </List>
    </Drawer>
  );
}

function ParticipantsList(props) {
	const classes = useStyles();
	const { users } = props;
	const [openList, setOpenList] = useState(false);

	const renderParticipants = () => {
		return Object.keys(users).map(elem => {
			const name = users[elem];
			return (
				<>
					<ListItem>
						<ListItemAvatar>
							<Avatar style={{ fontWeight: "bold" }}>
								{nameGenerator(name.split(" "))}
							</Avatar>
						</ListItemAvatar>
						<ListItemText
							style={{
								borderRadius: "10px",
								padding: "10px",
								color: "rgb(62 53 53)",
								border: "solid rgb(62 53 53) 1px",
								textAlign: "center",
								fontWeight: "bolder",
								wordWrap: "break-word",
								overflowWrap: "break-word",
								hyphens: "auto",
								WebkitHyphens: "auto",
							}}
							primary={name}
						/>
					</ListItem>
				</>
			);
		});
	};
	return (
		<div>
			<Button
				onClick={() => setOpenList(true)}
				variant="contained"
				color="primary"
				startIcon={<GroupIcon />}
				style={{
					fontFamily: "poppins",
					marginLeft: "15px",
					fontWeight: "600",
					color: "white",
				}}
			>
				Participants [ {Object.keys(users).length} ]
			</Button>
			<Drawer
				anchor={"right"}
				open={openList}
				onClose={() => setOpenList(false)}
			>
				<CloseSharpIcon
					style={{ padding: "5px", fontSize: "3em", cursor: "pointer" }}
					onClick={() => setOpenList(false)}
				/>
				<div
					className={classes.list}
					style={{
						display: "flex",
						flexDirection: "column",
						minHeight: "100%",
					}}
					role="presentation"
				>
					<List>{renderParticipants()}</List>
				</div>
			</Drawer>
		</div>
	);
}

Sidebar = props => {
  const { open, variant, onClose, className, ...rest } = props;
  const { user } = useUser();

  const classes = useStyles();

  const pages = [];

  pages.push(
    {
      title: 'Dashboard',
      href: `/repo/${user.primaryRepo}/dashboard`,
      icon: <DashboardIcon/>
    },
    {
      title: 'Code',
      href: `/repo/${user.primaryRepo}/code`,
      icon: <CodeIcon/>
    },
    {
      title: 'Reviews',
      href: `/repo/${user.primaryRepo}/reviews`,
      icon: <AssignmentIcon/>
    },
    {
      title: 'Issues',
      href: `/repo/${user.primaryRepo}/issues`,
      icon: <ErrorIcon/>
    },
    {
      type: 'divider'
    },
    {
      title: 'Settings',
      href: '/settings',
      icon: <SettingsIcon />
    }
  );

  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      onClose={onClose}
      open={open}
      variant={variant}
    >
      <div
        {...rest}
        className={clsx(classes.root, className)}
      >
        <Profile />
        <Divider className={classes.divider} />
        <SidebarNav
          className={classes.nav}
          pages={pages}
        />
      </div>
    </Drawer>
  );
}

Frame = memo(({ contents, frontmatter, window }) => {

  const classes = useStyles()
  const [mobileOpen, setMobileOpen] = React.useState(false);
  // const [isNoContents, setIsNoContents] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const container = window !== undefined ? () => window().document.body : undefined;

  const series = Boolean(contents) ? contents.series : undefined


  // console.log(contents)
  // console.log(frontmatter)
  return (
    <div>
      <TopBar
        handleDrawerToggle={handleDrawerToggle}
        series={series}
      />
      {contents ?
        <nav className={classes.drawer}>
          {/* on mobile phone */}
          <Hidden smUp implementation="css">
            <Drawer
              container={container}
              variant="temporary"
              open={mobileOpen}
              onClose={handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper,
              }}
              ModalProps={{
                keepMounted: true, // Better open performance on mobile.
              }}
            >
              <Aside frontmatter={frontmatter} contents={contents} />
            </Drawer>
          </Hidden>
          {/* on pc web*/}
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper,
              }}
              variant="permanent"
              open
            >
              <Aside frontmatter={frontmatter} contents={contents} />
            </Drawer>
          </Hidden>
        </nav>
        : 
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            <Aside frontmatter={frontmatter} contents={undefined} />
          </Drawer>
        </Hidden>}
    </div>
  )

})

// Common layout left side pane for Dashboard and Schematic Editor
export default function LayoutSidebar ({ window, mobileOpen, mobileClose, children }) {
  const classes = useStyles()

  const container =
    window !== undefined ? () => window().document.body : undefined

  return (
    <>
      <nav className={classes.drawer} aria-label="mailbox folders">
        <Hidden lgUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={mobileClose}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true // Better open performance on mobile.
            }}
          >
            <IconButton
              onClick={mobileClose}
              color="inherit"
              style={{ marginLeft: '190px' }}
            >
              <HighlightOffIcon />
            </IconButton>
            {children}
          </Drawer>
        </Hidden>

        <Hidden smDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper
            }}
            variant="permanent"
            open
          >
            {children}
          </Drawer>
        </Hidden>
      </nav>
    </>
  )
}

// Editor right side pane to display grid and component properties.
export default function RightSidebar ({ window, mobileOpen, mobileClose, children }) {
  const classes = useStyles()

  const container =
    window !== undefined ? () => window().document.body : undefined

  return (
    <>
      <nav className={classes.drawer} aria-label="mailbox folders">
        <Hidden xlUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            anchor="right"
            onClose={mobileClose}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true // Better open performance on mobile.
            }}
          >
            <IconButton
              onClick={mobileClose}
              color="inherit"
              style={{ marginRight: '190px' }}
            >
              <HighlightOffIcon />
            </IconButton>
            {children}
          </Drawer>
        </Hidden>

        <Hidden mdDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper
            }}
            anchor="right"
            variant="permanent"
            open
          >
            {children}
          </Drawer>
        </Hidden>
      </nav>
    </>
  )
}

CustomDrawer = () => {
  const [open, setOpen] = useState(false)
  const theme = useTheme()
  const classes = useStyles()

  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)
  return (
    <div>
      <IconButton
        onClick={handleOpen}
        edge='start'
        color='inherit'
        aria-label='menu'
      >
        <MenuIcon />
      </IconButton>
      <Drawer
        open={open}
        onClose={handleClose}
        variant='temporary'
        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
        ModalProps={{
          keepMounted: true, // Better open performance on mobile.
        }}
      >
        <div className={classes.drawer}>
          <List>
            <ThemeToogleListItem />
            <LanguageSelector />
            {drawerLinks.map(({ name, url, Icon }) => (
              <ListItem
                button
                component='a'
                href={url}
                target='__blank'
                key={name}
              >
                {Icon && (
                  <ListItemIcon>
                    <Icon />
                  </ListItemIcon>
                )}
                <ListItemText primary={name} />
              </ListItem>
            ))}
          </List>
          <FilterList />
        </div>
      </Drawer>
    </div>
  )
}

Navbar = () => {
    const [ navState, navToggle ] = useState(false)
    const darkMode = useDarkMode(false);
    const classes = useStyles()
    return(
    <AppBar position="sticky" color="secondary">
        <Toolbar className={styles.navToolbar} style={{margin : '0', height : '100%', position : 'relative'}}>
            <Box>
                <IconButton onClick={() => navToggle(true)} className={classes.navToggle}><MenuIcon /></IconButton>
                <Drawer anchor='left' open={navState} onClose={() => navToggle(false)}>
                    <List>
                        <ListItem><Typography variant="h6" style={{fontWeight : '800'}}>DSC BPPIMT</Typography></ListItem>
                        <DrawerItem label="Home" icon={<HomeIcon />} link="/"/>
                        <DrawerItem label="Resources" icon={<LibraryBooksIcon /> } link='/resources'/>
                        <DrawerItem label="Blogs" icon={<BookIcon />} link='/blogs'/>
                        <DrawerItem label="Events" icon={<EmojiEventsIcon />} link='/events'/>
                        <DrawerItem label="Teams" icon={<GroupIcon />} link='/team'/>
                        <DrawerItem label="Alumni" icon={<GroupIcon />} link='/alumni'/>
                        <DrawerItem label="Contact" icon={<ContactsIcon />} link='/contact'/>
                        <DrawerItem label="About" icon={<InfoIcon />} link='/about'/>
                    </List>
                </Drawer>
            </Box>
            <Grid container>

            <Grid item xs={12} sm={5}style={{display : 'flex', alignItems: 'center'}}>
                <Link href="/"><Typography variant="h6" style={{cursor : 'pointer', marginLeft : '.4em'}} noWrap>
                    <DscLogo style={{marginRight : '10px', width : '1.5em'}}/>
                    DSC BPPIMT
                </Typography></Link>
            </Grid>
            <Grid item xs={7} container alignItems="center" spacing={3} justifyContent="flex-end" className={styles.nav}>
                <Grid item>
                    <Link href="/"><Typography variant="body2" style={{cursor : 'pointer'}}>Home</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/team"><Typography variant="body2" style={{cursor : 'pointer'}}>Team</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/alumni"><Typography variant="body2" style={{cursor : 'pointer'}}>Alumni</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/resources"><Typography variant="body2" style={{cursor : 'pointer'}}>Resources</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/events"><Typography variant="body2" style={{cursor : 'pointer'}}>Events</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/blogs"><Typography variant="body2" style={{cursor : 'pointer'}}>Blogs</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/contact"><Typography variant="body2" style={{cursor : 'pointer'}}>Contact</Typography></Link>
                </Grid>
                <Grid item>
                    <Link href="/about"><Typography variant="body2" style={{cursor : 'pointer'}}>About</Typography></Link>
                </Grid>
            </Grid>
        </Grid>
            <IconButton onClick={() => darkMode.toggle()}><Brightness6Icon /></IconButton>
        </Toolbar>
    </AppBar>)
}

Sidebar = props => {
  const { open, variant, onClose, className, ...rest } = props;
  let user = ''
  const { pathname } = props.history.location;
  const matchFunction = matchPath(pathname, {
    path: '/:user',
    strict: true,
  });

  if(matchFunction) {
    user = matchFunction.params.user
  }
  const classes = useStyles();

  const pages = [
    {
      title: 'Installation',
      href: `/setup`,
      icon: <SetupIcon />
    },
    {
      title: 'Settings',
      href: `/settings`,
      icon: <SettingsIcon />
    }
  ];

  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      onClose={onClose}
      open={open}
      variant={variant}
    >
      <div
        {...rest}
        className={clsx(classes.root, className)}
      >
        <SidebarNav
          className={classes.nav}
          pages={pages}
        />
      </div>
    </Drawer>
  );
}

Sidebar = props => {
  const { open, variant, onClose, className, ...rest } = props;
  let user = ''
  const { pathname } = props.history.location;
  const matchFunction = matchPath(pathname, {
    path: '/:user',
    strict: true,
  });

  if(matchFunction) {
    user = matchFunction.params.user
  }
  const classes = useStyles();

  const pages = [
    {
      title: 'Setup',
      href: `/${user}/dashboard`,
      icon: <BuildIcon />
    }
  ];

  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      onClose={onClose}
      open={open}
      variant={variant}
    >
      <div
        {...rest}
        className={clsx(classes.root, className)}
      >
        <Profile />
        <Divider className={classes.divider} />
        <SidebarNav
          className={classes.nav}
          pages={pages}
        />
      </div>
    </Drawer>
  );
}

More = props => {
  const { moreToggle, setMoreToggle } = props;
  const classes = useStyles();
  const handleClose = () => {
    setMoreToggle(!moreToggle);
  };
  return (
    <div>
      <Drawer
        open={moreToggle}
        anchor="bottom"
        onClose={handleClose}
        transitionDuration={500}
        BackdropProps={{ invisible: true }}
        classes={{ paper: classes.paper }}
      >
        <Grid container justify="center">
          <Grid item xs={12}>
            <Typography align="center" variant="body2" className={classes.text}>
              Explor More Open Sources Softwares
            </Typography>
          </Grid>
          <Button className={classes.buttonSpirometer}>
            <Grid container direction="column">
              <WavesIcon className={classes.spirometer} onClick={handleClose} />
              <Typography variant="caption" align="center">
                Spirometer
              </Typography>
            </Grid>
          </Button>
          <Button component={Link} to="/pulse" className={classes.buttonPulse} onClick={handleClose}>
            <Grid container direction="column" alignContent="center">
              <FavoriteBorderIcon className={classes.pulse} />
              <Typography variant="caption" align="center">
                Pulse
              </Typography>
            </Grid>
          </Button>
        </Grid>
      </Drawer>
    </div>
  );
}

render() {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography
              className={this.props.classes.heading}
              variant="display1"
              color="inherit"
            >
              Chat Server
            </Typography>
            <Hidden mdUp>
              <IconButton
                color="inherit"
                onClick={this.handleMenubutton}
                className={this.props.classes.menuButton}
              >
                <MenuIcon />
              </IconButton>
            </Hidden>
            <Hidden smDown>
              <Typography className={this.props.classes.links}>
                <Button href="/api/signup" color="primary" variant="contained">
                  Signup
                </Button>

                <Button href="/api/signin" color="primary" variant="contained">
                  Signin
                </Button>

                <Button href="/api/chat" color="primary" variant="contained">
                  Chat
                </Button>
              </Typography>
            </Hidden>
          </Toolbar>
        </AppBar>
        <Hidden mdUp>
          <Drawer
            variant="persistent"
            anchor="top"
            open={this.state.open}
            classes={{ paperAnchorTop: this.props.classes.drawerColor }}
          >
            <div className={this.props.classes.drawerWidth}>
              <IconButton onClick={this.handleMenubutton}>
                <KeyboardArrowUpIcon />
              </IconButton>

              <List>
                {["SignUp", "SignIn", "Chat"].map((text, index) => (
                  <ListItem button key={index}>
                    <Button href={`#${text}`} onClick={this.handleMenubutton}>
                      <ListItemText primary={text} />
                    </Button>
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </Hidden>
      </div>
    );
  }

export default function DashboardSidebar({ profile, isOpenSidebar, onCloseSidebar }) {
  const { pathname } = useLocation();

  useEffect(() => {
    if (isOpenSidebar) {
      onCloseSidebar();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname]);

  const renderContent = (
    <Scrollbar
      sx={{
        height: '100%',
        '& .simplebar-content': { height: '100%', display: 'flex', flexDirection: 'column' }
      }}
    >
      <Box sx={{ px: 2.5, py: 3 }}>
        <Box component={RouterLink} to="/" sx={{ display: 'inline-flex' }}>
          <Logo />
        </Box>
      </Box>

      {profile && (
        <Box sx={{ mb: 5, mx: 2.5 }}>
          <Link underline="none" component={RouterLink} to="#">
            <AccountStyle>
              <Avatar src={account.photoURL} alt="photoURL" />
              <Box sx={{ ml: 2 }}>
                <Typography variant="subtitle2" sx={{ color: 'text.primary' }}>
                  {profile.fullName}
                </Typography>
                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                  {profile.role}
                </Typography>
              </Box>
            </AccountStyle>
          </Link>
        </Box>
      )}

      <NavSection navConfig={sidebarConfig} />
    </Scrollbar>
  );

  return (
    <RootStyle>
      <MHidden width="lgUp">
        <Drawer
          open={isOpenSidebar}
          onClose={onCloseSidebar}
          PaperProps={{
            sx: { width: DRAWER_WIDTH }
          }}
        >
          {renderContent}
        </Drawer>
      </MHidden>

      <MHidden width="lgDown">
        <Drawer
          open
          variant="persistent"
          PaperProps={{
            sx: {
              width: DRAWER_WIDTH,
              bgcolor: 'background.default'
            }
          }}
        >
          {renderContent}
        </Drawer>
      </MHidden>
    </RootStyle>
  );
}

SurveyCharts = ({ surveyId, setShowCharts }) => {
  const iOS =
    typeof navigator !== 'undefined' &&
    typeof navigator.userAgent !== 'undefined' &&
    /iPad|iPhone|iPod/.test(navigator.userAgent);
  const { drawer } = useStyles();

  const [eachData, setEachData] = useState([]);
  const [survey, setSurvey] = useState({});

  useEffect(() => {
    api
      .getSurvey(surveyId)
      .then((survey) => {
        if (!survey) {
          throw new Error('Survey is not defined');
        }
        setSurvey(survey);
        console.warn('raw survey data:', survey);
        const chartData = [];
        for (let i = 0; i < survey.questions.length; i++) {
          const q = survey.questions[i];
          const res = survey.responses[i];
          if (res) {
            chartData.push({
              title: q.prompt,
              data: {
                labels: q.choices,
                // totals: res.datasets[0].data,
                totals: Array.from(q.choices)
                  .fill(0)
                  .map(
                    (c, i) =>
                      (res.labels.indexOf(q.choices[i]) >= 0 &&
                        res.datasets[0].data[
                          res.labels.indexOf(q.choices[i])
                        ]) ||
                      c
                  ),
              },
            });
          }
        }
        console.warn('loaded chart data:', chartData);
        setEachData(chartData);
      })
      .catch((err) => {
        console.error('err:', err);
      });
  }, [surveyId]);

  return (
    <Drawer
      disablebackdroptransition={!iOS ? 'true' : 'false'}
      disablediscovery={iOS ? 'true' : 'false'}
      anchor={'right'}
      open={true}
      onClose={() => setShowCharts(false)}
      classes={{ paper: drawer }}
      PaperProps={{ elevation: 6 }}
    >
      <Grid
        container
        style={{
          flexDirection: 'column',
          borderBottom: '1px solid black',
          marginBottom: '1rem',
        }}
      >
        <Grid item xs={12}>
          <Typography color="primary" variant="h4">
            Survey Response Data
          </Typography>
          <Typography variant="h5">{survey.title}</Typography>
        </Grid>
        <Grid item xs={12}>
          <IconButton
            onClick={() => setShowCharts(false)}
            style={{ alignSelf: 'flex-end' }}
          >
            <Close />
          </IconButton>
        </Grid>
      </Grid>
      <Grid container>
        {eachData &&
          eachData.map((item) => (
            <Grid item key={item.title}>
              <Typography variant="h5">{item.title}</Typography>
              <Pie
                data={{
                  labels: item.data.labels,
                  datasets: [
                    {
                      label: '# of Votes',
                      data: item.data.totals,
                      backgroundColor: [
                        'rgba(118, 187, 35, 1)',
                        '#61892f',
                        'rgba(135, 195, 46, .32)',
                      ],
                      borderColor: ['#000'],
                      borderWidth: 1,
                    },
                  ],
                }}
                options={{
                  plugins: {
                    legend: {
                      display: true,
                      position: 'bottom',
                    },
                  },
                }}
              />
            </Grid>
          ))}
      </Grid>
      <Box mt={5} />
    </Drawer>
  );
}

render() {
    const { mobile, match: { params: { guide: guideSlug } } } = this.props;
    const { toc } = this.state;
    const guideData = Guides[unslug(guideSlug)];
    if (!guideData) {
      return <NotFound />;
    }

    setTitle(`${guideData.name} Guide`);

    return (
      <div className="guide-container">
        <div className="section">
          <div className="guide-viewer">
            {guideData.sections.map((section, sId) => (
              <React.Fragment key={`${slug(guideData.name)}-s${sId}`}>
                <Paper id={`${slug(section.title)}`}>
                  {section.tabContent &&
                  <TabContent title={section.title} tabs={section.tabContent} />}
                  {!section.tabContent && section.paragraphs &&
                  <>
                    <AppBar position="static">
                      <Toolbar variant="dense">
                        <Typography variant="h5" className="title-text">{section.title}</Typography>
                      </Toolbar>
                    </AppBar>
                    <div className="body-container">
                      {section.paragraphs.map((line, pId) => {
                        const key = `${slug(guideData.name)}-s${sId}-p${pId}`;
                        if (typeof line === 'string') {
                          return <Typography key={key}>{line}</Typography>;
                        } else {
                          return <KeyComponent key={key}>{line}</KeyComponent>;
                        }
                      })}
                    </div>
                  </>}
                </Paper>
                {(sId + 1) % 3 === 0 &&
                <AdContainer type="horizontal" />}
              </React.Fragment>
              ),
            )}
          </div>
          {!mobile &&
          <Sticky holderProps={{ className: 'guide-toc' }}>
            <Paper>
              <AppBar position="static">
                <Toolbar variant="dense">
                  <Typography variant="subtitle1" className="title-text">{guideData.name}</Typography>
                </Toolbar>
              </AppBar>
              <div className="body-container">
                <Typography variant="subtitle2">Author: {guideData.meta.author}</Typography>
                <Typography variant="subtitle2">Last Updated: {guideData.meta.lastUpdated}</Typography>
                <Typography variant="subtitle1">Table of Contents</Typography>
                {guideData.sections.map((section, sId) => (
                  <Link
                    to={`#${slug(section.title)}`}
                    onClick={() => this.goSection(slug(section.title))}
                    color="primary"
                    key={`toc-${sId}`}
                  >
                    <Typography>{sId + 1}. {section.title}</Typography>
                  </Link>
                ))}
              </div>
            </Paper>
            <AdContainer type="square" />
          </Sticky>}
        </div>
        <ScrollToTop />
        {mobile &&
        <Fab
          color="primary"
          className="fab-left"
          onClick={this.handleToCClick}
        >
          <MenuIcon />
        </Fab>}
        <Drawer anchor="left" open={mobile && toc} onClose={this.closeToC}>
          <List style={{ width: 250 }}>
            <ListItem><Typography variant="h6">{guideData.name}</Typography></ListItem>
            <ListItem>
              <Typography variant="subtitle2">
                Author: {guideData.meta.author}<br />
                Last Updated: {guideData.meta.lastUpdated}
              </Typography>
            </ListItem>
            <hr />
            {guideData.sections.map((section, sId) => (
              <RouterLink
                to={`#${slug(section.title)}`}
                onClick={() => this.goSection(slug(section.title), 'auto')}
                color="primary"
                className="no-link"
                key={`toc-drawer-${sId}`}
              >
                <ListItem button>
                  <ListItemText primary={`${sId + 1}. ${section.title}`} />
                </ListItem>
              </RouterLink>
            ))}
          </List>
        </Drawer>
      </div>
    );
  }