Web-Frontend/client/src/components/layout/Sidebar.jsx

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>
  );
}