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

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>