added bins page (mostly stubbed)

src/navigation/Router.tsx

@@ -14,6 +14,7 @@ import GroupsPage from "pages/Groups";
 import GroupPage from "pages/Group";
 import { ErrorBoundary } from "react-error-boundary";
 import DeviceComponent from "pages/DeviceComponent";
+import Bins from "pages/Bins";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 
@@ -37,6 +38,7 @@ export default function Router(props: Props) {
         <Route path="teams/*" element={<TeamsRoute/>} />
         <Route path="devices/*" element={<DevicesRoute/>} />
         <Route path="groups/*" element={<GroupsRoute/>} />
+        <Route path="bins/*" element={<BinsRoute/>} />
       </Routes>
     )
   }
@@ -90,6 +92,37 @@ export default function Router(props: Props) {
     );
   };
 
+  const BinsRoute = () => {
+    return (
+      <div>
+        <Routes>
+          <Route
+            key="Bins page route"
+            path="" // "/settings/basic"
+            element={<Bins key={"Bins page"} />}
+          />
+          {/* <Route
+            path="/:binID" // "/settings/basic"
+            element={<Bin />}
+          />
+          <Route
+            path="/:deviceID/components/:componentID" // "/settings/basic"
+            element={<DeviceComponent />}
+          />
+          <Route
+            path="/:deviceID/history" // "/settings/basic"
+            element={<DeviceHistory />}
+          />
+          <Route
+            path="/:deviceID/*" // "/settings/basic"
+            element={<RelativeRoutes />}
+          /> */}
+        </Routes>
+      </div>
+    );
+  };
+
+
   const GroupsRoute = () => {
     return (
       <div>
@@ -154,9 +187,10 @@ export default function Router(props: Props) {
           <Route path="/callback" element={<Navigate to="/" />} />
           {/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
           {/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
+          <Route path="" element={<Navigate to="/devices" />} />
           
           {/* Page routes */}
-          <Route index element={<Typography>Hello!</Typography>} />
+          {/* <Route index element={<Typography>Hello!</Typography>} /> */}
           <Route path="users" element={<Users/>} />
           <Route path="/logout" element={<Logout />} />
 {/* 

src/navigation/SideNavigator.tsx

@@ -6,6 +6,7 @@ import { useWidth } from "../hooks/useWidth";
 import { makeStyles } from "@mui/styles";
 import BindaptIcon from "../products/Bindapt/BindaptIcon";
 import { Link, useLocation } from "react-router-dom";
+import BinsIcon from "products/Bindapt/BinsIcon";
 
 const drawerWidth = 230;
 
@@ -103,6 +104,20 @@ export default function SideNavigator(props: Props) {
 
     return (
       <List className={classes.list} component="nav">
+        <Tooltip title="Bins" placement="right">
+          <ListItemButton
+            id="tour-dashboard"
+            component={Link}
+            to="/bins"
+            onClick={onClose}
+            classes={getClasses("/bin")}
+            >
+            <ListItemIcon>
+              <BinsIcon />
+            </ListItemIcon>
+            {open && <ListItemText primary="Devices" />}
+          </ListItemButton>
+        </Tooltip>
         <Tooltip title="Devices" placement="right">
           <ListItemButton
             id="tour-dashboard"