UI Mechanics / New Look (orange - gray)

src/components/TopBar.js

@@ -1,27 +1,176 @@
 import React from "react";
-import ButtonPrimary from "./ButtonPrimary";
 import logo from "../public/logo_white.svg";
-import { useDispatch } from "react-redux";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import { useDispatch, useSelector } from "react-redux";
 import { setAppMode } from "../actions";
+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 PaymentIcon from "@material-ui/icons/Payment";
+import FastfoodIcon from "@material-ui/icons/Fastfood";
+import AddCircleIcon from "@material-ui/icons/AddCircle";
+import FacebookIcon from "@material-ui/icons/Facebook";
+import TwitterIcon from "@material-ui/icons/Twitter";
+import InstagramIcon from "@material-ui/icons/Instagram";
+import { showLoginDialog } from "../actions/toggles";
+import { logout } from "../actions";
+import { makeStyles } from "@material-ui/core/styles";
+import ButtonSecondary from "./ButtonSecondary";
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+    "& .MuiListItemIcon-root": {
+      color: "#01c3a9",
+    },
+  },
+}));
 
 export default function TopBar() {
+  const classes = useStyles();
+  const loggedIn = useSelector((state) => state.data.loggedIn);
+  const username = useSelector((state) => state.data.username);
   const dispatch = useDispatch();
   const imgClick = () => {
     dispatch(setAppMode("APP_INIT"));
   };
+  const handleClick = (button) => {
+    setState((state.menuOpen = false));
+    switch (button) {
+      case "menui":
+        dispatch(setAppMode("APP_INIT"));
+        break;
+      case "logIn":
+        dispatch(showLoginDialog());
+        break;
+      case "logOut":
+        dispatch(logout());
+        break;
+      case "myRestaurant":
+        dispatch(setAppMode("APP_RESTAURANT"));
+        break;
+      case "addDish":
+        dispatch(setAppMode("APP_ADD_DISH"));
+        break;
+      default:
+        return true;
+    }
+  };
+  const [state, setState] = React.useState({
+    menuOpen: false,
+  });
+
+  const toggleDrawer = (open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+
+    setState({ menuOpen: open });
+  };
 
   return (
     <div className="topBar">
-      <img
-        src={logo}
-        className="topBarLogo"
-        alt="Menui logo"
-        onClick={() => imgClick()}
-      />
-      <div>
-        <ButtonPrimary text="Dodaj Lokal" />
-        <ButtonPrimary text="Logowanie" />
+      <div className="topBar-logo-container">
+        <img
+          src={logo}
+          className="topBarLogo"
+          alt="Menui logo"
+          onClick={() => imgClick()}
+        />
+        <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" }}>
+          <ListItem button onClick={() => handleClick("menui")}>
+            <ListItemIcon>
+              <HomeIcon />
+            </ListItemIcon>
+            <ListItemText primary="Menui" />
+          </ListItem>
+          <ListItem button onClick={() => handleClick("contact")}>
+            <ListItemIcon>
+              <MailIcon />
+            </ListItemIcon>
+            <ListItemText primary="Skontaktuj się" />
+          </ListItem>
+          <ListItem button onClick={() => handleClick("pricing")}>
+            <ListItemIcon>
+              <PaymentIcon />
+            </ListItemIcon>
+            <ListItemText primary="Cennik" />
+          </ListItem>
+          <Divider />
+          {loggedIn && (
+            <ListItem button onClick={() => handleClick("myRestaurant")}>
+              <ListItemIcon>
+                <FastfoodIcon />
+              </ListItemIcon>
+              <ListItemText primary="Moja restauracja" />
+            </ListItem>
+          )}
+          {loggedIn && (
+            <ListItem button onClick={() => handleClick("addDish")}>
+              <ListItemIcon>
+                <AddCircleIcon />
+              </ListItemIcon>
+              <ListItemText primary="Dodaj danie" />
+            </ListItem>
+          )}
+        </List>
+        <div className="drawer-buttons">
+          {!loggedIn && (
+            <ButtonSecondary
+              onClick={() => handleClick("logIn")}
+              text="Zaloguj się"
+            />
+          )}
+          {loggedIn && (
+            <ButtonSecondary
+              onClick={() => handleClick("logOut")}
+              text="Wyloguj"
+            />
+          )}
+        </div>
+        <div className="drawer-bottom">
+          <IconButton color="secondary">
+            <FacebookIcon />
+          </IconButton>
+          <IconButton color="secondary">
+            <TwitterIcon />
+          </IconButton>
+          <IconButton color="secondary">
+            <InstagramIcon />
+          </IconButton>
+        </div>
+      </Drawer>
     </div>
   );
 }