From 6bb10060e54f57d619ded204aaac915e60840fcd Mon Sep 17 00:00:00 2001
From: Venessa Kuchenik <vkuchenik@contractor.usgs.gov>
Date: Wed, 9 Jul 2025 12:01:32 -0700
Subject: [PATCH] active buttons highlighted

the current active button is now highlighting a bolder color.
---
 client/src/components/sidebar.jsx | 47 ++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 894bbf4..d304cf1 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -10,7 +10,7 @@ export const PushPin = createIcon({
   fill: "none",
   path: (
     <>
-      <path d="M6.21967 0.21967C6.36032 0.0790176 6.55109 0 6.75 0H17.25C17.6642 0 18 0.335786 18 0.75C18 1.76907 17.4871 2.51108 17.0303 2.96783C16.8422 3.15598 16.6554 3.30457 16.5 3.41487V10.0621C16.5369 10.0844 16.5757 10.1082 16.6162 10.1335C16.9211 10.3241 17.3307 10.6053 17.7439 10.9668C18.5387 11.6623 19.5 12.7902 19.5 14.25C19.5 14.6642 19.1642 15 18.75 15H12.75V21.75C12.75 22.1642 12.4142 24 12 24C11.5858 24 11.25 22.1642 11.25 21.75V15H5.25C4.83579 15 4.5 14.6642 4.5 14.25C4.5 12.7902 5.46131 11.6623 6.25612 10.9668C6.66928 10.6053 7.07891 10.3241 7.38375 10.1335C7.42429 10.1082 7.46311 10.0844 7.5 10.0621V3.41487C7.34463 3.30457 7.15782 3.15598 6.96967 2.96783C6.51292 2.51108 6 1.76907 6 0.75C6 0.551088 6.07902 0.360322 6.21967 0.21967ZM8.58919 2.33108L8.58592 2.32943L8.58919 2.33108ZM8.58592 2.32943L8.58919 2.33108C8.84107 2.45881 9 2.71734 9 3V10.5C9 10.7838 8.83978 11.0433 8.58608 11.1705L8.58325 11.1719L8.56493 11.1814C8.54758 11.1906 8.52023 11.2051 8.48433 11.225C8.41243 11.2648 8.3068 11.3255 8.17875 11.4055C7.92109 11.5666 7.58072 11.8009 7.24388 12.0957C6.7667 12.5132 6.36575 12.9903 6.15636 13.5H17.8436C17.6343 12.9903 17.2333 12.5132 16.7561 12.0957C16.4193 11.8009 16.0789 11.5666 15.8213 11.4055C15.6932 11.3255 15.5876 11.2648 15.5157 11.225C15.4798 11.2051 15.4524 11.1906 15.4351 11.1814L15.4168 11.1719L15.4146 11.1708C15.1607 11.0437 15 10.7839 15 10.5V3C15 2.71629 15.1601 2.45689 15.4136 2.32967C15.4185 2.32706 15.4285 2.32157 15.4423 2.31366C15.4701 2.29779 15.5139 2.27163 15.5683 2.23534C15.6785 2.16191 15.8251 2.05176 15.9697 1.90717C16.0901 1.78676 16.201 1.65123 16.29 1.5H7.71004C7.79899 1.65123 7.90992 1.78676 8.03033 1.90717C8.17492 2.05176 8.32152 2.16191 8.43165 2.23534C8.48608 2.27163 8.52987 2.29779 8.55765 2.31366C8.57149 2.32157 8.58103 2.32682 8.58592 2.32943Z" fill="#19332D"/>
+      <path xmlns="http://www.w3.org/2000/svg" d="M6.21967 0.21967C6.36032 0.0790176 6.55109 0 6.75 0H17.25C17.6642 0 18 0.335786 18 0.75C18 1.76907 17.4871 2.51108 17.0303 2.96783C16.8422 3.15598 16.6554 3.30457 16.5 3.41487V10.0621C16.5369 10.0844 16.5757 10.1082 16.6162 10.1335C16.9211 10.3241 17.3307 10.6053 17.7439 10.9668C18.5387 11.6623 19.5 12.7902 19.5 14.25C19.5 14.6642 19.1642 15 18.75 15H12.75V21.75C12.75 22.1642 12.4142 24 12 24C11.5858 24 11.25 22.1642 11.25 21.75V15H5.25C4.83579 15 4.5 14.6642 4.5 14.25C4.5 12.7902 5.46131 11.6623 6.25612 10.9668C6.66928 10.6053 7.07891 10.3241 7.38375 10.1335C7.42429 10.1082 7.46311 10.0844 7.5 10.0621V3.41487C7.34463 3.30457 7.15782 3.15598 6.96967 2.96783C6.51292 2.51108 6 1.76907 6 0.75C6 0.551088 6.07902 0.360322 6.21967 0.21967Z" stroke="#19332D" stroke-width="1.5"/>
     </>
   ),
 });
@@ -58,6 +58,7 @@ export const Users = createIcon({
 
 export default function Sidebar () {
   const [isOpen, setIsOpen] = useState(true);
+  const [activeButton, setActiveButton] = useState("Dashboard")
 
   return (
     <>
@@ -71,14 +72,24 @@ export default function Sidebar () {
             justifyContent="start" 
             alignItems="start" 
             gap={4} paddingTop={4}
-            paddingLeft={8} paddingRight={8}
+            paddingLeft={10} paddingRight={8}
         >
-          <CloseButton color="#19332D" bg= "#EDF1F1" size="sm" 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>
+          <CloseButton color="#19332D"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-6" onClick={() => setIsOpen(!isOpen)}></CloseButton>
+          <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>
       )}
 
@@ -96,11 +107,21 @@ export default function Sidebar () {
           <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" 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>
+          <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>
       )}
     </>