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
+40 -49
View File
@@ -1,82 +1,73 @@
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 Trigger */}
<IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
>
<Menu /> <Menu />
</IconButton> </IconButton>
{buttons.map((button, idx) => { {/* Navigation Buttons */}
{visibleButtons.map((button) => {
const Icon = button.icon; const Icon = button.icon;
return ( // TODO: don't use idx as a key return (
<Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}> <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
<Button <Button
as={NavLink} as={NavLink}
to={button.url} to={button.url}
key={button.name}
css={styles.buttons} css={styles.buttons}
justifyContent="flex-start" justifyContent="flex-start"
width="100%"
overflow="hidden" // Prevents text popout on collapse
> >
<Icon /> <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
<span
style={{ {/* Cleaned conditional transition styling */}
opacity: isOpen ? 1 : 0, <Box
transition: "opacity 0.4s ease", as="span"
overflow: "hidden", ml={isOpen ? 3 : 0}
whiteSpace: "nowrap", opacity={isOpen ? 1 : 0}
display: "inline-block", visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
lineHeight: 1.2 transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
}} whiteSpace="nowrap"
> >
{button.name} {button.name}
</span> </Box>
</Button> </Button>
</Tooltip> </Tooltip>
) );
})} })}
{/* Theme Toggler */}
<ColorModeButton <ColorModeButton
onClick={() => toggleColorMode()}
position="absolute" position="absolute"
bottom="2" bottom="4"
left="4"
/> />
</Box> </Box>
); );