import { useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
import { ColorModeButton } from "@/components/ui/color-mode";
import { FaVolcano } from "react-icons/fa6";
import { RxHamburgerMenu } from "react-icons/rx";
import { useState } from "react";
// ICONS
export const PushPin = createIcon({
displayName: "PushPin",
viewBox: "0 0 24 24",
fill: "none",
path: (
<>
),
});
export const Globe = createIcon({
displayName: "Globe",
viewBox: "0 0 24 24",
fill: "currentColor",
path: (
<>
),
});
export const MapMarker = createIcon({
displayName: "MapMarker",
viewBox: "0 0 24 24",
fill: "none",
path: (
<>
),
});
export const Users = createIcon({
displayName: "Users",
viewBox: "0 0 24 24",
fill: "currentColor",
path: (
<>
),
});
export default function Sidebar({ onChangeView }) {
const [isOpen, setIsOpen] = useState(true);
const [activeButton, setActiveButton] = useState(0)
// this list of btns will come from the db (not every usr will have access to admin)
const buttons = [
{icon: PushPin, name: "Dashboard", view: "widget"},
{icon: Globe, name: "Global Map", view: "global"},
{icon: MapMarker, name: "Regional Map", view: "regional"},
{icon: FaVolcano, name: "Volcano", view: "volcano"},
{icon: Users, name: "Admin", view: "admin"}
];
const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe();
const toggleSidebar = () => {
if (isOpen) setIsOpen(false);
else setIsOpen(true);
};
return (
{buttons.map((button, idx) => {
const Icon = button.icon;
return (
)
})}
);
}