side navigator can now actually link to different places, it is now placed inside the Router

src/app/App.css

@@ -1,42 +1,17 @@
-#root {
+/* Brand x theme */
-  max-width: 1280px;
+:root {
-  margin: 0 auto;
+  /* BXT blues */
-  padding: 2rem;
+  --light-blue: #1a86ec;
-  text-align: center;
+  --primary-blue: #005bb0;
-}
+  --dark-blue: #081d55;
+  /* BXT accents */
+  --rubber-duck-yellow: #ffd45c;
 
-.logo {
+  /* status colours */
-  height: 6em;
+  --status-unknown: #0288d1;
-  padding: 1.5em;
+  --status-ok: #4caf50;
-  will-change: filter;
+  --status-unstable: rgb(189, 200, 33);
-  transition: filter 300ms;
+  --status-risk: #ffd642;
-}
+  --status-warning: #ffb74d;
-.logo:hover {
+  --status-alert: #f44336;
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
 }

src/app/AuthHTTPWrapper.tsx

@@ -1,13 +1,14 @@
 import { Auth0Provider } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import AuthWrapper from '../providers/auth'
-import HTTPProvider from '../providers/http'
+import HTTPProvider from 'providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import UserWrapper from './UserWrapper'
 import { Theme, ThemeProvider } from '@mui/material'
 import { CreateTheme } from '../theme/theme'
 import { getThemeType, setThemeType } from '../theme/themeType'
