CEC-3759-Collapsible-Sidemenu (#292)

* first push

* Code smell

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

src/components/Layouts/MenuDrawer.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import clsx from "clsx";
 import {
   Container,
@@ -7,8 +7,10 @@ import {
   Toolbar,
   Typography,
   Divider,
+  IconButton,
 } from "@material-ui/core";
 
+import MenuIcon from "@material-ui/icons/Menu";
 import SideMenu from "./SideMenu";
 import useStyles from "../useStyles";
 import { useUserContext } from "../Contexts/UserContext";
@@ -22,20 +24,40 @@ export default function MenuDrawer({ children }) {
   const { title, sitePath } = useStatusContext();
   const { token } = useUserContext();
 
+  const [drawerOpen, setDrawerOpen] = useState(true);
+
+  const toggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+
   return (
     <div className={classes.root}>
       <AppBar
         position="fixed"
         className={clsx(classes.appBar, {
-          [classes.appBarShift]: token !== null,
+          [classes.appBarShift]: token !== null && drawerOpen,
         })}
       >
         <Toolbar>
+          {token !== null && (
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="toggle drawer"
+              onClick={toggleDrawer}
+              className={classes.menuButton}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
           <div>
             <Typography variant="h6" noWrap>
               {title}
             </Typography>
-            <SiteBreadcrumbs path={sitePath} className={classes.breadcrumbs} />
+            <SiteBreadcrumbs
+              path={sitePath}
+              className={classes.breadcrumbs}
+            />
           </div>
           {token !== null && (
             <UserMenu color="inherit" className={classes.rightToolbar} />
@@ -47,7 +69,7 @@ export default function MenuDrawer({ children }) {
           className={classes.drawer}
           variant="persistent"
           anchor="left"
-          open={true}
+          open={drawerOpen}
           classes={{
             paper: classes.drawerPaper,
           }}
@@ -65,7 +87,7 @@ export default function MenuDrawer({ children }) {
       )}
       <main
         className={clsx(classes.content, {
-          [classes.contentShift]: token !== null,
+          [classes.contentShift]: token !== null && drawerOpen,
         })}
       >
         <div className={classes.drawerHeader} />