added logout button

src/navigation/NavigationContainer.tsx

@@ -1,4 +1,3 @@
-import Header from "../app/Header";
 import React, { PropsWithChildren, useState } from "react";
 import Router from "./Router";
 
@@ -24,17 +23,11 @@ export default function NavigationContainer(props: Props) {
   return (
     <React.Fragment>
       {/* <NotificationBanner /> */}
-      <Header
-        sideIsOpen={sideNavigatorOpen}
-        openSide={openSideNavigator}
-        toggleTheme={toggleTheme}
-        // teams={teams}
-        // setTeams={setTeams}
-      />
       <Router 
         open={sideNavigatorOpen} 
         onOpen={openSideNavigator} 
         onClose={closeSideMenu} 
+        toggleTheme={toggleTheme}
       />
     </React.Fragment>
   );

src/navigation/Router.tsx

@@ -9,16 +9,19 @@ 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";
 
 interface Props {
   open: boolean,
   onOpen: () => void;
   onClose: () => void;
+  toggleTheme: () => void;
 }
 
 export default function Router(props: Props) {
 
-  const {open, onOpen, onClose} = props;
+  const {open, onOpen, onClose, toggleTheme } = props;
   const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0()
   const isMobile = useMobile()
 
@@ -48,6 +51,13 @@ export default function Router(props: Props) {
   return (
     <Suspense fallback={<LoadingScreen />}>
       <BrowserRouter>
+        <Header
+          sideIsOpen={open}
+          openSide={onOpen}
+          toggleTheme={toggleTheme}
+          // teams={teams}
+          // setTeams={setTeams}
+        />
         <SideNavigator open={open} onOpen={onOpen} onClose={onClose} />
         <Routes>
           
@@ -67,6 +77,7 @@ export default function Router(props: Props) {
           {/* <Route path="blogs" element={<Blogs />} />
           <Route path="contact" element={<Contact />} />
           <Route path="*" element={<NoPage />} /> */}
+          <Route path="/logout" element={<Logout />} />
         </Routes>
         {isMobile && <BottomNavigator openSide={onOpen} sideIsOpen={open} />}
       </BrowserRouter>

src/user/UserMenu.tsx

@@ -2,7 +2,7 @@ import { Avatar, Box, Button, IconButton, ListItemIcon, ListItemText, Menu, Menu
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
-import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon } from "@mui/icons-material";
+import { LockOpen, Person, Lock, Settings, SupervisedUserCircle as TeamIcon, ExitToApp } from "@mui/icons-material";
 import { useState } from "react";
 import UserTeamName from "./UserTeamName";
 import React from "react";
@@ -11,6 +11,7 @@ import { useAuth0 } from "@auth0/auth0-react";
 import UserSettings from "./UserSettings";
 import UserAvatar from "./UserAvatar";
 import { purple } from "@mui/material/colors";
+import { useNavigate } from "react-router-dom";
 
 const useStyles = makeStyles((theme: Theme) => ({
   userAvatar: {
@@ -89,6 +90,8 @@ export default function UserMenu(props: Props) {
   // const allowedToCopyToken = user.allowedTo("copy-token");
   const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
 
+  const navigate = useNavigate()
+
   const lockHover = () => {
     setLockIsHovered(true);
   };
@@ -121,6 +124,11 @@ export default function UserMenu(props: Props) {
     setUserSettingsIsOpen(false)
   }
 
+  const handleLogout = () => {
+    closeUserMenu();
+    navigate("/logout");
+  };
+
   const unauthenticatedUserMenu = () => {
     return (
       <React.Fragment>
@@ -203,6 +211,12 @@ export default function UserMenu(props: Props) {
           </ListItemIcon>
           <ListItemText primary="User Settings" />
         </MenuItem>
+        <MenuItem onClick={handleLogout} aria-label="Sign Out" dense>
+          <ListItemIcon>
+            <ExitToApp className={classes.red} />
+          </ListItemIcon>
+          <ListItemText primary="Sign Out" />
+        </MenuItem>
       </Menu>
       <UserSettings isOpen={userSettingsIsOpen} closeDialogCallback={closeUserSettingsDialog} />
     </>