fixed side menu bug where you could click it while it was closed

src/navigation/SideNavigator.tsx

@@ -70,19 +70,26 @@ const useStyles = makeStyles((theme: Theme) => ({
     })
   },
   sideMenuOnClosed: {
-    transition: theme.transitions.create(["width", "z-index", "opacity"], {
+    transition: theme.transitions.create(["width"], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
     }),
-    overflowX: "hidden",
-    width: theme.spacing(7),
-    zIndex: theme.zIndex.drawer,
-    opacity: 0,
+    // overflowX: "hidden",
+    width: theme.spacing(0),
+    // zIndex: theme.zIndex.drawer,
+    // opacity: 0,
     [theme.breakpoints.up("md")]: {
-      width: theme.spacing(9),
+      width: theme.spacing(9.25),
       opacity: 1
     }
   },
+  sideMenuOnClosedMobile: {
+    transition: theme.transitions.create(["width"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    width: theme.spacing(0),
+  },
   list: {
     paddingTop: 0
   },
@@ -504,7 +511,7 @@ export default function SideNavigator(props: Props) {
       classes={{
         paper: classNames(
           classes.sideMenu,
-          open ? classes.sideMenuOpened : classes.sideMenuOnClosed
+          open ? classes.sideMenuOpened : (isMobile ? classes.sideMenuOnClosedMobile : classes.sideMenuOnClosed)
         )
       }}
       anchor="left"