Save point, working on sidebar icon positioning during transition

client/src/components/sidebar.jsx

@@ -57,13 +57,27 @@ export const Users = createIcon({
 });
 
 
+
+
 export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(true);
+  const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
   const [activeButton, setActiveButton] = useState("Dashboard");
 
+  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 (
     <Box
-      w={isOpen ? "250px" : "60px"}
+      w={isOpen ? "250px" : "70px"}
       h="100vh"
       transition="width 0.4s ease"
       borderRight="1px solid black"
@@ -80,7 +94,8 @@ export default function Sidebar() {
         size="md"
         // ml="auto"
         // left="0"
-        onClick={() => setIsOpen(!isOpen)}
+        // onClick={() => setIsOpen(!isOpen)}
+        onClick={toggleSidebar}
         // icon={<RxHamburgerMenu />}
       >
         <RxHamburgerMenu />
@@ -90,9 +105,10 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen ? "flex-start" : "center"}
+        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
         w="100%"
         onClick={() => setActiveButton("Dashboard")}
+        // onClick={toggleSidebar}
         bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}
         _hover={{
           bg: activeButton === "Dashboard" ? "#A4B6B6" : "#EDF1F1",
@@ -101,13 +117,15 @@ export default function Sidebar() {
         {isOpen ? (
           <>
             {/* <PushPin boxSize={5} style={{ marginRight: "8px" }} /> */}
+            
             <PushPin fill="white" />
+            
             {/* 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
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                 overflow: "hidden",
                 whiteSpace: "nowrap",
                 display: "inline-block",
@@ -115,6 +133,7 @@ export default function Sidebar() {
                 transitionDuration: "0.3s",
                 transitionTimingFunction: "ease",
                 transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
               }}
             >
               Dashboard
@@ -131,8 +150,11 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen ? "flex-start" : "center"}
+        // justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
+        justifyContent="flex-start"
         w="100%"
+        h="48px"
+        px={0}
         onClick={() => setActiveButton("Global")}
         bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}
         _hover={{
@@ -141,29 +163,53 @@ export default function Sidebar() {
       >
         {isOpen ? (
           <>
-            {/* <Globe boxSize={5} style={{ marginRight: "8px" }} /> */}
+            <Box
-            <Globe fill="white" stroke="black" />
+              display="flex"
-            {/* Make text appear gradually instead of popping in */}
+              alignItems="flex-start"
-            <span
+              pl={ isOpen ? "0px" : "24px" }
-              style={{
+              // w="100%"
-                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",
-              }}
             >
-              Global Map
+              {/* Fixed-width icon container (works both open & closed) */}
-            </span>
+              <Box
+                w="70px" // Match closed sidebar width
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                flexShrink={0}
+              >
+                {/* <Globe boxSize={5} style={{ marginRight: "8px" }} /> */}
+                <Globe fill="white" stroke="black" />
+              </Box>
+              <span
+                style={{
+                  marginLeft: "-10px",
+                  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>
+            </Box>
+              
           </>
         ) : (
           // <Globe boxSize={5} />
-          <Globe fill="white" stroke="black" />
+          <Box
+            w="70px" // Match closed sidebar width exactly
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Globe fill="white" stroke="black" />
+          </Box>
         )}
       </Button>
 
@@ -172,7 +218,7 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen ? "flex-start" : "center"}
+        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
         w="100%"
         onClick={() => setActiveButton("Regional")}
         bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}
@@ -189,7 +235,7 @@ export default function Sidebar() {
               style={{
                 marginLeft: "8px",
                 opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                 overflow: "hidden",
                 whiteSpace: "nowrap",
                 display: "inline-block",
@@ -197,6 +243,7 @@ export default function Sidebar() {
                 transitionDuration: "0.3s",
                 transitionTimingFunction: "ease",
                 transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
               }}
             >
               Regional Map
@@ -213,7 +260,7 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen ? "flex-start" : "center"}
+        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
         w="100%"
         onClick={() => setActiveButton("Volcano")}
         bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}
@@ -229,7 +276,7 @@ export default function Sidebar() {
               style={{
                 marginLeft: "8px",
                 opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in
+                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
                 overflow: "hidden",
                 whiteSpace: "nowrap",
                 display: "inline-block",
@@ -237,6 +284,7 @@ export default function Sidebar() {
                 transitionDuration: "0.3s",
                 transitionTimingFunction: "ease",
                 transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
               }}
             >
               Volcano
@@ -253,7 +301,7 @@ export default function Sidebar() {
         color="#19332D"
         fontSize="lg"
         variant="ghost"
-        justifyContent={isOpen ? "flex-start" : "center"}
+        justifyContent={isOpen || !hasFinishedClosing ? "flex-start" : "center"}
         w="100%"
         onClick={() => setActiveButton("Admin")}
         bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}
@@ -278,6 +326,7 @@ export default function Sidebar() {
                 transitionDuration: "0.3s",
                 transitionTimingFunction: "ease",
                 transitionDelay: isOpen ? "0.1s" : "0s",
+                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
               }}
             >
               Admin