CEC-3759-Collapsible-Sidemenu (#292)
* first push * Code smell --------- Co-authored-by: jwu-fisker <jwu@fiskerinc.com>
This commit is contained in:
das31
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
} else {
|
||||
return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user