adding side navigator and device icon

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>
+  );
+}