moved the side and bottom navigator out of the navigation container and into the header to stop the wildcard pages from re-rendering/loading whenever the navigator drawer is opened

src/navigation/NavigationContainer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useState } from "react";
+import React, { PropsWithChildren } from "react";
 import Router from "./Router";
 
 interface Props extends PropsWithChildren {
@@ -10,23 +10,11 @@ interface Props extends PropsWithChildren {
 export default function NavigationContainer(props: Props) {
 //   const { toggleTheme, teams, setTeams } = props;
   const { toggleTheme } = props;
-  const [sideNavigatorOpen, setSideNavigatorOpen] = useState<boolean>(false);
-
-  const openSideNavigator = () => {
-    setSideNavigatorOpen(true);
-  };
-
-  const closeSideMenu = () => {
-    setSideNavigatorOpen(false);
-  };
 
   return (
     <React.Fragment>
       {/* <NotificationBanner /> */}
       <Router 
-        open={sideNavigatorOpen} 
-        onOpen={openSideNavigator} 
-        onClose={closeSideMenu} 
         toggleTheme={toggleTheme}
       />
     </React.Fragment>

src/navigation/Router.tsx

@@ -4,10 +4,7 @@ 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";
 import Users from "pages/Users";
-import { useMobile } from "hooks";
-import BottomNavigator from "./BottomNavigator";
 import TeamPage from "pages/Team";
 import Header from "app/Header";
 import Logout from "pages/Logout";
@@ -17,9 +14,6 @@ import GroupsPage from "pages/Groups";
 import GroupPage from "pages/Group";
 
 interface Props {
-  open: boolean,
-  onOpen: () => void;
-  onClose: () => void;
   toggleTheme: () => void;
 }
 
@@ -30,9 +24,8 @@ export const appendToUrl = (appendage: number | string) => {
 
 export default function Router(props: Props) {
 
-  const {open, onOpen, onClose, toggleTheme } = props;
+  const { toggleTheme } = props;
   const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
-  const isMobile = useMobile();
 
   const RelativeRoutes = () => {
     return (
@@ -127,13 +120,10 @@ export default function Router(props: Props) {
     <Suspense fallback={<LoadingScreen />}>
       <BrowserRouter>
         <Header
-          sideIsOpen={open}
-          openSide={onOpen}
           toggleTheme={toggleTheme}
           // teams={teams}
           // setTeams={setTeams}
         />
-        <SideNavigator open={open} onOpen={onOpen} onClose={onClose} />
         <Routes>
           
           {/* Redirects */}
@@ -148,7 +138,6 @@ export default function Router(props: Props) {
           <Route path="*" element={<RelativeRoutes/>} />
           
         </Routes>
-        {isMobile && <BottomNavigator openSide={onOpen} sideIsOpen={open} />}
       </BrowserRouter>
     </Suspense>
   )