added group tabs:

src/navigation/Router.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from "react";
+import { Suspense, useEffect, useState } from "react";
 import LoadingScreen from "../app/LoadingScreen";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { Typography } from "@mui/material";
@@ -13,6 +13,9 @@ import Header from "app/Header";
 import Logout from "pages/Logout";
 import Devices from "pages/Devices";
 import DevicePage from "pages/Device";
+import { Groups } from "@mui/icons-material";
+import GroupsPage from "pages/Groups";
+import { Group } from "models";
 
 interface Props {
   open: boolean,
@@ -21,11 +24,17 @@ interface Props {
   toggleTheme: () => void;
 }
 
+export const appendToUrl = (appendage: number | string) => {
+  const basePath = location.pathname.replace(/\/$/, ""); 
+  return(`${basePath}/${appendage}`);
+};
+
 export default function Router(props: Props) {
 
   const {open, onOpen, onClose, toggleTheme } = props;
   const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
   const isMobile = useMobile();
+  const [groups, setGroups] = useState<Group[]>([]);
 
   const RelativeRoutes = () => {
     console.log("relative route")
@@ -33,6 +42,7 @@ export default function Router(props: Props) {
       <Routes>
         <Route path="teams/*" element={<TeamsRoute/>} />
         <Route path="devices/*" element={<DevicesRoute/>} />
+        <Route path="groups/*" element={<GroupsRoute/>} />
       </Routes>
     )
   }
@@ -59,17 +69,55 @@ export default function Router(props: Props) {
 
   const DevicesRoute = () => {
     console.log("devices route")
+    console.log(window.location.pathname)
     return (
       <div>
         <Routes>
           <Route
+            key="Devices page route"
             path="" // "/settings/basic"
-            element={<Devices />}
+            element={<Devices groups={groups} setGroups={setGroups} key={"Devices page"} />}
           />
           <Route
             path="/:deviceID" // "/settings/basic"
             element={<DevicePage />}
           />
+           <Route
+            path="/:deviceID/*" // "/settings/basic"
+            element={<RelativeRoutes />}
+          />
+        </Routes>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    console.log(groups)
+  }, [groups])
+
+  const GroupsRoute = () => {
+    console.log("groups route")
+    console.log(window.location.pathname)
+    return (
+      <div>
+        <Routes>
+          <Route
+            path="/" 
+            element={<GroupsPage />}
+          />
+          <Route
+            key="Devices page route"
+            path="/:groupID/devices/" 
+            element={<Devices groups={groups} setGroups={setGroups} key={"Devices page"}/>}
+          />
+          <Route
+            path="/:groupID/devices/:deviceID" 
+            element={<DevicePage />}
+          />
+          <Route
+            path="/:groupID/devices/:deviceID/*" 
+            element={<RelativeRoutes />}
+          />
         </Routes>
       </div>
     );