57 lines
2.1 KiB
React
57 lines
2.1 KiB
React
import {Mountain, House, Earth, MapPin, ShieldUser, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
|
|
import {useSlotRecipe, Box, Button, IconButton, Text, Flex} from "@chakra-ui/react";
|
|
import {ColorModeButton} from "@/components/ui/color-mode.jsx";
|
|
import {NavLink} from "react-router-dom";
|
|
import {useState} from "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() {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const recipe = useSlotRecipe({key: "sidebar"});
|
|
const styles = recipe({state: isOpen ? "open" : "closed"});
|
|
const visibleButtons = SIDEBAR_DEFAULT_BUTTONS; // TODO: call btns here according to users authorization
|
|
|
|
const toggleSidebar = () => setIsOpen((prev) => !prev);
|
|
|
|
return (
|
|
<Box css={styles.root}>
|
|
{/* Logo Navigates to Home Page */}
|
|
<Button as={NavLink} to="/home" variant="plain" css={styles.logo}>
|
|
<Flex>
|
|
<Text>🌋</Text>
|
|
<Text css={styles.logo_text}>VDAP</Text>
|
|
</Flex>
|
|
</Button>
|
|
|
|
{/* Navigation Buttons */}
|
|
{visibleButtons.map((button) => {
|
|
const Icon = button.icon;
|
|
return (
|
|
<Button as={NavLink} to={button.url} css={styles.buttons}> {/* Navigation buttons are [icon text] */}
|
|
<Icon/>
|
|
<Box as="span" css={styles.button_text}>
|
|
{button.name}
|
|
</Box>
|
|
</Button>
|
|
);
|
|
})}
|
|
|
|
{/* Collapse Sidebar and Theme Footer Buttons */}
|
|
<Flex css={styles.footer}>
|
|
<IconButton aria-label="Toggle Sidebar" variant="plain" onClick={toggleSidebar} css={styles.collapse_button}>
|
|
{isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
|
|
</IconButton>
|
|
<Flex css={styles.color_mode_button}>
|
|
<ColorModeButton />
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
} |