adding side navigator and device icon

src/app/Header.tsx

@@ -3,13 +3,13 @@ import { Menu } from "@mui/icons-material";
 import classNames from "classnames";
 import { makeStyles } from "@mui/styles";
 import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
-import { Link } from "react-router-dom";
+// import { Link } from "react-router-dom";
 import { useThemeType } from "../hooks/useThemeType";
 import UserMenu from "../user/UserMenu";
 
 const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
-        zIndex: theme.zIndex.drawer + 1
+        zIndex: theme.zIndex.drawer + 1,
     },
     toolbar: {
         marginLeft: theme.spacing(0.5),
@@ -31,8 +31,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
     logoContainer: {
         display: "flex",
-        alignItems: "flex-end",
-        justifyContent: "flex-start"
+        alignItems: "center",
+        height: "56px",
+        justifyContent: "flex-start",
+        [theme.breakpoints.up("md")]: {
+            height: "64px"
+        }
     },
     logoLink: {
         display: "flex",
@@ -43,7 +47,7 @@ const useStyles = makeStyles((theme: Theme) => ({
           ? ""
           : theme.palette.mode === "light"
           ? "#fff"
-          : "#323232"
+          : "#0000"
     },
     HeaderLogo: {
         objectFit: "cover",
@@ -77,6 +81,7 @@ interface Props {
 export default function Header(props: Props) {
 
     const { sideIsOpen, openSide, toggleTheme } = props;
+    // const { mode, setMode } = useColorScheme();
 
     const themeType = useThemeType();
     const classes = useStyles() 
@@ -86,13 +91,13 @@ export default function Header(props: Props) {
             <Toolbar disableGutters className={classes.toolbar}>
                 <Box className={classes.buttonContainer}>
                     {/* {!isMobile && ( */}
-                        <IconButton
-                            color="inherit"
-                            aria-label="Open side menu"
-                            onClick={openSide}
-                            className={classNames(classes.button, sideIsOpen && classes.hide)}>
-                                <Menu />
-                        </IconButton>
+                    <IconButton
+                        color="inherit"
+                        aria-label="Open side menu"
+                        onClick={openSide}
+                        className={classNames(classes.button, sideIsOpen && classes.hide)}>
+                            <Menu />
+                    </IconButton>
                     {/* )} */}
                 </Box>
                 <Box flexGrow={1} marginLeft={0.5}>

src/navigation/NavigationContainer.tsx

@@ -18,7 +18,6 @@ interface Props extends PropsWithChildren {
 export default function NavigationContainer(props: Props) {
 //   const { toggleTheme, teams, setTeams } = props;
   const { toggleTheme } = props;
-  const { children } = props;
   const [sideNavigatorOpen, setSideNavigatorOpen] = useState<boolean>(false);
 //   const isMobile = useMobile();
 
@@ -43,7 +42,6 @@ export default function NavigationContainer(props: Props) {
       <SideNavigator open={sideNavigatorOpen} onOpen={openSideNavigator} onClose={closeSideMenu} />
       <Router />
       {/* {isMobile && <BottomNavigator openSide={openSideNavigator} sideIsOpen={sideNavigatorOpen} />} */}
-        {children}
     </React.Fragment>
   );
 }

src/navigation/SideNavigator.tsx

@@ -0,0 +1,161 @@
+import { ChevronRight, Dashboard as DevicesIcon } from "@mui/icons-material";
+import ChevronLeft from "@mui/icons-material/ChevronLeft";
+import { darken, Divider, Grid2 as Grid, IconButton, lighten, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, Theme, Toolbar, Tooltip, useTheme } from "@mui/material";
+import classNames from "classnames";
+import { useWidth } from "../hooks/useWidth";
+import { makeStyles } from "@mui/styles";
+import BindaptIcon from "../products/Bindapt/BindaptIcon";
+
+const drawerWidth = 230;
+
+const useStyles = makeStyles((theme: Theme) => ({
+  sideMenu: {
+    position: "fixed",
+    height: "100%",
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    background: theme.palette.background.default
+  },
+  sideMenuOpened: {
+    zIndex: theme.zIndex.drawer + 2,
+    width: drawerWidth,
+    transition: theme.transitions.create(["width"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  sideMenuOnClosed: {
+    transition: theme.transitions.create(["width", "z-index", "opacity"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: "hidden",
+    width: theme.spacing(7),
+    zIndex: theme.zIndex.drawer,
+    opacity: 0,
+    [theme.breakpoints.up("md")]: {
+      width: theme.spacing(9),
+      opacity: 1
+    }
+  },
+  list: {
+    paddingTop: 0
+  },
+  listItem: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up("md")]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3)
+    }
+  },
+  activeItem:
+    theme.palette.mode === "light"
+      ? {
+          background: darken(theme.palette.background.default, 0.25),
+          "&:hover": {
+            background: darken(theme.palette.background.default, 0.25)
+          }
+        }
+      : {
+          background: lighten(theme.palette.background.default, 0.25),
+          "&:hover": {
+            background: lighten(theme.palette.background.default, 0.25)
+          }
+        }
+}))
+
+interface Props {
+  open: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+}
+  
+export default function SideNavigator(props: Props) {
+  const { open, onOpen, onClose } = props;
+  const theme = useTheme();
+  console.log(theme.transitions)
+  const width = useWidth();
+  const classes = useStyles();
+
+  const getClasses = (page: string) => {
+    if (page === "/device") {
+      if (location.pathname.startsWith("/device") ||
+      location.pathname.startsWith("/group")) {
+        return ({
+          root: `${classes.listItem} ${classes.activeItem}`
+        })
+      }
+    }
+    if (location.pathname.startsWith(page)) {
+      return ({
+        root: `${classes.listItem} ${classes.activeItem}`
+      })
+    }
+    return ({
+      root: `${classes.listItem}`
+    })
+  }
+
+  const authenticatedSideMenu = () => {
+
+    return (
+      <List className={classes.list} component="nav">
+        <Tooltip title="Devices" placement="right">
+          <ListItemButton
+            id="tour-dashboard"
+            // component={Link}
+            // to="/devices"
+            onClick={onClose}
+            classes={getClasses("/device")}
+            >
+            <ListItemIcon>
+              {/* {isAdaptive ? ( */}
+                <BindaptIcon />
+              {/* ) : isAdCon ? (
+                <NexusSTIcon />
+              ) : isOmniAir ? (
+                <OmniAirDeviceIcon />
+              ) : (
+                <DevicesIcon />
+              )} */}
+            </ListItemIcon>
+            {open && <ListItemText primary="Devices" />}
+          </ListItemButton>
+        </Tooltip>
+      </List>
+    )
+  }
+
+  return (
+    <SwipeableDrawer
+      variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
+      classes={{
+        paper: classNames(
+          classes.sideMenu,
+          open ? classes.sideMenuOpened : classes.sideMenuOnClosed
+        )
+      }}
+      anchor="left"
+      open={open}
+      onOpen={onOpen}
+      onClose={onClose}
+      // disableBackdropTransition={!iOS}
+      // disableDiscovery={iOS}>
+      >
+      <Toolbar >
+        <Grid container direction="row" justifyContent={"flex-end"}>
+          <Grid>
+            <IconButton onClick={onClose} aria-label="onClose side menu">
+              {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
+            </IconButton>
+          </Grid>
+        </Grid>
+      </Toolbar>
+      <Divider />
+      {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */}
+     {authenticatedSideMenu()}
+    </SwipeableDrawer>
+  );
+}

src/products/Bindapt/BindaptIcon.tsx

@@ -0,0 +1,29 @@
+import BindaptDarkIcon from "../../assets/products/bindapt/bindaptPlusDark.png";
+import BindaptLightIcon from "../../assets/products/bindapt/bindaptPlusLight.png";
+import { ImgIcon } from "../../common/ImgIcon";
+import React from "react";
+import { useThemeType } from "../../hooks/useThemeType";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function BindaptIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? BindaptLightIcon : BindaptDarkIcon;
+    }
+
+    return themeType === "light" ? BindaptDarkIcon : BindaptLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="bins" src={src()} />;
+  }
+
+  return <ImgIcon alt="bins" src={src()} />;
+}

src/theme/theme.ts

@@ -13,12 +13,12 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
 
 function generateBackgroundShades(baseColor: string, themeType: "light" | "dark") {
   if(themeType==="light") return ({
-    default: lighten(baseColor, 0.90),
+    default: lighten(baseColor, 0.75),
     paper: lighten(baseColor, 0.75)
   })
 
   return {
-    default: darken(baseColor, 0.35),  // Lightens the base color for background.default
+    default: darken(baseColor, 0.50),  // Lightens the base color for background.default
     paper: darken(baseColor, 0.50),    // Slightly less light for background.paper
   };
 }
@@ -31,7 +31,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
     palette: {
       primary: Colours[getPrimaryColour() as keyof typeof Colours],
       secondary: Colours[getSecondaryColour() as keyof typeof Colours],
-      background: generateBackgroundShades(Colours.grey[900], themeType),
+      background: generateBackgroundShades(Colours.grey[800], themeType),
       mode: themeType,
       bxt: {
         primaryBlue: "#005bb0",