@material-ui/icons#MenuBookRounded JavaScript Examples

function Layout({ window, children }) {
  const theme = useTheme();
  const classes = useStyles();
  const history = useHistory();
  const location = useLocation();
  const [searchResult, setSearchResult] = useState([]);
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  const { darkMode, setDarkMode } = useContext(DarkModeContext);
  const [keyword, setKeyword] = useState("");
  const [mobileOpen, setMobileOpen] = React.useState(false);

  useEffect(() => {
    setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
  }, []);

  const menuItems = [
    {
      text: "HomePage",
      icon: <HomeRounded />,
      path: "/",
    },
    {
      text: "Waifu Pics",
      icon: <ImageRounded />,
      path: "/waifu",
    },
  ];

  const drawer = (
    <div>
      <div>
        <Typography variant="h5" className={classes.title}>
          ANIMEWORLD-Z
        </Typography>
      </div>
      <Divider />
      <List>
        {menuItems.map((menu, i) => (
          <ListItem
            key={i}
            button
            onClick={() => history.push(menu.path)}
            className={location.pathname === menu.path ? classes.active : null}
          >
            <ListItemIcon>{menu.icon}</ListItemIcon>
            <ListItemText primary={menu.text} />
          </ListItem>
        ))}
      </List>
      <div className={classes.footer}>
        <Typography variant="h6" className={classes.version}>
          v2.1
        </Typography>
      </div>
    </div>
  );

  const handleSwitch = (event) => {
    setDarkMode(event.target.checked);
  };

  const handleSearch = (event) => {
    const { value } = event.target;
    setKeyword(value);
  };

  const getSearchAnime = () => {
    if (keyword) {
      axios
        .get(`/api/v1/anime/${keyword}`)
        .then((response) => {
          setSearchResult(response.data);
        })
        .catch((err) => console.log(err));
    } else {
      setSearchResult([]);
    }
  };

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

  const handleResetKeyword = () => {
    setKeyword("");
  };

  useEffect(() => {
    let timer = setTimeout(() => getSearchAnime(), 1000);
    return () => clearTimeout(timer);
  }, [keyword]);

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

  return (
    <div className={classes.root}>
      <CssBaseline />
      {keyword !== "" ? (
        <SearchList
          results={searchResult}
          handleResetKeyword={handleResetKeyword}
        />
      ) : (
        ""
      )}
      <AppBar className={classes.appBar} color="dafault">
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuBookRounded />
          </IconButton>
          <Typography className={classes.time}>{time}</Typography>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchOutlined />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ "aria-label": "search" }}
              onChange={handleSearch}
              value={keyword}
            />
          </div>
          <Switch checked={darkMode} onChange={handleSwitch} />
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer}>
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
      <div className={classes.page}>
        <div className={classes.toolbar}></div>
        {children}
      </div>
    </div>
  );
}