58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
import { Divider, List } from "@mui/material";
|
|
import { useEffect, useReducer } from "react";
|
|
import SidebarListItem from "./SidebarListItem";
|
|
import sidebarMenu from "@/core/data/sidebarMenu";
|
|
import { useRouter } from "next/router";
|
|
import useUser from "@/lib/app/hooks/useUser";
|
|
|
|
function reducer(state, action) {
|
|
switch (action.type) {
|
|
case "COLLAPSE_MENU":
|
|
return state.map((itemsArr) =>
|
|
itemsArr.map((item) =>
|
|
action.key == item.key
|
|
? { ...item, showSubItem: !item.showSubItem }
|
|
: item
|
|
)
|
|
);
|
|
case "SELECTED":
|
|
return state.map((itemsArr) =>
|
|
itemsArr.map((item) =>
|
|
action.route == item.route
|
|
? { ...item, selected: true }
|
|
: { ...item, selected: false }
|
|
)
|
|
);
|
|
default:
|
|
throw new Error();
|
|
}
|
|
}
|
|
|
|
export default function SidebarList({ handleDrawerToggle }) {
|
|
const [itemMenu, dispatch] = useReducer(reducer, sidebarMenu);
|
|
const { user } = useUser();
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
dispatch({ type: "SELECTED", route: router.pathname });
|
|
}, [router.pathname]);
|
|
|
|
const filteredItemMenu = itemMenu[0].filter(
|
|
(item) => user.role.includes(item.role) || item.role === "all"
|
|
);
|
|
|
|
return (
|
|
<List>
|
|
{filteredItemMenu.map((item, index) => (
|
|
<SidebarListItem
|
|
item={item}
|
|
dispatch={dispatch}
|
|
key={item.key}
|
|
handleDrawerToggle={handleDrawerToggle}
|
|
/>
|
|
))}
|
|
{filteredItemMenu.length > 0 && <Divider />}
|
|
</List>
|
|
);
|
|
}
|