added state containers, user model, and the button for user menu

src/app/Header.tsx

@@ -5,6 +5,7 @@ import { makeStyles } from "@mui/styles";
 import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogoBG, hideLogo } from "../services/whiteLabel";
 import { Link } from "react-router-dom";
 import { useThemeType } from "../hooks/useThemeType";
+import UserMenu from "../user/UserMenu";
 
 const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
@@ -53,10 +54,20 @@ const useStyles = makeStyles((theme: Theme) => ({
           height: "64px"
         }
     },
+    appBarRight: {
+        display: "flex",
+        flexDirection: "row",
+        marginLeft: theme.spacing(2),
+        marginRight: theme.spacing(1),
+        [theme.breakpoints.up("md")]: {
+            marginLeft: theme.spacing(3),
+            marginRight: theme.spacing(2)
+        }
+    },
 }));
 
 interface Props {
-    // toggleTheme: () => void;
+    toggleTheme: () => void;
     sideIsOpen: boolean;
     openSide: () => void;
     // teams: Team[];
@@ -65,7 +76,7 @@ interface Props {
 
 export default function Header(props: Props) {
 
-    const { sideIsOpen, openSide} = props;
+    const { sideIsOpen, openSide, toggleTheme } = props;
 
     const themeType = useThemeType();
     const classes = useStyles() 
@@ -95,6 +106,9 @@ export default function Header(props: Props) {
                         </div>
                     )}
                 </Box>
+                <Box className={classes.appBarRight}>
+                    <UserMenu toggleTheme={toggleTheme} />
+                </Box>
             </Toolbar>
         </AppBar>
     )