menui_web/src/components/TopBar.js

import React from "react";
import UserMenu from "./UserMenu";
import Social from "./Output/Social";
import logo from "../public/logo_white.svg";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import { useDispatch, useSelector } from "react-redux";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Divider from "@material-ui/core/Divider";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import HomeIcon from "@material-ui/icons/Home";
import MailIcon from "@material-ui/icons/Mail";
import { logout } from "../actions";
import { showRegulamin } from "../actions/toggles.js";
import { makeStyles } from "@material-ui/core/styles";
import ButtonSecondary from "./Input/ButtonSecondary";
import ListSubheader from "@material-ui/core/ListSubheader";
import { useHistory } from "react-router-dom";
import GavelIcon from "@material-ui/icons/Gavel";

const useStyles = makeStyles((theme) => ({
  paper: {
    backgroundColor: "#262626",
    color: "#bbbbbb",
    "& .MuiListItemIcon-root": {
      color: "#d68000",
    },
  },
  subheader: {
    color: "#767676",
    fontSize: "0.8rem",
    fontWeight: "400",
  },
}));

export default function TopBar() {
  const classes = useStyles();
  const loggedIn = useSelector((state) => state.data.loggedIn);
  const username = useSelector((state) => state.data.userData.firstname);
  const history = useHistory();
  const dispatch = useDispatch();
  const handleClick = (button) => {
    setState((state.menuOpen = false));
    switch (button) {
      case "menui":
        history.push("/");
        break;
      case "logIn":
        history.push("/login");
        break;
      case "kontakt":
        history.push("/kontakt");
        break;
      case "regulamin":
        dispatch(showRegulamin());
        break;
      case "register":
        history.push("/register");
        break;
      case "logOut":
        dispatch(logout());
        break;
      default:
        return true;
    }
  };
  const [state, setState] = React.useState({
    menuOpen: false,
  });

  const closeDrawer = () => {
    setState({ menuOpen: false });
  };
  const toggleDrawer = (open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ menuOpen: open });
  };

  return (
    <div className="topBar">
      <div className="topBar-logo-container">
        <img
          src={logo}
          className="topBarLogo"
          alt="Menui logo"
          onClick={() => history.push("/")}
        />
        <div className="vertical-divider"></div>
        <h5>Food guide</h5>
      </div>
      <div className="topBar-hamburger">
        {loggedIn && (
          <div className="topbar-username">
            {" "}
            <p>Witaj {username}</p>{" "}
          </div>
        )}
        <IconButton onClick={toggleDrawer(true)} aria-label="menu">
          <MenuIcon color="secondary" />
        </IconButton>
      </div>
      <Drawer
        className={classes.root}
        anchor="right"
        open={state.menuOpen}
        onClose={toggleDrawer(false)}
        PaperProps={{ className: classes.paper }}
      >
        <List
          style={{ width: "300px" }}
          subheader={
            <ListSubheader className={classes.subheader}>
              Nawigacja
            </ListSubheader>
          }
        >
          <ListItem button onClick={() => handleClick("menui")}>
            <ListItemIcon>
              <HomeIcon />
            </ListItemIcon>
            <ListItemText primary="Menui" />
          </ListItem>
          <ListItem button onClick={() => handleClick("kontakt")}>
            <ListItemIcon>
              <MailIcon />
            </ListItemIcon>
            <ListItemText primary="Kontakt" />
          </ListItem>
          <ListItem button onClick={() => handleClick("regulamin")}>
            <ListItemIcon>
              <GavelIcon />
            </ListItemIcon>
            <ListItemText primary="Regulamin" />
          </ListItem>
          <Divider />
          <ListItem>
            {loggedIn && <UserMenu closeMenu={closeDrawer} />}
          </ListItem>
        </List>
        <div className="drawer-bottom">
          <div className="drawer-buttons">
            {!loggedIn && (
              <ButtonSecondary
                onClick={() => handleClick("logIn")}
                text="Logowanie"
              />
            )}
            {!loggedIn && (
              <ButtonSecondary
                onClick={() => handleClick("register")}
                text="Rejestracja"
              />
            )}
            {loggedIn && (
              <ButtonSecondary
                onClick={() => handleClick("logOut")}
                text="Wyloguj"
              />
            )}
          </div>
          <Social />
        </div>
      </Drawer>
    </div>
  );
}