added a help button at the bottom of the scrollbar

src/navigation/SideNavigator.tsx

@@ -1,6 +1,7 @@
-import { ChevronRight, Code, Grain, Memory, People, Person, SyncAlt, TapAndPlay } from "@mui/icons-material";
+import { ChevronRight, Code, Grain, HelpOutline, Memory, People, Person, SyncAlt, TapAndPlay } from "@mui/icons-material";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
 import {
+  Box,
   darken,
   Divider,
   Grid2 as Grid,
@@ -529,7 +530,8 @@ export default function SideNavigator(props: Props) {
       onClose={onClose}
       sx={{ pointerEvents: isMobile&&!open ? "none" : "auto"}}
     >
-      <Toolbar>
+      <Box sx={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+        <Toolbar disableGutters sx={{ px: 1 }}>
           <Grid container direction="row" justifyContent={"flex-end"}>
             <Grid>
               <IconButton
@@ -544,8 +546,21 @@ export default function SideNavigator(props: Props) {
           </Grid>
         </Toolbar>
         <Divider />
-      {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */}
+        <Box sx={{ flex: 1, overflowY: "auto", scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" } }}>
           {isAuthenticated && authenticatedSideMenu()}
+        </Box>
+        <Divider />
+        <List>
+          <Tooltip title="Help" placement="right">
+            <ListItemButton classes={{ root: classes.listItem }}>
+              <ListItemIcon>
+                <HelpOutline style={{ color: getThemeType() === "light" ? "black" : undefined }} />
+              </ListItemIcon>
+              {open && <ListItemText primary="Help" />}
+            </ListItemButton>
+          </Tooltip>
+        </List>
+      </Box>
     </SwipeableDrawer>
   );
 }