Login / Register / SideMenu / Fixes

src/components/TopBar.js

@@ -1,4 +1,6 @@
 import React from "react";
+import UserMenu from "./UserMenu";
+import Social from "./Social";
 import logo from "../public/logo_white.svg";
 import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
@@ -13,24 +15,25 @@ 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 { showLoginDialog, showRegisterDialog } from "../actions/toggles";
 import { logout } from "../actions";
 import { makeStyles } from "@material-ui/core/styles";
 import ButtonSecondary from "./ButtonSecondary";
+import ListSubheader from "@material-ui/core/ListSubheader";
 
 const useStyles = makeStyles((theme) => ({
   paper: {
     backgroundColor: "#262626",
     color: "#bbbbbb",
     "& .MuiListItemIcon-root": {
-      color: "#01c3a9",
+      color: "#d68000",
     },
   },
+  subheader: {
+    color: "#767676",
+    fontSize: "0.8rem",
+    fontWeight: "400",
+  },
 }));
 
 export default function TopBar() {
@@ -50,6 +53,9 @@ export default function TopBar() {
       case "logIn":
         dispatch(showLoginDialog());
         break;
+      case "register":
+        dispatch(showRegisterDialog());
+        break;
       case "logOut":
         dispatch(logout());
         break;
@@ -108,7 +114,14 @@ export default function TopBar() {
         onClose={toggleDrawer(false)}
         PaperProps={{ className: classes.paper }}
       >
-        <List style={{ width: "300px" }}>
+        <List
+          style={{ width: "300px" }}
+          subheader={
+            <ListSubheader className={classes.subheader}>
+              Nawigacja
+            </ListSubheader>
+          }
+        >
           <ListItem button onClick={() => handleClick("menui")}>
             <ListItemIcon>
               <HomeIcon />
@@ -119,7 +132,7 @@ export default function TopBar() {
             <ListItemIcon>
               <MailIcon />
             </ListItemIcon>
-            <ListItemText primary="Skontaktuj się" />
+            <ListItemText primary="Kontakt" />
           </ListItem>
           <ListItem button onClick={() => handleClick("pricing")}>
             <ListItemIcon>
@@ -128,47 +141,30 @@ export default function TopBar() {
             <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>
-          )}
+          <ListItem>{loggedIn && <UserMenu />}</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 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>