added header

src/app/Header.tsx

@@ -0,0 +1,62 @@
+import { AppBar, Box, IconButton, Theme, Toolbar } from "@mui/material";
+import { Menu } from "@mui/icons-material";
+import classNames from "classnames";
+import { makeStyles } from "@mui/styles";
+import { getSignatureAccentColour } from "../services/whiteLabel";
+
+const useStyles = makeStyles((theme: Theme) => ({
+    appBar: {
+        // zIndex: 10, // TODO: make variables to keep zIndex consistent
+        zIndex: theme.zIndex.drawer + 1
+    },
+    toolbar: {
+        marginLeft: theme.spacing(0.5),
+        [theme.breakpoints.up("md")]: {
+          marginLeft: theme.spacing(1.5)
+        }
+    },
+    buttonContainer: {
+        marginRight: theme.spacing(0.5),
+        [theme.breakpoints.up("md")]: {
+          marginRight: theme.spacing(1.5)
+        }
+    },
+    button: {
+        color: getSignatureAccentColour()
+    },
+    hide: {
+        display: "none"
+    },
+}));
+
+interface Props {
+    // toggleTheme: () => void;
+    sideIsOpen: boolean;
+    openSide: () => void;
+    // teams: Team[];
+    // setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
+  }
+
+export default function Header(props: Props) {
+
+    const { sideIsOpen, openSide} = props;
+    const classes = useStyles() 
+
+    return (
+        <AppBar position="fixed" className={classes.appBar}>
+            <Toolbar disableGutters className={classes.toolbar}>
+                <Box className={classes.buttonContainer}>
+                    {/* {!isMobile && ( */}
+                        <IconButton
+                            color="inherit"
+                            aria-label="Open side menu"
+                            onClick={openSide}
+                            className={classNames(classes.button, sideIsOpen && classes.hide)}>
+                                <Menu />
+                            </IconButton>
+                    {/* )} */}
+                </Box>
+            </Toolbar>
+        </AppBar>
+    )
+}

src/app/UserWrapper.tsx

@@ -7,6 +7,7 @@ import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import LoadingScreen from './LoadingScreen'
 import { pond } from "protobuf-ts/pond";
+import NavigationContainer from '../navigation/NavigationContainer'
 
 
 export default function UserWrapper() {
@@ -42,7 +43,8 @@ export default function UserWrapper() {
   )
 
   return (
-    <><div>
+    <NavigationContainer>
+      <div>
         <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
@@ -61,6 +63,6 @@ export default function UserWrapper() {
         </div><p className="read-the-docs">
             Coming soon
         </p>
-    </>
+    </NavigationContainer>
   )
 }

src/navigation/NavigationContainer.tsx

@@ -0,0 +1,47 @@
+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 { Team } from "models";
+// import NotificationBanner from "common/NotificationBanner";
+
+interface Props extends PropsWithChildren {
+//   toggleTheme: () => void;
+//   teams: Team[];
+//   setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
+}
+
+export default function NavigationContainer(props: Props) {
+//   const { toggleTheme, teams, setTeams } = props;
+    const { children } = props;
+  const [sideNavigatorOpen, setSideNavigatorOpen] = useState<boolean>(false);
+//   const isMobile = useMobile();
+
+  const openSideNavigator = () => {
+    setSideNavigatorOpen(true);
+  };
+
+  const closeSideMenu = () => {
+    setSideNavigatorOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      {/* <NotificationBanner /> */}
+      <Header
+        sideIsOpen={sideNavigatorOpen}
+        openSide={openSideNavigator}
+        // toggleTheme={toggleTheme}
+        // teams={teams}
+        // setTeams={setTeams}
+      />
+      {/* <SideNavigator open={sideNavigatorOpen} onOpen={openSideNavigator} onClose={closeSideMenu} /> */}
+      {/* <Routes /> */}
+      {/* {isMobile && <BottomNavigator openSide={openSideNavigator} sideIsOpen={sideNavigatorOpen} />} */}
+        {children}
+    </React.Fragment>
+  );
+}