Merge branch 'main' into 'feature/dashboard/dark-mode'

# Conflicts:
#   client/src/App.jsx
#   client/src/components/header.jsx
#   client/src/components/sidebar.jsx

client/src/components/header.jsx

@@ -1,22 +1,35 @@
-
-import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
+import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
   const styles = recipe();
+
   return (
     <chakra.div css={styles}>
       <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
-      <Button variant="plain">
-        <Stack gap="0">
-          <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
-          <Text color="fg.muted" textStyle="sm">{user.email}</Text>
-        </Stack>
+      <Stack gap="0">
+        <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
+        <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+      </Stack>
+      {/* Add a drop down menu to the avatar */}
+      <Menu.Root>
+        <Menu.Trigger rounded="full" focusRing="outside">
         <Avatar.Root>
           <Avatar.Fallback name={user.name} />
           <Avatar.Image src={user.avatar} />
         </Avatar.Root>
-      </Button>
+        </Menu.Trigger>
+        <Portal>
+          <Menu.Positioner zIndex="popover">
+            <Menu.Content>
+              <Menu.Item value="account">Account</Menu.Item>
+              <Menu.Item value="settings">Settings</Menu.Item>
+              <Menu.Item value="logout">Logout</Menu.Item>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Portal>
+      </Menu.Root>
+      {/* End drop down menu */}
     </chakra.div>
   );
 }