Add drop-down menu to Avatar

client/src/components/CanvasHeader.jsx

@@ -10,7 +10,7 @@ export default function CanvasHeader() {
                 as="header"
                 position="sticky"
                 top="0"
-                zIndex="banner"
+                // zIndex="banner"
                 bg="white"
                 borderBottom="1px solid"
                 borderColor="gray.200"

client/src/components/header.jsx

@@ -1,5 +1,5 @@
 
-import { Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
+import { Box, Button, Avatar, HStack, Stack, Text, Menu, Portal } from "@chakra-ui/react"
 
 export default function Header() {
   return (
@@ -20,10 +20,25 @@ export default function Header() {
             <Text color="#19332D" fontWeight="bold" textStyle="lg">{user.name}</Text>
             <Text color="fg.muted" textStyle="sm">{user.email}</Text>
           </Stack>
-          <Avatar.Root>
+          {/* Add a drop down menu to the avatar */}
-            <Avatar.Fallback name={user.name} />
+          <Menu.Root>
-            <Avatar.Image src={user.avatar} />
+            <Menu.Trigger rounded="full" focusRing="outside">
-          </Avatar.Root>
+            <Avatar.Root>
+              <Avatar.Fallback name={user.name} />
+              <Avatar.Image src={user.avatar} />
+            </Avatar.Root>
+            </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>
+        
         </HStack>
       </Button>
     </Box>