Add drop down menu to settings button

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
+        // This uses Chakra's built in menu component
-            aria-label="Settings"
+        <Menu.Root>
-            size="sm"
+            <Menu.Trigger asChild>
-            variant="ghost"
+                <Button variant="ghost" size="md">
-            color="gray.600"
+                    <FiSettings />
-            _hover={{
+                </Button>
-                bg: "gray.100",
+            </Menu.Trigger>
-                color: "gray.800",
+            <Portal>
-            }}
+                <Menu.Positioner>
-            {...props}
+                    <Menu.Content>
-        >
+                        <Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
-            <FiSettings />
+                        <Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
-        </IconButton>
+                        <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>
     );
 }