CEC-3759-Collapsible-Sidemenu (#292)

* first push

* Code smell

---------

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

src/components/App/__snapshots__/App.test.js.snap

@@ -14,6 +14,30 @@ exports[`App Route / authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -650,6 +674,30 @@ exports[`App Route /home authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -1286,6 +1334,30 @@ exports[`App Route /issue-info authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -1905,6 +1977,30 @@ exports[`App Route /issues authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -2767,6 +2863,30 @@ exports[`App Route /package-deploy authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -3838,6 +3958,30 @@ exports[`App Route /package-status authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -4644,6 +4788,30 @@ exports[`App Route /packages authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -5664,6 +5832,30 @@ exports[`App Route /page-not-found authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -6225,6 +6417,30 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -7057,6 +7273,30 @@ exports[`App Route /tools/security-dll authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -7451,6 +7691,30 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -8149,6 +8413,30 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -9265,6 +9553,30 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -10316,6 +10628,30 @@ exports[`App Route /vehicles authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"

src/components/DigitalTwin/index.js

@@ -58,11 +58,7 @@ const DigitalTwin = (props) => {
         <div className={classes.popupSection}>
           <h3>Door Locks</h3>
           {Object.entries(door_locks).map((value) => {
-            if (value[0] === "driver") {
+            return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
-              return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
-            } else {
-              return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
-            }
           })}
         </div>
       )}

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} />