Merge branch 'sidebar_changes' into dev_environment

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,
@@ -31,6 +32,7 @@ import PlaneIcon from "products/AviationIcons/PlaneIcon";
 import AirportMapIcon from "products/AviationIcons/AirportMapIcon";
 import JobsiteIcon from "products/Construction/JobSiteIcon";
 import { getThemeType } from "theme";
+import { openCrispChat } from "chat/CrispChat";
 import ObjectHeaterIcon from "products/Construction/ObjectHeaterIcon";
 import TasksIcon from "products/Construction/TasksIcon";
 import CableIcon from "products/Bindapt/CableIcon";
@@ -95,6 +97,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   listItem: {
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
+    maxHeight: 40,
     [theme.breakpoints.up("md")]: {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3)
@@ -529,7 +532,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 +548,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 sx={{ my: 1 }} />
+        <List className={classes.list} component="nav">
+          <Tooltip title="Help" placement="right">
+            <ListItemButton classes={{ root: classes.listItem }} onClick={() => openCrispChat()}>
+              <ListItemIcon>
+                <HelpOutline style={{ color: getThemeType() === "light" ? "black" : undefined }} />
+              </ListItemIcon>
+              {open && <ListItemText primary="Help" />}
+            </ListItemButton>
+          </Tooltip>
+        </List>
+      </Box>
     </SwipeableDrawer>
   );
 }