58 lines
1.8 KiB
JavaScript
58 lines
1.8 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.permissions.includes(item.permission) || item.permission === "all"
|
|
);
|
|
|
|
return (
|
|
<List>
|
|
{filteredItemMenu.map((item, index) => (
|
|
<SidebarListItem
|
|
item={item}
|
|
dispatch={dispatch}
|
|
key={item.key}
|
|
handleDrawerToggle={handleDrawerToggle}
|
|
/>
|
|
))}
|
|
{filteredItemMenu.length > 0 && <Divider/>}
|
|
</List>
|
|
);
|
|
}
|