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/app/Header.tsx

@@ -9,6 +9,9 @@ import UserMenu from "../user/UserMenu";
 import { useMobile } from "hooks";
 import HeaderButtons from "./HeaderButtons";
 import { useGlobalState } from "providers";
+import SideNavigator from "navigation/SideNavigator";
+import React, { useState } from "react";
+import BottomNavigator from "navigation/BottomNavigator";
 
 const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
@@ -77,8 +80,6 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 interface Props {
     toggleTheme: () => void;
-    sideIsOpen: boolean;
-    openSide: () => void;
     // teams: Team[];
     // setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
 }
@@ -86,7 +87,7 @@ interface Props {
 export default function Header(props: Props) {
 
     // const { sideIsOpen, openSide, toggleTheme } = props;
-    const { openSide, toggleTheme } = props;
+    const { toggleTheme } = props;
     const themeType = useThemeType();
     const classes = useStyles()
     const isMobile = useMobile();
@@ -94,7 +95,10 @@ export default function Header(props: Props) {
     const [{ user, team }] = useGlobalState();
     const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
 
+    const [navOpen, setNavOpen] = useState(false)
+
     return (
+        <React.Fragment>
         <AppBar position="fixed" className={classes.appBar}>
             <Toolbar disableGutters className={classes.toolbar}>
                 <Box className={classes.buttonContainer}>
@@ -102,7 +106,7 @@ export default function Header(props: Props) {
                         <IconButton
                             color="inherit"
                             aria-label="Open side menu"
-                            onClick={openSide}
+                            onClick={() => {setNavOpen(true)}}
                             style={{ color: getSignatureAccentColour() }}
                             className={classes.button}>
                                 <Menu />
@@ -125,6 +129,10 @@ export default function Header(props: Props) {
                     <HeaderButtons hasTeams={hasTeams} team={team} user={user} />
                 </Box>
             </Toolbar>
+
         </AppBar>
+        <SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
+        {isMobile && <BottomNavigator openSide={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}
+        </React.Fragment>
     )
 }

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>
   )