+import { BrowserRouter } from 'react-router-dom'
 
 function AuthHTTPWrapper() {
   const [token, setToken] = useState<string | undefined>(undefined)
@@ -42,9 +43,11 @@ function AuthHTTPWrapper() {
       <ThemeProvider theme={palette}>
         <AuthWrapper setToken={setToken}>
           { token ? 
+            // <BrowserRouter>
               <HTTPProvider token={token}>
                 <UserWrapper toggleTheme={toggleTheme}/>
               </HTTPProvider>
+            // </BrowserRouter>
           :
             <LoadingScreen
               message='Loading user profile'

src/hooks/index.ts

@@ -0,0 +1,32 @@
+// export {
+//   useAuth,
+//   useBackpackAPI,
+//   useBilling,
+//   useComponentAPI,
+//   useComponentsWebsocket,
+//   useComponentWebsocket,
+//   useDeviceAPI,
+//   useDeviceWebsocket,
+//   useFirmwareAPI,
+//   useGitlab,
+//   useGroupAPI,
+//   useHTTP,
+//   useInteractionsAPI,
+//   useMeasurementsWebsocket,
+//   useMetricAPI,
+//   useMineAPI,
+//   usePermissionAPI,
+//   usePreferenceAPI,
+//   useSecurity,
+//   useSnackbar,
+//   useTagAPI,
+//   useUsageAPI,
+//   useUserAPI
+// } from "providers";
+// export * from "./useDebounce";
+// export * from "./useForceUpdate";
+// export * from "./useInterval";
+// export * from "./usePrevious";
+export * from "./useThemeType";
+export * from "./useWidth";
+// export * from "./useViewport";

src/models/index.ts

@@ -0,0 +1,25 @@
+// export * from "./Backpack";
+// export * from "./Bin";
+// export * from "./BinYard";
+// export * from "./Component";
+// export * from "./Device";
+// export * from "./Firmware";
+// export * from "./Group";
+// export * from "./Interaction";
+// export * from "./Scope";
+// export * from "./ShareableLink";
+// export * from "./Site";
+// export * from "./Tag";
+// export * from "./Task";
+// export * from "./Upgrade";
+// export * from "./User";
+export * from "./user";
+// export * from "./Field";
+// export * from "./Team";
+export * from "./team";
+// export * from "./HarvestPlan";
+// export * from "./HarvestYear";
+// export * from "./Note";
+// export * from "./FieldMapping";
+// export * from "./FieldMarker";
+// export * from "./GrainBag";

src/navigation/NavigationContainer.tsx

@@ -1,13 +1,6 @@
 import Header from "../app/Header";
-// import { useMobile } from "hooks";
-// import React, { useState } from "react";
 import React, { PropsWithChildren, useState } from "react";
-// import BottomNavigator from "./BottomNavigator";
-// import Routes from "./Routes";
-import SideNavigator from "./SideNavigator";
 import Router from "./Router";
-// import { Team } from "models";
-// import NotificationBanner from "common/NotificationBanner";
 
 interface Props extends PropsWithChildren {
   toggleTheme: () => void;
@@ -39,8 +32,7 @@ export default function NavigationContainer(props: Props) {
         // teams={teams}
         // setTeams={setTeams}
       />
-      <SideNavigator open={sideNavigatorOpen} onOpen={openSideNavigator} onClose={closeSideMenu} />
+      <Router open={sideNavigatorOpen} onOpen={openSideNavigator} onClose={closeSideMenu} />
-      <Router />
       {/* {isMobile && <BottomNavigator openSide={openSideNavigator} sideIsOpen={sideNavigatorOpen} />} */}
     </React.Fragment>
   );

src/navigation/Router.tsx

@@ -3,11 +3,18 @@ import LoadingScreen from "../app/LoadingScreen";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { Typography } from "@mui/material";
 import { useAuth0 } from "@auth0/auth0-react";
+import Teams from "pages/Teams";
+import SideNavigator from "./SideNavigator";
 
+interface Props {
+  open: boolean,
+  onOpen: () => void;
+  onClose: () => void;
+}
 
+export default function Router(props: Props) {
 
-export default function Router() {
+  const {open, onOpen, onClose} = props;
-
   const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0()
 
   const hello = () => {
@@ -36,6 +43,7 @@ export default function Router() {
   return (
     <Suspense fallback={<LoadingScreen />}>
       <BrowserRouter>
+        <SideNavigator open={open} onOpen={onOpen} onClose={onClose} />
         <Routes>
           
           {/* Redirects */}
@@ -43,6 +51,7 @@ export default function Router() {
           
           {/* Page routes */}
           <Route index element={hello()} />
+          <Route path="/teams" element={<Teams/>} />
           {/* <Route path="blogs" element={<Blogs />} />
           <Route path="contact" element={<Contact />} />
           <Route path="*" element={<NoPage />} /> */}

src/navigation/SideNavigator.tsx

@@ -1,10 +1,11 @@
-import { ChevronRight, Dashboard as DevicesIcon } from "@mui/icons-material";
+import { ChevronRight, People } 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 { darken, Divider, Grid2 as Grid, IconButton, lighten, List, 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";
+import { Link } from "react-router-dom";
 
 const drawerWidth = 230;
 
@@ -75,7 +76,6 @@ interface Props {
 export default function SideNavigator(props: Props) {
   const { open, onOpen, onClose } = props;
   const theme = useTheme();
-  console.log(theme.transitions)
   const width = useWidth();
   const classes = useStyles();
 
@@ -111,15 +111,21 @@ export default function SideNavigator(props: Props) {
             classes={getClasses("/device")}
             >
             <ListItemIcon>
-              {/* {isAdaptive ? ( */}
               <BindaptIcon />
-              {/* ) : isAdCon ? (
+            </ListItemIcon>
-                <NexusSTIcon />
+            {open && <ListItemText primary="Devices" />}
-              ) : isOmniAir ? (
+          </ListItemButton>
-                <OmniAirDeviceIcon />
+        </Tooltip>
-              ) : (
+        <Tooltip title="Teams" placement="right">
-                <DevicesIcon />
+          <ListItemButton
-              )} */}
+            id="tour-dashboard"
+            component={Link}
+            to="/teams"
+            onClick={onClose}
+            classes={getClasses("/device")}
+            >
+            <ListItemIcon>
+              <People />
             </ListItemIcon>
             {open && <ListItemText primary="Devices" />}
           </ListItemButton>

src/pages/PageContainer.tsx

@@ -0,0 +1,61 @@
+import { Container, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import classNames from "classnames";
+import React, { PropsWithChildren } from "react";
+
+const useStyles = makeStyles((theme: Theme) => ({
+  pageContainer: {
+    // border: "1px solid red",
+    width: "100%",
+    overflowX: "hidden",
+    overflowY: "auto",
+    height: `calc(100vh - 112px)`,
+    [theme.breakpoints.up("sm")]: {
+      height: `calc(100vh - 64px)`
+    }
+  },
+  fullViewportContainer: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: theme.palette.background.default,
+    zIndex: 2000,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  centerCenter: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+}))
+
+interface Props extends PropsWithChildren{
+  fullViewport?: boolean;
+  isCenterCenter?: boolean;
+}
+
+export const PageContainer: React.FunctionComponent<Props> = props => {
+  const classes = useStyles();
+  const { children } = props;
+  let fullViewport = false
+  let isCenterCenter = false
+  return (
+    <Container
+      className={classNames(
+        fullViewport ? classes.fullViewportContainer : classes.pageContainer,
+        isCenterCenter && classes.centerCenter
+      )}
+      disableGutters
+      // maxWidth={true}
+      children={<React.Fragment>{children}</React.Fragment>}
+    />
+  );
+};
+
+export default PageContainer;

src/pages/Teams.tsx

@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import { useMobile } from "hooks";
+import PageContainer from "pages/PageContainer";
+// import TeamList from "teams/TeamList";
+
+export default function Teams() {
+  const isMobile = useMobile();
+  return (
+    <PageContainer>
+      <Box paddingY={isMobile ? 0.5 : 1} paddingX={isMobile ? 1 : 2}>
+        {/* <TeamList /> */}
+        Teams!
+      </Box>
+    </PageContainer>
+  );
+}

src/user/UserMenu.tsx

@@ -73,14 +73,6 @@ export default function UserMenu(props: Props) {
       loginWithRedirect()
     }
 
-    useEffect(() => {
-      console.log(theme.palette.mode)
-    }, [theme.palette.mode])
-
-    useEffect(() => {
-      console.log(theme)
-    }, [theme])
-
     const unauthenticatedUserMenu = () => {
       return (
         <React.Fragment>

src/user/UserTeamName.tsx

@@ -1,9 +1,9 @@
-import { Theme, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { getSignatureAccentColour } from "../services/whiteLabel";
 import { Team, User } from "models";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
     profileName: {
         whiteSpace: "nowrap",
         overflow: "hidden",