Save point, working on sidebar icon positioning during transition

2025-07-15 15:55:20 -07:00
parent 9f61ab2216
commit dc1f4fcdaf
1 changed files with 78 additions and 29 deletions
@@ -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" }} /> */}
-            <Globe fill="white" stroke="black" />
-            {/* 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",
-              }}
+            <Box
+              display="flex"
+              alignItems="flex-start"
+              pl={ isOpen ? "0px" : "24px" }
+              // w="100%"
            >
-              Global Map
-            </span>
+              {/* Fixed-width icon container (works both open & closed) */}
+              <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