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

Sidebar text fades in and OUT!!

Browse Source
This commit is contained in:
vkuchenik
2025-07-17 07:29:03 -07:00
parent 26bd2028a8
commit 9f6342d240
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
+17 -95
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" /> <PushPin fill="white" />
{/* Make text appear gradually instead of popping in */} {/* Make text appear gradually instead of popping in */}
<span <span style={{
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in transition: "opacity 0.4s ease",
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
display: "inline-block", display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: "0.1s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}} }}
> >
Dashboard Dashboard
</span> </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" /> <Globe fill="white" stroke="black" />
<span style={{
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in transition: "opacity 0.4s ease",
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
display: "inline-block", display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}} }}
> >
Global Map Global Map
</span> </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"/> <MapMarker fill="white" stroke="black"/>
{/* Make text appear gradually instead of popping in */} <span style={{
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in transition: "opacity 0.4s ease",
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
display: "inline-block", display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}} }}
> >
Regional Map Regional Map
</span> </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 size={20} style={{ marginRight: "1px" }} /> */}
<FaVolcano /> <FaVolcano />
{/* Make text appear gradually instead of popping in */} <span style={{
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in transition: "opacity 0.4s ease",
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
display: "inline-block", display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}} }}
> >
Volcano Volcano
</span> </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 boxSize={5} style={{ marginRight: "8px" }} /> */}
<Users fill="white" stroke="black" /> <Users fill="white" stroke="black" />
<span style={{
{/* Make text appear gradually instead of popping in */}
<span
style={{
marginLeft: "8px",
opacity: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0,
maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in transition: "opacity 0.4s ease",
overflow: "hidden", overflow: "hidden",
whiteSpace: "nowrap", whiteSpace: "nowrap",
display: "inline-block", display: "inline-block",
transitionProperty: "opacity, max-width",
transitionDuration: "0.3s",
transitionTimingFunction: "ease",
transitionDelay: isOpen ? "0.1s" : "0s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}} }}
> >
Admin Admin
</span> </span>
</>
) : (
<Users fill="white" stroke="black" />
)}
</Button> </Button>
<ColorModeButton position="absolute" bottom="2"/> <ColorModeButton position="absolute" bottom="2"/>
</Box> </Box>