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

Update sidebar changes made for function and look. removed some extras

Browse Source
This commit is contained in:
chight
2026-06-05 13:38:35 -07:00
parent 6a0fe7b05b
commit 2bb316f3b9
1 changed files with 58 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Sidebar/Sidebar.jsx
+58 -67
View File
@@ -1,83 +1,74 @@
import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react"; import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
import { ColorModeButton, useColorMode } from "@/components/ui/color-mode"; import { ColorModeButton } from "@/components/ui/color-mode";
import { useState } from "react"; import { useState } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx"; import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx";
import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyRound } from 'lucide-react'; import { Mountain, House, Earth, MapPin, ShieldUser, Menu } from 'lucide-react';
const SIDEBAR_DEFAULT_BUTTONS = [
{ icon: House, name: "Home", url: "/home" },
{ icon: Earth, name: "Global Map", url: "/global-map" },
{ icon: MapPin, name: "Regional Map", url: "/regional-map" },
{ icon: Mountain, name: "Volcano", url: "/volcano" },
{ icon: ShieldUser, name: "Admin", url: "/admin" } // TODO remove in the future as default should not have admin
];
export default function Sidebar() { export default function Sidebar() {
const { toggleColorMode } = useColorMode();
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const recipe = useSlotRecipe({ key: "sidebar" }); const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe(); const styles = recipe();
// const buttons = useMemo(() => { // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
// if (["settings", "personal", "security"].includes(view)) { const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
// return [
// {icon: CircleUserRound, name: "Personal Info", url: "/personal"},
// {icon: KeyRound, name: "Security", url: "/security"},
// ];
// }
// return [
// {icon: House, name: "Home", url: "/mydashboard"},
// {icon: Earth, name: "Global Map", url: "/global"},
// {icon: MapPin, name: "Regional Map", url: "/regional"},
// {icon: Mountain, name: "Volcano", url: "/volcanohome"},
// {icon: ShieldUser, name: "Admin", url: "/medataentry"}
// ];
// }, [view]);
const buttons = [ const toggleSidebar = () => setIsOpen((prev) => !prev);
{icon: House, name: "Home", url: "/home"},
{icon: Earth, name: "Global Map", url: "/global-map"},
{icon: MapPin, name: "Regional Map", url: "/regional-map"},
{icon: Mountain, name: "Volcano", url: "/volcano"},
{icon: ShieldUser, name: "Admin", url: "/admin"}
];
const toggleSidebar = () => {
setIsOpen((prev) => !prev);
};
return ( return (
<Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative"> <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative" display="flex" flexDirection="column" gap={2}
<IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px"> >
<Menu /> {/* Menu Trigger */}
</IconButton> <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
>
<Menu />
</IconButton>
{buttons.map((button, idx) => { {/* Navigation Buttons */}
const Icon = button.icon; {visibleButtons.map((button) => {
return ( // TODO: don't use idx as a key const Icon = button.icon;
<Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}> return (
<Button <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
as={NavLink} <Button
to={button.url} as={NavLink}
key={button.name} to={button.url}
css={styles.buttons} css={styles.buttons}
justifyContent="flex-start" justifyContent="flex-start"
> width="100%"
<Icon /> overflow="hidden" // Prevents text popout on collapse
<span >
style={{ <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
opacity: isOpen ? 1 : 0,
transition: "opacity 0.4s ease", {/* Cleaned conditional transition styling */}
overflow: "hidden", <Box
whiteSpace: "nowrap", as="span"
display: "inline-block", ml={isOpen ? 3 : 0}
lineHeight: 1.2 opacity={isOpen ? 1 : 0}
}} visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
> transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
{button.name} whiteSpace="nowrap"
</span> >
</Button> {button.name}
</Tooltip> </Box>
) </Button>
})} </Tooltip>
<ColorModeButton );
onClick={() => toggleColorMode()} })}
position="absolute"
bottom="2" {/* Theme Toggler */}
/> <ColorModeButton
</Box> position="absolute"
bottom="4"
left="4"
/>
</Box>
); );
} }