fixed alignment issues on local credentials front end

src/app/UserWrapper.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       paddingBottom: 0,
     },
     [theme.breakpoints.up("md")]: {
-      paddingLeft: theme.spacing(9)
+      paddingLeft: theme.spacing(8)
     },
   },
   container: {

src/bin/AddBinFab.tsx

@@ -28,6 +28,7 @@ const useStyles = makeStyles((theme: Theme) => {
       position: "fixed",
       bottom: theme.spacing(8), //for mobile navigator
       right: theme.spacing(2),
+      zIndex: theme.zIndex.speedDial,
       [theme.breakpoints.up("sm")]: {
         bottom: theme.spacing(1.75)
       }

src/navigation/SideNavigator.tsx

@@ -53,6 +53,7 @@ import CNHiIcon from "products/CommonIcons/cnhiIcon";
 import LibraCartIcon from "products/CommonIcons/libracartIcon";
 
 const drawerWidth = 230;
+const closedDrawerWidth = 8;
 
 const useStyles = makeStyles((theme: Theme) => ({
   sideMenu: {
@@ -66,6 +67,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   sideMenuOpened: {
     zIndex: theme.zIndex.drawer + 2,
     width: drawerWidth,
+    minWidth: drawerWidth,
+    maxWidth: drawerWidth,
     transition: theme.transitions.create(["width"], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen
@@ -76,12 +79,16 @@ const useStyles = makeStyles((theme: Theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
     }),
-    // overflowX: "hidden",
+    overflowX: "hidden",
     width: theme.spacing(0),
+    minWidth: theme.spacing(0),
+    maxWidth: theme.spacing(0),
     // zIndex: theme.zIndex.drawer,
     // opacity: 0,
     [theme.breakpoints.up("md")]: {
-      width: theme.spacing(9.25),
+      width: theme.spacing(closedDrawerWidth),
+      minWidth: theme.spacing(closedDrawerWidth),
+      maxWidth: theme.spacing(closedDrawerWidth),
       opacity: 1
     }
   },
@@ -538,11 +545,16 @@ export default function SideNavigator(props: Props) {
       onClose={onClose}
       sx={{ pointerEvents: isMobile&&!open ? "none" : "auto"}}
     >
-      <Toolbar >
+      <Toolbar>
         <Grid container direction="row" justifyContent={"flex-end"}>
           <Grid>
-            <IconButton onClick={onClose} aria-label="onClose side menu">
-              {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
+            <IconButton
+              onClick={open ? onClose : onOpen}
+              aria-label={open ? "Close side menu" : "Open side menu"}
+            >
+              {open
+                ? theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />
+                : theme.direction === "rtl" ? <ChevronLeft /> : <ChevronRight />}
             </IconButton>
           </Grid>
         </Grid>