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

import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react";
import {ColorModeButton} from "@/components/ui/color-mode.jsx";
import {useState} from "react";
import {NavLink} from "react-router-dom";
import Tooltip from "../ui/Tooltip.jsx";
import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} 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() {

  const [isOpen, setIsOpen] = useState(true);

  const recipe = useSlotRecipe({key: "sidebar"});
  const styles = recipe({state: isOpen ? "open" : "closed"});

  // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
  const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;

  const toggleSidebar = () => setIsOpen((prev) => !prev);

  return (
    <Box css={styles.root}>
      {/* Home Link Logo */}
      <Button
        as={NavLink}
        to="/home"
        css={styles.logo}
        variant="plain"
      >
        {isOpen ? "🌋 VDAP" : "🌋"}
      </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>
        );
      })}
      <Box css={styles.footer}>
        {/* Menu Trigger */}
        <IconButton
          aria-label="Toggle Sidebar"
          variant="plain"
          size="md"
          onClick={toggleSidebar}
          css={styles.collapse_button}
        >
          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
        </IconButton>

          {/* Theme Toggler */}
          <ColorModeButton _hover={{ bg: "transparent" }} />
        </Box>
      </Box>
  );
}