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

---
 client/src/components/SettingsButton.jsx | 57 ++++++++++++++++++------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/client/src/components/SettingsButton.jsx b/client/src/components/SettingsButton.jsx
index 5ce122d..332c84f 100644
--- a/client/src/components/SettingsButton.jsx
+++ b/client/src/components/SettingsButton.jsx
@@ -1,21 +1,50 @@
-import { IconButton, Box } from "@chakra-ui/react";
+// This component displays a drop down menu when clicked, with custom functionality
+// for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will 
+// control settings related to the Widgets on the main canvas. 
+
+import { Button, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
 export function SettingsButton(props) {
+    const handleAddWidget = () => {
+        console.log("Add Widget clicked");
+        // TODO: Implement widget-adding logic
+    }
+
+    const handleEditWidgdets = () => {
+        console.log("Edit Widgets clicked")
+        // TODO: Implement widget-editing logic
+    }
+
+    const handleDeleteWidgets = () => {
+        console.log("Delete Widgets clicked");
+        // TODO: Implement widget-deletion logic
+    }
+    
     return (
-        <IconButton
-            aria-label="Settings"
-            size="sm"
-            variant="ghost"
-            color="gray.600"
-            _hover={{
-                bg: "gray.100",
-                color: "gray.800",
-            }}
-            {...props}
-        >
-            <FiSettings />
-        </IconButton>
+        // This uses Chakra's built in menu component
+        <Menu.Root>
+            <Menu.Trigger asChild>
+                <Button variant="ghost" size="md">
+                    <FiSettings />
+                </Button>
+            </Menu.Trigger>
+            <Portal>
+                <Menu.Positioner>
+                    <Menu.Content>
+                        <Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
+                        <Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
+                        <Menu.Item 
+                            onClick={handleDeleteWidgets}
+                            color="fg.error"
+                            _hover={{ bg: "bg.error", color: "fg.error "}}
+                        >
+                            Delete Widgets
+                        </Menu.Item>
+                    </Menu.Content>
+                </Menu.Positioner>
+            </Portal>
+        </Menu.Root>
     );
 }