@material-ui/icons#HomeRounded JavaScript Examples

function BottomNavBar({ user }) {
  const classes = useStyles();
  const history = useHistory();
  const [value, setValue] = useState("home");

  const handleChange = (e, newValue) => {
    history.push(`/${newValue}`);
    setValue(newValue);
  };

  useEffect(() => {
    setValue(window.location.pathname.substring(1));
    return history.listen(() => {
      setValue(window.location.pathname.substring(1));
    });
  }, []);

  return (
    <Hidden smUp>
      <div className={classes.footer}>
        <ThemeProvider theme={createMuiTheme(darkTheme)}>
          <BottomNavigation
            value={value}
            onChange={handleChange}
            className={classes.root}
          >
            <BottomNavigationAction
              label="Home"
              value="home"
              icon={<HomeRounded />}
            />
            {user?.displayName && (
              <BottomNavigationAction
                label="Upload"
                value="upload"
                icon={<AddCircleRounded />}
              />
            )}
            <BottomNavigationAction
              label="Explore"
              value="explore"
              icon={<ExploreRounded />}
            />
          </BottomNavigation>
        </ThemeProvider>
      </div>
    </Hidden>
  );
}

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>
  );
}

function Sidebar({
  user,
  isLightTheme,
  setIsLightTheme,
  setOpenSignIn,
  setOpenSignUp,
}) {
  const classes = useStyles();
  const history = useHistory();
  const [pageSelected, setPageSelected] = useState({
    home: false,
    about: false,
    upload: false,
    explore: false,
    profile: false,
  });

  const getSelectedStyle = (selected) => {
    if (isLightTheme)
      return selected
        ? lightTheme.palette.text.primary
        : lightTheme.palette.text.secondary;
    else
      return selected
        ? darkTheme.palette.text.primary
        : darkTheme.palette.text.secondary;
  };

  const setSelected = () => {
    const tempSelected = pageSelected;
    for (let i in tempSelected) tempSelected[i] = false;

    switch (window.location.pathname) {
      case "/home":
        tempSelected.home = true;
        break;
      case "/about":
        tempSelected.about = true;
        break;
      case "/upload":
        tempSelected.upload = true;
        break;
      case "/explore":
        tempSelected.explore = true;
        break;
      case "/profile":
        tempSelected.profile = true;
        break;
      default:
        console.log("404");
    }
    setPageSelected({ ...tempSelected });
  };

  useEffect(() => {
    setSelected();
    return history.listen(() => {
      setSelected();
    });
  }, []);

  return (
    <Grid item xs={0} sm={4} className={classes.sidebar}>
      <Hidden xsDown>
        <div
          className={classes.navLinks}
          style={{ height: window.innerHeight - 110 }}
        >
          <Link
            to="/home"
            className={classes.link}
            style={{ color: getSelectedStyle(pageSelected.home) }}
          >
            <HomeRounded />
            <span>Home</span>
          </Link>

          <Link
            to="/about"
            className={classes.link}
            style={{ color: getSelectedStyle(pageSelected.about) }}
          >
            <AssistantRounded />
            <span>About</span>
          </Link>

          {user?.displayName ? (
            <Link
              to="/upload"
              className={classes.link}
              style={{ color: getSelectedStyle(pageSelected.upload) }}
            >
              <AddCircleRounded />
              <span>Upload</span>
            </Link>
          ) : null}

          <Link
            to="/explore"
            className={classes.link}
            style={{ color: getSelectedStyle(pageSelected.explore) }}
          >
            <ExploreRounded />
            <span>Explore</span>
          </Link>

          {user?.displayName ? (
            <Link
              to="/profile"
              className={classes.link}
              style={{ color: getSelectedStyle(pageSelected.profile) }}
            >
              <AccountCircleRounded />
              <span>Profile</span>
            </Link>
          ) : null}
        </div>

        {user?.displayName ? (
          <div className={classes.account}>
            <Avatar src="" alt="User" className={classes.userPhoto} />
            <span className={classes.username}>{user?.displayName}</span>
            <IconButton
              className={classes.logOutBtn}
              onClick={() => {auth.signOut(); localStorage?.removeItem('lightThemeStatus');}}
            >
              <ExitToAppRounded color="error" className={classes.logOutIcon} />
            </IconButton>
          </div>
        ) : (
          <div className={classes.authBox}>
            <Button
              className={classes.signInBtn}
              onClick={() => setOpenSignIn(true)}
            >
              Sign In
            </Button>
            <Button
              className={classes.signUpBtn}
              onClick={() => setOpenSignUp(true)}
            >
              Sign Up
            </Button>
          </div>
        )}
      </Hidden>
    </Grid>
  );
}