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

Merge branch 'fix/sidebar/sizing' into 'main'

Browse Source 
Sidebar text fades in and OUT!!

See merge request vkuchenik/website-framework!12
This commit is contained in:
vkuchenik
2025-07-17 14:29:48 +00:00
parent e1187892d3 9f6342d240
commit e21b88bc3a
1 changed files with 64 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar.jsx
+63 -141
View File
@@ -59,27 +59,23 @@ export const Users = createIcon({
export default function Sidebar() { export default function Sidebar() {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const [hasFinishedClosing, setHasFinishedClosing] = useState(true); const [hasFinishedTransitions, setFinishedTransitions] = useState(false);
const [activeButton, setActiveButton] = useState(0) const [activeButton, setActiveButton] = useState(0)
const recipe = useSlotRecipe({ key: "sidebar" }); const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe(); const styles = recipe();
const toggleSidebar = () => { const toggleSidebar = () => {
if (isOpen) { setFinishedTransitions(false);
setHasFinishedClosing(false); if (isOpen) setIsOpen(false);
setTimeout(() => setIsOpen(false), 10); // Kick off transition else setIsOpen(true);
setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration setTimeout(() => setFinishedTransitions(true), 400); // Match sidebar transition duration
} else {
setIsOpen(true);
setHasFinishedClosing(true);
}
}; };
return ( return (
<Box <Box
css={styles.root} css={styles.root}
w={isOpen ? "220px" : "86px"} width={isOpen ? "100%" : "86px"}
transition="width 0.4s ease" transition="width 0.4s ease"
> >
<IconButton <IconButton
@@ -93,152 +89,78 @@ export default function Sidebar() {
{/* Dashboard */} {/* Dashboard */}
<Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined} justifyContent="flex-start"> <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? ( <PushPin fill="white" />
<> {/* Make text appear gradually instead of popping in */}
<PushPin fill="white" /> <span style={{
opacity: isOpen ? 1 : 0,
{/* Make text appear gradually instead of popping in */} transition: "opacity 0.4s ease",
<span overflow: "hidden",
style={{ whiteSpace: "nowrap",
marginLeft: "8px", display: "inline-block",
opacity: isOpen ? 1 : 0, }}
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in >
overflow: "hidden", Dashboard
whiteSpace: "nowrap", </span>
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: "0.1s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Dashboard
</span>
</>
) : (
<PushPin fill="white" />
)}
</Button> </Button>
{/* Global Map */} {/* Global Map */}
<Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined} justifyContent="flex-start"> <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? ( <Globe fill="white" stroke="black" />
<> <span style={{
<Globe fill="white" stroke="black" /> opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease",
{/* Make text appear gradually instead of popping in */} overflow: "hidden",
<span whiteSpace: "nowrap",
style={{ display: "inline-block",
marginLeft: "8px", }}
opacity: isOpen ? 1 : 0, >
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in Global Map
overflow: "hidden", </span>
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>
</>
) : (
<Globe fill="white" stroke="black" />
)}
</Button> </Button>
{/* Regional Map */} {/* Regional Map */}
<Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined} justifyContent="flex-start"> <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? ( <MapMarker fill="white" stroke="black"/>
<> <span style={{
<MapMarker fill="white" stroke="black"/> opacity: isOpen ? 1 : 0,
{/* Make text appear gradually instead of popping in */} transition: "opacity 0.4s ease",
<span overflow: "hidden",
style={{ whiteSpace: "nowrap",
marginLeft: "8px", display: "inline-block",
opacity: isOpen ? 1 : 0, }}
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in >
overflow: "hidden", Regional Map
whiteSpace: "nowrap", </span>
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Regional Map
</span>
</>
) : (
<MapMarker fill="white" stroke="black" />
)}
</Button> </Button>
{/* Volcano */} {/* Volcano */}
<Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined} justifyContent="flex-start"> <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? ( <FaVolcano />
<> <span style={{
{/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */} opacity: isOpen ? 1 : 0,
<FaVolcano /> transition: "opacity 0.4s ease",
{/* Make text appear gradually instead of popping in */} overflow: "hidden",
<span whiteSpace: "nowrap",
style={{ display: "inline-block",
marginLeft: "8px", }}
opacity: isOpen ? 1 : 0, >
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in Volcano
overflow: "hidden", </span>
whiteSpace: "nowrap",
display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Volcano
</span>
</>
) : (
<FaVolcano />
)}
</Button> </Button>
{/* Admin */} {/* Admin */}
<Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined} justifyContent="flex-start"> <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined} justifyContent="flex-start" >
{isOpen ? ( <Users fill="white" stroke="black" />
<> <span style={{
{/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */} opacity: isOpen ? 1 : 0,
<Users fill="white" stroke="black" /> transition: "opacity 0.4s ease",
overflow: "hidden",
{/* Make text appear gradually instead of popping in */} whiteSpace: "nowrap",
<span display: "inline-block",
style={{ }}
marginLeft: "8px", >
opacity: isOpen ? 1 : 0, Admin
maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in </span>
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",
}}
>
Admin
</span>
</>
) : (
<Users fill="white" stroke="black" />
)}
</Button> </Button>
<ColorModeButton position="absolute" bottom="2"/> <ColorModeButton position="absolute" bottom="2"/>
</Box> </Box>