Merge branch 'refactor/sidebar-transition' into 'main'

Refactor/sidebar transition

See merge request vkuchenik/website-framework!9

client/src/components/sidebar.jsx

@@ -68,16 +68,18 @@ export default function Sidebar() {
     if (isOpen) {
       setHasFinishedClosing(false);
       setTimeout(() => setIsOpen(false), 10); // Kick off transition
-      setTimeout(() => setHasFinishedClosing(true), 400) // Match sidebar transition duration
+      setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration
     } else {
       setIsOpen(true);
       setHasFinishedClosing(true);
+      // setTimeout(() => setIsOpen(true), 5);
+      // setTimeout(() => setHasFinishedClosing(false), 200);
     }
   };
 
   return (
     <Box
-      w={isOpen ? "250px" : "70px"}
+      w={isOpen ? "220px" : "86px"}
       h="100vh"
       transition="width 0.4s ease"
       borderRight="1px solid black"
@@ -105,7 +107,8 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        // justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "flex-start"}
+        justifyContent="flex-start"
         w="100%"
         onClick={() => setActiveButton("Dashboard")}
         // onClick={toggleSidebar}
@@ -147,6 +150,52 @@ export default function Sidebar() {
 
       {/* Global Map */}
       <Button
+        color="#19332D"
+        fontSize="lg"
+        variant="ghost"
+        // justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        justifyContent="flex-start"
+        w="100%"
+        onClick={() => setActiveButton("Global")}
+        // onClick={toggleSidebar}
+        bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}
+        _hover={{
+          bg: activeButton === "Global" ? "#A4B6B6" : "#EDF1F1",
+        }}
+      >
+        {isOpen ? (
+          <>
+            {/* <PushPin boxSize={5} style={{ marginRight: "8px" }} /> */}
+            
+            <Globe 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",
+              }}
+            >
+              Dashboard
+            </span>
+          </>
+        ) : (
+          // <PushPin boxSize={5} />
+          <Globe fill="white" stroke="black" />
+        )}
+      </Button>
+
+      {/* EXPERIMENTAL STYLING */}
+      {/* <Button
         color="#19332D"
         fontSize="lg"
         variant="ghost"
@@ -165,11 +214,10 @@ export default function Sidebar() {
           <>
             <Box
               display="flex"
-              alignItems="flex-start"
+              alignItems="center"
               pl={ isOpen ? "0px" : "24px" }
               // w="100%"
             >
-              {/* Fixed-width icon container (works both open & closed) */}
               <Box
                 w="70px" // Match closed sidebar width
                 display="flex"
@@ -177,7 +225,6 @@ export default function Sidebar() {
                 alignItems="center"
                 flexShrink={0}
               >
-                {/* <Globe boxSize={5} style={{ marginRight: "8px" }} /> */}
                 <Globe fill="white" stroke="black" />
               </Box>
               <span
@@ -211,14 +258,15 @@ export default function Sidebar() {
             <Globe fill="white" stroke="black" />
           </Box>
         )}
-      </Button>
+      </Button> */}
 
       {/* Regional Map */}
       <Button
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        // justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        justifyContent="flex-start"
         w="100%"
         onClick={() => setActiveButton("Regional")}
         bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}
@@ -260,7 +308,8 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        // justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        justifyContent="flex-start"
         w="100%"
         onClick={() => setActiveButton("Volcano")}
         bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}
@@ -270,7 +319,8 @@ export default function Sidebar() {
       >
         {isOpen ? (
           <>
-            <FaVolcano size={20} style={{ marginRight: "8px" }} />
+            {/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
+            <FaVolcano />
             {/* Make text appear gradually instead of popping in */}
             <span
               style={{
@@ -301,7 +351,8 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        // justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        justifyContent="flex-start"
         w="100%"
         onClick={() => setActiveButton("Admin")}
         bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}