Merge branch 'main' into 'feature/dashboard/dark-mode'

# Conflicts:
#   client/src/App.jsx
#   client/src/components/header.jsx
#   client/src/components/sidebar.jsx

README.md

@@ -1,20 +0,0 @@
-# website-framework
-
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin https://code.usgs.gov/vkuchenik/website-framework.git
-git branch -M main
-git push -uf origin main
-```
-
-## Name
-Basic Webapp Framework
-
-## Description
-Building a foundational webapp framework that can be repurposed.

client/package-lock.json

@@ -4286,6 +4286,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
       "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }

client/src/App.jsx

@@ -3,11 +3,13 @@ import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
 import Widget from './components/Widget.jsx'
 import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
+import CanvasHeader from './components/CanvasHeader.jsx'
 
 
 function App() {
   const recipe = useRecipe({ key: "canvas" });
   const styles = recipe();
+
   return (
     <Grid css={styles}
       templateRows="1fr 11fr"
@@ -23,12 +25,17 @@ function App() {
       </GridItem>
       <GridItem colSpan={1}>
         <Grid
-          templateRows="repeat(6 1fr)"
+          templateRows="repeat(12, 1fr)"
-          templateColumns="repeat(4 1fr)"
+          templateColumns="repeat(4, 1fr)"
           height="100%"
           width="100%"
-          >
+        >
-          <Widget />
+          <GridItem colSpan={4} rowSpan={1}>
+            <CanvasHeader />
+          </GridItem> 
+          <GridItem colSpan={4} rowSpan={5}>
+            <Widget />
+          </GridItem>
         </Grid>
       </GridItem>
     </Grid>
@@ -36,3 +43,5 @@ function App() {
 }
 
 export default App
+
+

client/src/components/CanvasHeader.jsx

@@ -0,0 +1,30 @@
+import { Flex, HStack } from "@chakra-ui/react";
+import { CanvasHeaderNav } from "./CanvasHeaderNav";
+import { SearchBar } from "./SearchBar";
+import { SettingsButton } from "./SettingsButton";
+
+export default function CanvasHeader() {
+    return (
+        <>
+            <Flex
+                as="header"
+                position="sticky"
+                top="0"
+                // zIndex="banner"
+                bg="white"
+                borderBottom="1px solid"
+                borderColor="gray.200"
+                px={6}
+                py={3}
+                align="center"
+                justify="space-between"
+            >
+                <CanvasHeaderNav />
+                <HStack spacing={3}>
+                    <SearchBar />
+                    <SettingsButton />
+                </HStack>
+            </Flex>
+        </>
+    );
+}

client/src/components/CanvasHeaderNav.jsx

@@ -0,0 +1,22 @@
+import { HStack, Link } from "@chakra-ui/react"
+
+const navItems = [
+    { label: "My Dashboard", href: "#dashboard" },
+    { label: "Gas", href: "#gas" },
+    { label: "Seismic", href: "#seismic" },
+    { label: "Remote Sensing", href: "#remote" },
+    { label: "Daily Activity", href: "#daily" },
+];
+
+export function CanvasHeaderNav() {
+    return (
+        <HStack as="nav" gap="8">
+            {navItems.map(({ label, href }) => (
+                <Link key={href} href={href} fontWeight="medium">
+                    {label}
+                </Link> 
+            ))}
+        </HStack>
+    );
+}
+

client/src/components/SearchBar.jsx

@@ -0,0 +1,10 @@
+import { Input, InputGroup } from "@chakra-ui/react";
+import { FiSearch } from "react-icons/fi"
+
+export function SearchBar({ placeholder="Search...", size="sm", width="200px"}) {
+    return (
+        <InputGroup startElement={<FiSearch />}>
+            <Input placeholder="Enter volcano to search" />
+        </InputGroup>
+    );
+}

client/src/components/SettingsButton.jsx

@@ -0,0 +1,54 @@
+// 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, IconButton, 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 (
+        // This uses Chakra's built in menu component
+        <Menu.Root>
+            <Menu.Trigger asChild>
+                <IconButton variant="ghost" size="md">
+                    <FiSettings />
+                </IconButton>
+            </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/Widget.jsx

@@ -1,8 +1,13 @@
+// This component defines a generic Widget that can be dynamically resized and 
+// dragged inside the canvas
+// Content not included, must be populated using custom charts plots and notifications
+
 import { useState } from 'react';
 import GridLayout from 'react-grid-layout';
 
 export default function Widget() {
-    // Define widgets initial position and size 
+    // Define widgets initial position and size
+    // TODO Add dynamic adding/deleting of widgets via options button 
     const [layout, setLayout] = useState([
         { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
         { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },

client/src/components/header.jsx

@@ -1,22 +1,35 @@
-
+import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
-import { chakra, useRecipe, Box, Button, Avatar, HStack, Stack, Text } from "@chakra-ui/react"
 
 export default function Header() {
   const recipe = useRecipe({ key: "header" });
   const styles = recipe();
+
   return (
     <chakra.div css={styles}>
       <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
-      <Button variant="plain">
+      <Stack gap="0">
-        <Stack gap="0">
+        <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
-          <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>
+        <Text color="fg.muted" textStyle="sm">{user.email}</Text>
-          <Text color="fg.muted" textStyle="sm">{user.email}</Text>
+      </Stack>
-        </Stack>
+      {/* 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>
-      </Button>
+        </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 */}
     </chakra.div>
   );
 }

client/src/components/sidebar.jsx

@@ -1,5 +1,5 @@
-import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
+import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
-import { useColorModeValue, ColorModeButton } from "@/components/ui/color-mode";
+import { ColorModeButton } from "@/components/ui/color-mode";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
 import { useState } from "react";
@@ -57,57 +57,278 @@ export const Users = createIcon({
   ),
 });
 
-export default function Sidebar () {
+export default function Sidebar() {
-  const variant = useColorModeValue("ghost", "solid")
   const [isOpen, setIsOpen] = useState(true);
+  const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
+  
   const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
+  const toggleSidebar = () => {
+    if (isOpen) {
+      setHasFinishedClosing(false);
+      setTimeout(() => setIsOpen(false), 10); // Kick off transition
+      setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration
+    } else {
+      setIsOpen(true);
+      setHasFinishedClosing(true);
+    }
+  };
+
   return (
-    <chakra.div css={styles.root}>
+    <Box
-      {isOpen ? (
+      css={styles.root}
-        <>
+      w={isOpen ? "220px" : "86px"}
-          <CloseButton color="secondary" size="sm" _hover={{bg: "#EDF1F1"}} variant="ghost" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+      transition="width 0.4s ease"
-          <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
+    >
-            <PushPin fill="iconFill" /> Dashboard
+      <IconButton
-          </Button>
+        aria-label="Toggle Sidebar"
-          <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
+        variant="ghost"
-            <Globe fill="iconFill" stroke="black" /> Global Map
+        size="md"
-          </Button>
+        onClick={toggleSidebar}
-          <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
+      >
-            <MapMarker fill="iconFill" stroke="black"/> Regional Map
+        <RxHamburgerMenu />
-          </Button>
+      </IconButton>
-          <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
+      
-            <FaVolcano color="color"/> Volcano
+      {/* Dashboard */}
-          </Button>
+      <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
-          <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
+        {isOpen ? (
-            <Users fill="iconFill" stroke="black"/> Admin
+          <>
-          </Button>
+            <PushPin fill="white" />
-        </>
+
-      ) : (
+            {/* Make text appear gradually instead of popping in */}
-        <>
+            <span
-          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
+              style={{
-            <RxHamburgerMenu />
+                marginLeft: "8px",
-          </IconButton>
+                opacity: isOpen ? 1 : 0,
-          <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
-            <PushPin fill="white"/>
+                overflow: "hidden",
-          </IconButton>
+                whiteSpace: "nowrap",
-          <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
+                display: "inline-block",
+                transitionProperty: "opacity, max-width",
+                transitionDuration: "0.3s",
+                transitionTimingFunction: "ease",
+                transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
+              }}
+            >
+              Dashboard
+            </span>
+          </>
+        ) : (
+          <PushPin fill="white" />
+        )}
+      </Button>
+
+      {/* Global Map */}
+      <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
+        {isOpen ? (
+          <>            
             <Globe fill="white" stroke="black" />
-          </IconButton>
+            
-          <IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
+            {/* Make text appear gradually instead of popping in */}
-            <MapMarker fill="white" stroke="black" />
+            <span
-          </IconButton>
+              style={{
-          <IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
+                marginLeft: "8px",
+                opacity: isOpen ? 1 : 0,
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                display: "inline-block",
+                transitionProperty: "opacity, max-width",
+                transitionDuration: "0.3s",
+                transitionTimingFunction: "ease",
+                transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
+              }}
+            >
+              Global Map
+            </span>
+          </>
+        ) : (
+          <Globe fill="white" stroke="black" />
+        )}
+      </Button>
+
+      {/* Regional Map */}
+      <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
+        {isOpen ? (
+          <>
+            <MapMarker fill="white" stroke="black"/>
+            {/* Make text appear gradually instead of popping in */}
+            <span
+              style={{
+                marginLeft: "8px",
+                opacity: isOpen ? 1 : 0,
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                display: "inline-block",
+                transitionProperty: "opacity, max-width",
+                transitionDuration: "0.3s",
+                transitionTimingFunction: "ease",
+                transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
+              }}
+            >
+              Regional Map
+            </span>
+          </>
+        ) : (
+          <MapMarker fill="white" stroke="black" />
+        )}
+      </Button>
+
+      {/* Volcano */}
+      <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
+        {isOpen ? (
+          <>
+            {/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
             <FaVolcano />
-          </IconButton>
+            {/* Make text appear gradually instead of popping in */}
-          <IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+            <span
+              style={{
+                marginLeft: "8px",
+                opacity: isOpen ? 1 : 0,
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                display: "inline-block",
+                transitionProperty: "opacity, max-width",
+                transitionDuration: "0.3s",
+                transitionTimingFunction: "ease",
+                transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
+              }}
+            >
+              Volcano
+            </span>
+          </>
+        ) : (
+          <FaVolcano />
+        )}
+      </Button>
+
+      {/* Admin */}
+      <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
+        {isOpen ? (
+          <>
+            {/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */}
             <Users fill="white" stroke="black" />
-          </IconButton>
+
-        </>
+            {/* Make text appear gradually instead of popping in */}
-      )}
+            <span
+              style={{
+                marginLeft: "8px",
+                opacity: isOpen ? 1 : 0,
+                maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                display: "inline-block",
+                transitionProperty: "opacity, max-width",
+                transitionDuration: "0.3s",
+                transitionTimingFunction: "ease",
+                transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
+              }}
+            >
+              Admin
+            </span>
+          </>
+        ) : (
+          <Users fill="white" stroke="black" />
+        )}
+      </Button>
       <ColorModeButton position="absolute" bottom="2"/>
-    </chakra.div>
+    </Box>
   );
 }
+
+// THIS CODE WORKS, SAVE IN CASE OF EMERGENCY
+// Needed to refactor in order allow transitions to work properly
+
+// export default function Sidebar () {
+//   const [isOpen, setIsOpen] = useState(true);
+//   const [activeButton, setActiveButton] = useState("Dashboard")
+
+//   return (
+//     <>
+//       {isOpen && (
+//         <Box  w="100%" h="100%" 
+//             borderRight="1px" 
+//             borderColor="black" 
+//             borderStyle="solid" 
+//             display="flex" 
+//             flexDirection="column" 
+//             justifyContent="start" 
+//             alignItems="start" 
+//             gap={4} paddingTop={4}
+//             paddingLeft={14} paddingRight={3}
+//         >
+//           {/* <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>
+//           <Button color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
+//             <Globe fill="white" stroke="black" /> Global Map
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
+//             <MapMarker fill="white" stroke="black"/> Regional Map
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
+//             <FaVolcano /> Volcano
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+//             <Users fill="white" stroke="black" /> Admin
+//           </Button>
+//         </Box>
+//       )}
+
+//       {!isOpen && (
+//         <Box  w="100%" h="100%" 
+//               borderRight="1px" 
+//               borderColor="black" 
+//               borderStyle="solid" 
+//               display="flex" 
+//               flexDirection="column" 
+//               justifyContent="start" 
+//               alignItems="start" 
+//               gap={4} padding={4}
+//         >
+//           <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"}>
+//             <PushPin fill="white"/>
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
+//             <Globe fill="white" stroke="black" />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
+//             <MapMarker fill="white" stroke="black" />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
+//             <FaVolcano />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+//             <Users fill="white" stroke="black" />
+//           </IconButton>
+//         </Box>
+//       )}
+      
+//     </>
+//   );
+// }