@material-ui/icons#Place JavaScript Examples

export default function MainAppBar(props) {
  const classes = useStyles();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = (variant) => {
    setMobileOpen(variant === "temporary" && !mobileOpen);
  };

  const drawer = (variant) => (
      <div>
        <div className={classes.toolbar}/>
        <Divider/>
        <List component="nav">
          <ListItem button component={Link} to="/" onClick={() => handleDrawerToggle(variant)} key={"/"}>
            <ListItemIcon><Home/></ListItemIcon>
            <ListItemText primary="Home"/>
          </ListItem>

          <ListItem button component={Link} to="/out-of-omaha" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha"}>
            <ListItemIcon><LocationCity/></ListItemIcon>
            <ListItemText primary="Out of Omaha"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/out-of-omaha/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-omaha/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Out of Omaha Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/out-of-state" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state"}>
            <ListItemIcon><Map/></ListItemIcon>
            <ListItemText primary="Out of State"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/out-of-state/map" onClick={() => handleDrawerToggle(variant)} key={"/out-of-state/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Out of State Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/low-condition" onClick={() => handleDrawerToggle(variant)} key={"/low-condition"}>
            <ListItemIcon><TrendingDown/></ListItemIcon>
            <ListItemText primary="Low Condition"/>
          </ListItem>
          <List component="div" disablePadding dense>
            <ListItem className={classes.nested} button component={Link} to="/low-condition/map" onClick={() => handleDrawerToggle(variant)} key={"/low-condition/map"}>
              <ListItemIcon><Place/></ListItemIcon>
              <ListItemText primary="Low Condition Map"/>
            </ListItem>
          </List>

          <ListItem button component={Link} to="/about" onClick={() => handleDrawerToggle(variant)} key={"/about"}>
            <ListItemIcon><Info/></ListItemIcon>
            <ListItemText primary="About"/>
          </ListItem>
        </List>
      </div>
  );

  return (
      <div className={classes.root}>
        <CssBaseline/>
        <AppBar position="fixed" className={classes.appBar}>
          <Toolbar>
            <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={() => handleDrawerToggle("temporary")}
                className={classes.menuButton}
            >
              <MenuIcon/>
            </IconButton>
            <img src="/landlord/favicon.png" alt="logo" className={classes.logo} width={30} height={30}/>
            <Typography variant="h6" noWrap>
              Landlords of Omaha
            </Typography>
          </Toolbar>
        </AppBar>
        <nav className={classes.drawer}>
          <Hidden mdUp implementation="css">
            <Drawer
                variant="temporary"
                anchor="left"
                open={mobileOpen}
                onClose={() => handleDrawerToggle("temporary")}
                classes={{
                  paper: classes.drawerPaper,
                }}
                ModalProps={{
                  keepMounted: true, // Better open performance on mobile.
                }}
            >
              {drawer("temporary")}
            </Drawer>
          </Hidden>
          <Hidden smDown implementation="css">
            <Drawer
                classes={{
                  paper: classes.drawerPaper,
                }}
                variant="permanent"
                open
            >
              {drawer("permanent")}
            </Drawer>
          </Hidden>
        </nav>
        <div className={classes.contentWrapper}>
          <div className={classes.toolbar}/>
          <main className={classes.main}>
            {props.children}
          </main>

          <footer className={classes.footer}>
            <div className={classes.footerBody}>
              <Typography variant="body2" component="p">Learn more about this project:</Typography>
              <Box display="flex" justifyContent="center">
                <Box m={1} p={1}>
                  <a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://codefornebraska.slack.com/messages/housing"><Icon icon={slackIcon} width="36" height="36"/></a>
                </Box>
                <Box m={1} p={1}>
                  <a className={classes.footerLink} rel="noreferrer" target="_blank" href="https://github.com/codefornebraska/landlord"><Icon icon={githubIcon} width="36" height="36"/></a>
                </Box>
              </Box>
            </div>
            <div className={classes.footerCopyright}>
              <Typography variant="body2">
                {`Copyright © `}
                <a className={classes.footerLink}  rel="noreferrer" target="_blank" href="https://www.codefornebraska.org/">Code for Nebraska</a>
                {` ${new Date().getFullYear()}`}
              </Typography>
            </div>
          </footer>
        </div>
      </div>
  );
}