changed navigation logic of side navigator to make sur ebackground goes away

src/app/Header.tsx

@@ -1,16 +1,14 @@
 import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
 import { Menu } from "@mui/icons-material";
-// import classNames from "classnames";
 import { makeStyles } from "@mui/styles";
 import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
-// import { Link } from "react-router-dom";
 import { useThemeType } from "../hooks/useThemeType";
 import UserMenu from "../user/UserMenu";
 import { useMobile } from "hooks";
 import HeaderButtons from "./HeaderButtons";
 import { useGlobalState } from "providers";
 import SideNavigator from "navigation/SideNavigator";
-import React, { useState } from "react";
+import { useState } from "react";
 import BottomNavigator from "navigation/BottomNavigator";
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -87,53 +85,54 @@ interface Props {
 
 export default function Header(props: Props) {
 
-    // const { sideIsOpen, openSide, toggleTheme } = props;
-    const { toggleTheme } = props;
-    const themeType = useThemeType();
-    const classes = useStyles()
-    const isMobile = useMobile();
+  // const { sideIsOpen, openSide, toggleTheme } = props;
+  const { toggleTheme } = props;
+  const themeType = useThemeType();
+  const classes = useStyles()
+  const isMobile = useMobile();
     
-    const [{ user, team }] = useGlobalState();
-    const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
+  const [{ user, team }] = useGlobalState();
+  const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
 
-    const [navOpen, setNavOpen] = useState(false)
+  const [navOpen, setNavOpen] = useState(false)
 
-    return (
-        <React.Fragment>
-        <AppBar position="fixed" className={classes.appBar}>
-            <Toolbar disableGutters className={classes.toolbar}>
-                <Box className={classes.buttonContainer}>
-                    {!isMobile && (
-                        <IconButton
-                            color="inherit"
-                            aria-label="Open side menu"
-                            onClick={() => {setNavOpen(true)}}
-                            style={{ color: getSignatureAccentColour() }}
-                            className={classes.button}>
-                                <Menu />
-                        </IconButton>
-                    )}
-                </Box>
-                <Box flexGrow={1} marginLeft={0.5}>
-                    {!hideLogo() && (
-                        <div className={classes.logoContainer}>
-                            <img
-                                className={classes.HeaderLogo}
-                                src={themeType === "light" ? getDarkLogo() : getLightLogo()}
-                                alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
-                            />
-                        </div>
-                    )}
-                </Box>
-                <Box className={classes.appBarRight}>
-                    <UserMenu toggleTheme={toggleTheme} />
-                    <HeaderButtons hasTeams={hasTeams} team={team} user={user} />
-                </Box>
-            </Toolbar>
+  return (
+    <>
+      <AppBar position="fixed" className={classes.appBar}>
+        <Toolbar disableGutters className={classes.toolbar}>
+					<Box className={classes.buttonContainer}>
+						{!isMobile && (
+							<IconButton
+								color="inherit"
+								aria-label="Open side menu"
+								onClick={() => {setNavOpen(true)}}
+								style={{ color: getSignatureAccentColour() }}
+								className={classes.button}
+							>
+								<Menu />
+							</IconButton>
+						)}
+					</Box>
+					<Box flexGrow={1} marginLeft={0.5}>
+						{!hideLogo() && (
+							<div className={classes.logoContainer}>
+								<img
+									className={classes.HeaderLogo}
+									src={themeType === "light" ? getDarkLogo() : getLightLogo()}
+									alt={import.meta.env.REACT_APP_WEBSITE_TITLE}
+								/>
+							</div>
+						)}
+					</Box>
+					<Box className={classes.appBarRight}>
+						<UserMenu toggleTheme={toggleTheme} />
+						<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
+					</Box>
+			</Toolbar>
 
-        </AppBar>
-        <SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
-        {isMobile && <BottomNavigator openSide={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}
-        </React.Fragment>
-    )
+			</AppBar>
+			<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
+			{isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}
+    </>
+  )
 }

src/navigation/BottomNavigator.tsx

@@ -25,12 +25,12 @@ import { useAuth0 } from "@auth0/auth0-react";
 
 interface Props {
   sideIsOpen: boolean;
-  openSide: () => void;
+  setNavOpen: (value: React.SetStateAction<boolean>) => void
 }
 
 export default function BottomNavigator(props: Props) {
   const theme = useTheme();
-  const { sideIsOpen, openSide } = props;
+  const { sideIsOpen, setNavOpen } = props;
   const navigate = useNavigate();
   const location = useLocation();
   const prevLocation = usePrevious(location);
@@ -90,10 +90,11 @@ export default function BottomNavigator(props: Props) {
 
   const handleRouteChange = (newRoute: string) => {
     if (newRoute === "more") {
-      openSide();
+      setNavOpen(true);
     } else {
       navigate(`/${newRoute}`);
       setRoute(newRoute);
+      setNavOpen(false)
     }
   };
 

src/navigation/SideNavigator.tsx

@@ -20,7 +20,7 @@ import classNames from "classnames";
 import { useWidth } from "../hooks/useWidth";
 import { makeStyles } from "@mui/styles";
 import BindaptIcon from "../products/Bindapt/BindaptIcon";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import BinsIcon from "products/Bindapt/BinsIcon";
 import { useGlobalState } from "providers";
 import {
@@ -109,6 +109,8 @@ export default function SideNavigator(props: Props) {
   const location = useLocation();
   const [{ user }] = useGlobalState()
 
+  const navigate = useNavigate();
+
   const getClasses = (page: string) => {
     if (page === "/device") {
       if (location.pathname.startsWith("/device") ||
@@ -128,6 +130,11 @@ export default function SideNavigator(props: Props) {
     })
   }
 
+  const goTo = (url: string) => {
+    onClose();
+    navigate(url)
+  }
+
   const authenticatedSideMenu = () => {
     const isMiVent = IsMiVent();
     return (
@@ -135,9 +142,7 @@ export default function SideNavigator(props: Props) {
         <Tooltip title="Bins" placement="right">
           <ListItemButton
             id="tour-dashboard"
-            component={Link}
-            to="/bins"
-            onClick={onClose}
+            onClick={() => goTo("/bins")}
             classes={getClasses("/bin")}
             >
             <ListItemIcon>
@@ -149,9 +154,7 @@ export default function SideNavigator(props: Props) {
         <Tooltip title="Devices" placement="right">
           <ListItemButton
             id="tour-dashboard"
-            component={Link}
-            to="/devices"
-            onClick={onClose}
+            onClick={() => goTo("/devices")}
             classes={getClasses("/device")}
             >
             <ListItemIcon>
@@ -164,9 +167,7 @@ export default function SideNavigator(props: Props) {
           <Tooltip title="Mines" placement="right">
             <ListItemButton
               id="tour-dashboard"
-              component={Link}
-              to="/mines"
-              onClick={onClose}
+              onClick={() => goTo("/mines")}
               classes={getClasses("/mine")}
               >
               <ListItemIcon>
@@ -179,10 +180,8 @@ export default function SideNavigator(props: Props) {
         <Tooltip title="Teams" placement="right">
           <ListItemButton
             id="tour-dashboard"
-            component={Link}
-            to="/teams"
-            onClick={onClose}
-            classes={getClasses("/team")}
+            onClick={() => goTo("/teams")}
+            classes={getClasses("/team")} 
             >
             <ListItemIcon>
               <People />
@@ -193,9 +192,7 @@ export default function SideNavigator(props: Props) {
         <Tooltip title="Users" placement="right">
           <ListItemButton
             id="tour-dashboard"
-            component={Link}
-            to="/users"
-            onClick={onClose}
+            onClick={() => goTo("/users")}
             classes={getClasses("/user")}
             >
             <ListItemIcon>
@@ -221,9 +218,7 @@ export default function SideNavigator(props: Props) {
       open={open}
       onOpen={onOpen}
       onClose={onClose}
-      // disableBackdropTransition={!iOS}
-      // disableDiscovery={iOS}>
-      >
+    >
       <Toolbar >
         <Grid container direction="row" justifyContent={"flex-end"}>
           <Grid>

src/theme/theme.ts

@@ -30,6 +30,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
   const highlight = themeType === "light" ? "black" : "white";
   const bg = generateBackgroundShades(themeType)
   return {
+    cssVariables: true,
     zIndex: {
       modal: 1300,
       popover: 1350