@material-ui/icons#Menu JavaScript Examples

The following examples show how to use @material-ui/icons#Menu. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.js    From gitlab-lint-react with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
App = () => {
  const classes = useStyles();
  const [state, dispatch] = useReducer(reducer, initialState, initializer);

  const theme = useMemo(
    () =>
      createMuiTheme({
        palette: {
          ...(state.mode === "light"
            ? {
                // light mode
                primary: {
                  main: gloBlue,
                },
                secondary: {
                  main: gloBlue,
                },
                primary1Color: gloBlue,
                type: state.mode,
              }
            : {
                // dark mode
                primary: {
                  main: "#07366E",
                },
                secondary: {
                  main: gloBlue,
                },
                background: {
                  default: "#020c18",
                  paper: "#05182E",
                },
                primary1Color: gloBlue,
                type: state.mode,
              }),
        },
        typography: {
          useNextVariants: true,
        },
      }),
    [state.mode]
  );

  useEffect(() => {
    localStorage.setItem("state", JSON.stringify(state));
  }, [state]);
  const [isMobile, setIsMobile] = React.useState(false);

  const handleToggleMenu = () => {
    setIsMobile((isMobile) => !isMobile);
  };

  function closeMenuOnScroll() {
    setIsMobile(false);
  }

  React.useEffect(() => {
    window.addEventListener("scroll", closeMenuOnScroll);

    return () => {
      window.removeEventListener("scroll", closeMenuOnScroll);
    };
  }, []);

  return (
    <Router>
      <MuiThemeProvider theme={theme}>
        <div className={classes.root}>
          <CssBaseline />
          <AppBar position="static" color="primary">
            <Container maxWidth="lg">
              <Toolbar className={classes.dFlex}>
                <IconButton
                  className={classes.IconButton}
                  onClick={() => dispatch({ type: "toggle" })}
                  color="inherit"
                >
                  {theme.palette.type === "dark" ? (
                    <Brightness4 />
                  ) : (
                    <Brightness7 />
                  )}
                </IconButton>
                <Typography
                  component="a"
                  color="inherit"
                  variant="h6"
                  className={classes.title}
                  href="/"
                >
                  gitlab-lint
                </Typography>

                <div
                  className={
                    isMobile ? classes.navLinksMobile : classes.navLinks
                  }
                  onClick={handleToggleMenu}
                >
                  <Button component={Link} color="inherit" to="/rules">
                    Rules
                  </Button>
                  <Button component={Link} color="inherit" to="/projects">
                    Projects
                  </Button>
                  <Button component={Link} color="inherit" to="/levels">
                    Levels
                  </Button>
                  <Button component={Link} color="inherit" to="/about">
                    About
                  </Button>
                </div>

                <button
                  className={classes.mobileMenuIcon}
                  onClick={handleToggleMenu}
                >
                  {isMobile ? <Close /> : <Menu />}
                </button>
              </Toolbar>
            </Container>
          </AppBar>
          <main className={classes.main}>
            <Container maxWidth="lg">
              <Switch>
                <Route exact path="/rules/:id">
                  <Rule />
                </Route>
                <Route exact path="/rules">
                  <Rules />
                </Route>
                <Route exact path="/projects/:id">
                  <Project />
                </Route>
                <Route exact path="/projects">
                  <Projects />
                </Route>
                <Route exact path="/levels">
                  <Levels />
                </Route>
                <Route exact path="/about">
                  <About />
                </Route>
                <Route exact path="/">
                  <Dashboard />
                </Route>
                <Route path={"*"} component={NotFound} />
              </Switch>
            </Container>
          </main>
        </div>
      </MuiThemeProvider>
    </Router>
  );
}