From bc83710acc47a231ea71d7aee118046fd2003111 Mon Sep 17 00:00:00 2001
From: "Daniel S. Hansen" <dshansen@contractor.usgs.gov>
Date: Mon, 14 Jul 2025 12:23:26 -0700
Subject: [PATCH] Add drop-down menu to Avatar

---
 client/src/components/CanvasHeader.jsx |  2 +-
 client/src/components/header.jsx       | 25 ++++++++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/client/src/components/CanvasHeader.jsx b/client/src/components/CanvasHeader.jsx
index dbbb111..fd0a10b 100644
--- a/client/src/components/CanvasHeader.jsx
+++ b/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"
diff --git a/client/src/components/header.jsx b/client/src/components/header.jsx
index 72d8271..da9402c 100644
--- a/client/src/components/header.jsx
+++ b/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>
-            <Avatar.Fallback name={user.name} />
-            <Avatar.Image src={user.avatar} />
-          </Avatar.Root>
+          {/* 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>
+            </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>