83 lines
2.9 KiB
React
83 lines
2.9 KiB
React
import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
|
|
import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
|
|
import { useState } from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx";
|
|
import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyRound } from 'lucide-react';
|
|
|
|
export default function Sidebar() {
|
|
const { toggleColorMode } = useColorMode();
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const recipe = useSlotRecipe({ key: "sidebar" });
|
|
const styles = recipe();
|
|
|
|
// const buttons = useMemo(() => {
|
|
// if (["settings", "personal", "security"].includes(view)) {
|
|
// 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 = [
|
|
{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 (
|
|
<Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative">
|
|
<IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px">
|
|
<Menu />
|
|
</IconButton>
|
|
|
|
{buttons.map((button, idx) => {
|
|
const Icon = button.icon;
|
|
return ( // TODO: don't use idx as a key
|
|
<Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}>
|
|
<Button
|
|
as={NavLink}
|
|
to={button.url}
|
|
key={button.name}
|
|
css={styles.buttons}
|
|
justifyContent="flex-start"
|
|
>
|
|
<Icon />
|
|
<span
|
|
style={{
|
|
opacity: isOpen ? 1 : 0,
|
|
transition: "opacity 0.4s ease",
|
|
overflow: "hidden",
|
|
whiteSpace: "nowrap",
|
|
display: "inline-block",
|
|
lineHeight: 1.2
|
|
}}
|
|
>
|
|
{button.name}
|
|
</span>
|
|
</Button>
|
|
</Tooltip>
|
|
)
|
|
})}
|
|
<ColorModeButton
|
|
onClick={() => toggleColorMode()}
|
|
position="absolute"
|
|
bottom="2"
|
|
/>
|
|
</Box>
|
|
);
|
|
} |