chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor sidebar transition to keep icons stationary

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-16 11:06:36 -07:00
parent 23d126bdb5
commit 1d1bf314e7
1 changed files with 60 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar.jsx
+60 -10
View File
@@ -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"}
@@ -301,7 +350,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"}