adding side navigator and device icon

package-lock.json

@@ -21,7 +21,8 @@
         "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.27.0"
+        "react-image": "^4.1.0",
+        "react-router-dom": "^6.28.0"
       },
       "devDependencies": {
         "@babel/types": "^7.25.8",
@@ -1176,9 +1177,9 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.6",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz",
-      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
+      "integrity": "sha512-POuIBi80BZBogQkG4PQKIGwy4QFwB+kOr+OI4k7Znh7LqMAIhwB9OC00l6M+w1GrZJYj3T8R5WX8G6QAIvoVEw==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -1212,16 +1213,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.1.6",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.7.tgz",
-      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "integrity": "sha512-KsjujQL/A2hLd1PV3QboF+W6SSL5QqH6ZlSuQoeYz9r69+TnyBFIevbYLxdjJcJmGBjigL5pfpn7hTGop+vhSg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/core-downloads-tracker": "^6.1.6",
+        "@mui/core-downloads-tracker": "^6.1.7",
-        "@mui/system": "^6.1.6",
+        "@mui/system": "^6.1.7",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.7",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -1240,7 +1241,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.6",
+        "@mui/material-pigment-css": "^6.1.7",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1261,13 +1262,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.6",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.7.tgz",
-      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
+      "integrity": "sha512-uLbfUSsug5K0LVkv0PI6Flste3le8+6WSL2omdTiYde93P89Qr7pKr8TA6d2yXfr+Bm+SvD8/fGnkaRwFkryuQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.7",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1288,9 +1289,9 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.6",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.7.tgz",
-      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
+      "integrity": "sha512-Ou4CxN7MQmwrfG1Pu6EYjPgPChQXxPDJrwgizLXlRPOad5qAq4gYXRuzrGQ2DfGjjwmJhjI8T6A0SeapAZPGig==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
@@ -1363,16 +1364,16 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.1.6",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.7.tgz",
-      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "integrity": "sha512-qbMGgcC/FodpuRSfjXlEDdbNQaW++eATh0vNBcPUv2/YXSpReoOpoT9FhogxEBNks+aQViDXBRZKh6HX2fVmwg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.1.6",
+        "@mui/private-theming": "^6.1.7",
-        "@mui/styled-engine": "^6.1.6",
+        "@mui/styled-engine": "^6.1.7",
         "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.6",
+        "@mui/utils": "^6.1.7",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -1417,9 +1418,9 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.6",
+      "version": "6.1.7",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.7.tgz",
-      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
+      "integrity": "sha512-Gr7cRZxBoZ0BIa3Xqf/2YaUrBLyNPJvXPQH3OsD9WMZukI/TutibbQBVqLYpgqJn8pKSjbD50Yq2auG0wI1xOw==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
@@ -1559,9 +1560,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@remix-run/router": {
-      "version": "1.20.0",
+      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
-      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -4110,6 +4111,17 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-image": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz",
+      "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@babel/runtime": ">=7",
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -4127,12 +4139,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.27.0",
+      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
-      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.20.0"
+        "@remix-run/router": "1.21.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -4142,13 +4154,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.27.0",
+      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
-      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.20.0",
+        "@remix-run/router": "1.21.0",
-        "react-router": "6.27.0"
+        "react-router": "6.28.0"
       },
       "engines": {
         "node": ">=14.0.0"

package.json

@@ -30,7 +30,8 @@
     "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.27.0"
+    "react-image": "^4.1.0",
+    "react-router-dom": "^6.28.0"
   },
   "devDependencies": {
     "@babel/types": "^7.25.8",

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",
+        alignItems: "center",
-        justifyContent: "flex-start"
+        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() 

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",