113 lines
3.6 KiB
React
113 lines
3.6 KiB
React
import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
|
|
import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
|
|
// import { Tooltip } from "@/components/ui/tooltip";
|
|
import Tooltip from "../Canvas/components/Tooltip.jsx";
|
|
import { FaVolcano } from "react-icons/fa6";
|
|
import { FaHome } from "react-icons/fa";
|
|
import { FaGlobeAmericas } from "react-icons/fa";
|
|
import { FaMapMarkerAlt } from "react-icons/fa";
|
|
import { HiUsers } from "react-icons/hi2";
|
|
import { VscThreeBars } from "react-icons/vsc";
|
|
import { useState, useEffect } from "react";
|
|
import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
|
|
import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
|
|
|
|
export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const [activeButton, setActiveButton] = useState(0)
|
|
const recipe = useSlotRecipe({ key: "sidebar" });
|
|
const styles = recipe();
|
|
const { toggleColorMode } = useColorMode();
|
|
|
|
// this list of btns will come from the db (not every usr will have access to admin)
|
|
const buttons = [
|
|
{icon: FaHome, name: "Home", view: "widget"},
|
|
{icon: FaGlobeAmericas, name: "Global Map", view: "global"},
|
|
{icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
|
|
{icon: FaVolcano, name: "Volcano", view: "volcano"},
|
|
{icon: HiUsers, name: "Admin", view: "admin"}
|
|
];
|
|
|
|
const toggleSidebar = () => {
|
|
if (isOpen) setIsOpen(false);
|
|
else setIsOpen(true);
|
|
};
|
|
|
|
// Track currrent view from both Sidebar and Canvas when 'view' changes
|
|
useEffect(() => {
|
|
// console.log("typeof view =", typeof view);
|
|
console.log("Current view = ", view);
|
|
|
|
const newIndex = buttons.findIndex((btn) => {
|
|
if (btn.view === "widget") {
|
|
return DASHBOARD_VIEWS.includes(view); // Group match
|
|
}
|
|
return btn.view === view; // Exact match
|
|
});
|
|
|
|
if (newIndex !== -1 ) {
|
|
setActiveButton(newIndex);
|
|
}
|
|
}, [view]);
|
|
|
|
return (
|
|
<Box
|
|
// key={button.name}
|
|
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"
|
|
>
|
|
<VscThreeBars />
|
|
</IconButton>
|
|
|
|
{buttons.map((button, idx) => {
|
|
const Icon = button.icon;
|
|
return (
|
|
<Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
|
|
<Button
|
|
key={button.name}
|
|
css={styles.buttons}
|
|
onClick={() => {
|
|
// setActiveButton(idx);
|
|
onChangeView(button.view); // Trigger state change in Dashboard
|
|
}}
|
|
bg={activeButton === idx ? "primary":undefined}
|
|
color={activeButton === idx ? "#FFFFFF":undefined}
|
|
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={
|
|
() => {
|
|
setDarkMode(!darkMode);
|
|
toggleColorMode();
|
|
}}
|
|
position="absolute"
|
|
bottom="2"/>
|
|
</Box>
|
|
);
|
|
} |