From bfacfd302c11b4949aa5e516e54241872d323fd2 Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Wed, 9 Jul 2025 10:25:54 -0700
Subject: [PATCH] sidebar collapsible feature

The sidebar can now be collapsed to just its icons
---
 client/src/App.jsx                |  2 +-
 client/src/components/sidebar.jsx | 65 +++++++++++++++++++++++--------
 2 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 4ba2739..28aa3a4 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -8,7 +8,7 @@ function App() {
   return (
     <Grid
       templateRows="0.75fr 11.25fr"
-      templateColumns="1fr 11fr"
+      templateColumns="0.25fr 11.75fr"
       height="100vh"
       width="100vw"
     >
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index a4c3487..afd81fc 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -2,6 +2,8 @@ import { Box, Button } from "@chakra-ui/react";
 import { FaVolcano } from "react-icons/fa6";
 import { createIcon } from "@chakra-ui/react";
 import { CloseButton } from "@chakra-ui/react";
+import { IconButton } from "@chakra-ui/react";
+import { RxHamburgerMenu } from "react-icons/rx";
 import { useState } from "react"
 
 // ICONS
@@ -58,23 +60,52 @@ export const Users = createIcon({
 });
 
 export default function Sidebar () {
+  const [isOpen, setIsOpen] = useState(true);
+
   return (
-    <Box  w="100%" h="100%" 
-          borderRight="1px" 
-          borderColor="black" 
-          borderStyle="solid" 
-          display="flex" 
-          flexDirection="column" 
-          justifyContent="start" 
-          alignItems="start" 
-          gap={4} padding={14}
-    >
-      <CloseButton color="#19332D" bg="#EDF1F1" size="xs" variant="subtle" position="relative" top="-12" left="-12"></CloseButton>
-      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
-      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
-      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>
-      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
-      <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><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} paddingTop={4}
+            paddingLeft={8} paddingRight={8}
+        >
+          <CloseButton color="#19332D" bg= "#EDF1F1" variant="subtle" left="-4" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+          <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button>
+          <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button>
+          <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button>
+          <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button>
+          <Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><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"}} variant="ghost" onClick={() => setIsOpen(!isOpen)}>
+            <RxHamburgerMenu />
+          </IconButton>
+          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><PushPin /> </IconButton>
+          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><Globe fill="white" stroke="black" /> </IconButton>
+          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><MapMarker fill="white" stroke="black" /> </IconButton>
+          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><FaVolcano /> </IconButton>
+          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><Users fill="white" stroke="black" /> </IconButton>
+        </Box>
+      )}
+    </>
   );
 }