Merge remote-tracking branch 'upstream/master' into feat/protected-routes

Client/src/Components/NavBar/index.jsx

@@ -13,6 +13,11 @@ import Tooltip from "@mui/material/Tooltip";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material/styles";
 import ChevronDown from "../../assets/Images/Icon-chevron-down.png";
+import { clearAuthState } from "../../Features/Auth/authSlice";
+import { clearMonitorState } from "../../Features/Monitors/monitorsSlice";
+
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
 
@@ -30,6 +35,8 @@ const settings = ["Profile", "Team", "Invite Colleagues", "Logout"];
 function NavBar() {
   const theme = useTheme();
   const [anchorElUser, setAnchorElUser] = useState(null);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   /**
    * Handles opening the user menu.
@@ -40,11 +47,38 @@ function NavBar() {
     setAnchorElUser(event.currentTarget);
   };
 
+  /**
+   * Handles logging out the user
+   *
+   */
+  const logout = () => {
+    // Clear auth state
+    dispatch(clearAuthState());
+    dispatch(clearMonitorState());
+    navigate("/");
+  };
+
   /**
    * Handles closing the user menu.
    */
-  const handleCloseUserMenu = () => {
+  const handleCloseUserMenu = (setting) => {
     setAnchorElUser(null);
+    switch (setting) {
+      case "Profile":
+        console.log("Profile");
+        break;
+      case "Team":
+        console.log("Team");
+        break;
+      case "Invite Colleagues":
+        console.log("Invite Colleagues");
+        break;
+      case "Logout":
+        logout();
+        break;
+      default:
+        break;
+    }
   };
 
   return (
@@ -151,7 +185,7 @@ function NavBar() {
                 <MenuItem
                   id="menu-item"
                   key={setting}
-                  onClick={handleCloseUserMenu}
+                  onClick={() => handleCloseUserMenu(setting)}
                 >
                   <Typography
                     fontSize="var(--env-var-font-size-medium)"