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() {
const [isOpen, setIsOpen] = useState(true);
const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
const [hasFinishedTransitions, setFinishedTransitions] = useState(false);
const [activeButton, setActiveButton] = useState(0)
const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe();
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);
}
setFinishedTransitions(false);
if (isOpen) setIsOpen(false);
else setIsOpen(true);
setTimeout(() => setFinishedTransitions(true), 400); // Match sidebar transition duration
};
return (
<Box
css={styles.root}
w={isOpen ? "220px" : "86px"}
width={isOpen ? "100%" : "86px"}
transition="width 0.4s ease"
>
<IconButton
@@ -93,152 +89,78 @@ export default function Sidebar() {
{/* Dashboard */}
<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 */}
<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: "0.1s",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Dashboard
</span>
</>
) : (
<PushPin fill="white" />
)}
<PushPin fill="white" />
{/* Make text appear gradually instead of popping in */}
<span style={{
opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease",
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
}}
>
Dashboard
</span>
</Button>
{/* Global Map */}
<Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? (
<>
<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",
}}
>
Global Map
</span>
</>
) : (
<Globe fill="white" stroke="black" />
)}
<Globe fill="white" stroke="black" />
<span style={{
opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease",
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
}}
>
Global Map
</span>
</Button>
{/* Regional Map */}
<Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? (
<>
<MapMarker 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",
}}
>
Regional Map
</span>
</>
) : (
<MapMarker fill="white" stroke="black" />
)}
<MapMarker fill="white" stroke="black"/>
<span style={{
opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease",
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
}}
>
Regional Map
</span>
</Button>
{/* Volcano */}
<Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined} justifyContent="flex-start">
{isOpen ? (
<>
{/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
<FaVolcano />
{/* 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",
}}
>
Volcano
</span>
</>
) : (
<FaVolcano />
)}
<FaVolcano />
<span style={{
opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease",
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
}}
>
Volcano
</span>
</Button>
{/* Admin */}
<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" />
{/* 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",
visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
}}
>
Admin
</span>
</>
) : (
<Users fill="white" stroke="black" />
)}
<Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined} justifyContent="flex-start" >
<Users fill="white" stroke="black" />
<span style={{
opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease",
overflow: "hidden",
whiteSpace: "nowrap",
display: "inline-block",
}}
>
Admin
</span>
</Button>
<ColorModeButton position="absolute" bottom="2"/>
</Box>