91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useSelector } from "react-redux";
|
|
import DashboardIcon from "@mui/icons-material/Dashboard";
|
|
import { ElementType, useState } from "react";
|
|
import PageLinks from "../../../components/PageLinks/PageLinks";
|
|
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
|
|
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
|
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
|
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
|
|
import { selectNavigationSidebar } from "@/app/redux/metadata/selectors";
|
|
import { SidebarItem } from "@/app/redux/metadata/metadataSlice";
|
|
import { resolveIcon } from "@/app/utils/iconMap";
|
|
import "./sideBar.scss";
|
|
|
|
interface SidebarProps {
|
|
isOpen?: boolean;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
const SideBar = ({ isOpen = true, onClose }: SidebarProps) => {
|
|
const [openMenus, setOpenMenus] = useState<Record<string, boolean>>({});
|
|
const sidebar = useSelector(selectNavigationSidebar)?.links;
|
|
const toggleMenu = (title: string) => {
|
|
setOpenMenus(prev => ({ ...prev, [title]: !prev[title] }));
|
|
};
|
|
|
|
return (
|
|
<aside className={`sidebar ${!isOpen ? "sidebar--collapsed" : ""}`}>
|
|
<button className="sidebar__toggle-button" onClick={onClose}>
|
|
{isOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
|
|
</button>
|
|
<div className="sidebar__header">
|
|
<span>
|
|
Betrise cashier
|
|
<DashboardIcon fontSize="small" className="sidebar__icon-spacing" />
|
|
</span>
|
|
</div>
|
|
|
|
{sidebar?.map((link: SidebarItem) => {
|
|
if (link.children) {
|
|
const Icon = resolveIcon(link.icon as string);
|
|
return (
|
|
<div key={link.title}>
|
|
<button
|
|
onClick={() => toggleMenu(link.title)}
|
|
className="sidebar__dropdown-button"
|
|
>
|
|
{Icon && <Icon />}
|
|
<span className="sidebar__text">{link.title}</span>
|
|
<span className="sidebar__arrow">
|
|
{openMenus[link.title] ? (
|
|
<KeyboardArrowDownIcon />
|
|
) : (
|
|
<KeyboardArrowRightIcon />
|
|
)}
|
|
</span>
|
|
</button>
|
|
|
|
{openMenus[link.title] && (
|
|
<div className="sidebar__submenu">
|
|
{link.children.map(child => (
|
|
<PageLinks
|
|
key={child.path}
|
|
title={child.title}
|
|
path={child.path}
|
|
icon={child.icon as ElementType}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Render simple links if no children
|
|
return (
|
|
<PageLinks
|
|
key={link.path}
|
|
title={link.title}
|
|
path={link.path}
|
|
icon={link.icon as ElementType}
|
|
/>
|
|
);
|
|
})}
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|