added header

package-lock.json

@@ -11,7 +11,10 @@
         "@auth0/auth0-react": "^2.2.4",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
-        "@mui/material": "^6.1.5",
+        "@mui/icons-material": "^6.1.6",
+        "@mui/material": "^6.1.6",
+        "@mui/styles": "^6.1.6",
+        "@types/classnames": "^2.3.0",
         "axios": "^1.7.7",
         "moment": "^2.30.1",
         "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",
@@ -1170,26 +1173,52 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.1.5",
+      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
-      "integrity": "sha512-3J96098GrC95XsLw/TpGNMxhUOnoG9NZ/17Pfk1CrJj+4rcuolsF2RdF3XAFTu/3a/A+5ouxlSIykzYz6Ee87g==",
+      "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/material": {
+    "node_modules/@mui/icons-material": {
-      "version": "6.1.5",
+      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.6.tgz",
-      "integrity": "sha512-rhaxC7LnlOG8zIVYv7BycNbWkC5dlm9A/tcDUp0CuwA7Zf9B9JP6M3rr50cNKxI7Z0GIUesAT86ceVm44quwnQ==",
+      "integrity": "sha512-5r9urIL2lxXb/sPN3LFfFYEibsXJUb986HhhIeu1gOcte460pwdSiEhBSxkAuyT8Dj7jvu9MjqSBmSumQELo8A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
+        "@babel/runtime": "^7.26.0"
-        "@mui/core-downloads-tracker": "^6.1.5",
+      },
-        "@mui/system": "^6.1.5",
+      "engines": {
-        "@mui/types": "^7.2.18",
+        "node": ">=14.0.0"
-        "@mui/utils": "^6.1.5",
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^6.1.6",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
+      "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/core-downloads-tracker": "^6.1.6",
+        "@mui/system": "^6.1.6",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -1208,7 +1237,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.1.5",
+        "@mui/material-pigment-css": "^6.1.6",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1229,13 +1258,13 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "6.1.5",
+      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
-      "integrity": "sha512-FJqweqEXk0KdtTho9C2h6JEKXsOT7MAVH2Uj3N5oIqs6YKxnwBn2/zL2QuYYEtj5OJ87rEUnCfFic6ldClvzJw==",
+      "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
+        "@babel/runtime": "^7.26.0",
-        "@mui/utils": "^6.1.5",
+        "@mui/utils": "^6.1.6",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -1256,12 +1285,12 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "6.1.5",
+      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
-      "integrity": "sha512-tiyWzMkHeWlOoE6AqomWvYvdml8Nv5k5T+LDwOiwHEawx8P9Lyja6ZwWPU6xljwPXYYPT2KBp1XvMly7dsK46A==",
+      "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
+        "@babel/runtime": "^7.26.0",
         "@emotion/cache": "^11.13.1",
         "@emotion/serialize": "^1.3.2",
         "@emotion/sheet": "^1.4.0",
@@ -1289,17 +1318,58 @@
         }
       }
     },
-    "node_modules/@mui/system": {
+    "node_modules/@mui/styles": {
-      "version": "6.1.5",
+      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-6.1.6.tgz",
-      "integrity": "sha512-vPM9ocQ8qquRDByTG3XF/wfYTL7IWL/20EiiKqByLDps8wOmbrDG9rVznSE3ZbcjFCFfMRMhtxvN92bwe/63SA==",
+      "integrity": "sha512-2cGEUMi4kYNskrg2Upe0bR3Th2/e4j3Vd6R2lIMksBDivJH9o+nkwLjtf91KUOhKZ4BReCDVDC398dbOs+Ygdw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
+        "@babel/runtime": "^7.26.0",
-        "@mui/private-theming": "^6.1.5",
+        "@emotion/hash": "^0.9.2",
-        "@mui/styled-engine": "^6.1.5",
+        "@mui/private-theming": "^6.1.6",
-        "@mui/types": "^7.2.18",
+        "@mui/types": "^7.2.19",
-        "@mui/utils": "^6.1.5",
+        "@mui/utils": "^6.1.6",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.10.0",
+        "jss-plugin-camel-case": "^10.10.0",
+        "jss-plugin-default-unit": "^10.10.0",
+        "jss-plugin-global": "^10.10.0",
+        "jss-plugin-nested": "^10.10.0",
+        "jss-plugin-props-sort": "^10.10.0",
+        "jss-plugin-rule-value-function": "^10.10.0",
+        "jss-plugin-vendor-prefixer": "^10.10.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
+      "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mui/private-theming": "^6.1.6",
+        "@mui/styled-engine": "^6.1.6",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -1330,9 +1400,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.18",
+      "version": "7.2.19",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
-      "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==",
+      "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1344,13 +1414,13 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "6.1.5",
+      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
-      "integrity": "sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==",
+      "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.25.7",
+        "@babel/runtime": "^7.26.0",
-        "@mui/types": "^7.2.18",
+        "@mui/types": "^7.2.19",
         "@types/prop-types": "^15.7.13",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -1754,6 +1824,15 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/classnames": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.0.tgz",
+      "integrity": "sha512-3GsbOoDYteFShlrBTKzI2Eii4vPg/jAf7LXRIn0WQePKlmhpkV0KoTMuawA7gZJkrbPrZGwv9IEAfIWaOaQK8w==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -2446,6 +2525,12 @@
         "node": ">= 16"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2527,6 +2612,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -3205,6 +3300,12 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3285,6 +3386,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==",
+      "license": "MIT"
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -3373,6 +3480,96 @@
         "node": ">=6"
       }
     },
+    "node_modules/jss": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
+      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/jss"
+      }
+    },
+    "node_modules/jss-plugin-camel-case": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
+      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-default-unit": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz",
+      "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-global": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
+      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-nested": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz",
+      "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "node_modules/jss-plugin-props-sort": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz",
+      "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-rule-value-function": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz",
+      "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "node_modules/jss-plugin-vendor-prefixer": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz",
+      "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.10.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4155,6 +4352,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",

package.json

@@ -20,7 +20,10 @@
     "@auth0/auth0-react": "^2.2.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.5",
+    "@mui/icons-material": "^6.1.6",
+    "@mui/material": "^6.1.6",
+    "@mui/styles": "^6.1.6",
+    "@types/classnames": "^2.3.0",
     "axios": "^1.7.7",
     "moment": "^2.30.1",
     "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging",

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>
+  );
+}