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

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 />} /> */}