Merge branch 'feature/settings-menu' into 'main'

Feature/settings menu

See merge request vkuchenik/website-framework!7

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/CanvasHeaderNav.jsx

@@ -10,7 +10,7 @@ const navItems = [
 
 export function CanvasHeaderNav() {
     return (
-        <HStack as="nav" spacing={6}>
+        <HStack as="nav" gap="8">
             {navItems.map(({ label, href }) => (
                 <Link key={href} href={href} fontWeight="medium">
                     {label}

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>
     );
 }
 

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>
+          {/* End drop down menu */}
         </HStack>
       </Button>
     </Box>

client/src/components/sidebar.jsx

@@ -74,7 +74,19 @@ export default function Sidebar () {
             gap={4} paddingTop={4}
             paddingLeft={14} paddingRight={3}
         >
-          <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+          {/* <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> */}
+          {/* <RxHamburgerMenu color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></RxHamburgerMenu> */}
+          <Button 
+            aria-lable="Toggle Sidebar"
+            color="secondary"  
+            _hover={{bg: "#EDF1F1"}} 
+            size="md" variant="ghost" 
+            // left="-10"
+            ml="auto" // Margin-left: auto, pushes hamburger menu to right side 
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <RxHamburgerMenu />
+          </Button>
           <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
             <PushPin fill="white" /> Dashboard
           </Button>
@@ -104,7 +116,7 @@ export default function Sidebar () {
               alignItems="start" 
               gap={4} padding={4}
         >
-          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
+          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="md" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
             <RxHamburgerMenu />
           </IconButton>
           <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>