CFE-12 implement of sidebar

src/components/layouts/Dashboard/Sidebar/SidebarList.jsx

@@ -1,5 +1,5 @@
 import {Divider, List} from "@mui/material";
-import {Fragment, useEffect, useReducer} from "react";
+import {Fragment, useEffect, useReducer, useRef, useState} from "react";
 import SidebarListItem from "./SidebarListItem";
 import sidebarMenu from "@/core/data/sidebarMenu";
 import {useRouter} from "next/router";
@@ -15,10 +15,22 @@ function reducer(state, action) {
             );
         case "SELECTED":
             return state.map((itemsArr) =>
-                itemsArr.map((item) => ({
-                    ...item,
-                    selected: item.type === "page" && action.route === item.route,
-                }))
+                itemsArr.map((item) => {
+                    return item.type === "page"
+                        ? { ...item, selected: action.route === item.route }
+                        : item.subItem && Array.isArray(item.subItem)
+                            ? {
+                                ...item,
+                                subItem: item.subItem.map((subitem) => ({
+                                    ...subitem,
+                                    selected: subitem.route === action.route,
+                                })),
+                                showSubItem: item.subItem.some(
+                                    (subitem) => subitem.selected
+                                ),
+                            }
+                            : item;
+                })
             );
         default:
             throw new Error();
@@ -29,13 +41,23 @@ export default function SidebarList({handleDrawerToggle}) {
     const [itemMenu, dispatch] = useReducer(reducer, sidebarMenu);
     const {user} = useUser();
     const router = useRouter();
+    const [selectedKey, setSelectedKey] = useState(null);
 
     useEffect(() => {
         dispatch({type: "SELECTED", route: router.pathname});
+        setSelectedKey(router.pathname);
     }, [router.pathname]);
 
+
+    useEffect(() => {
+        selectedKey && document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+        });
+    }, [selectedKey]);
+
     return (
-        <List>
+        <List sx={{ overflow: "scroll"}}>
             {itemMenu.map((itemArr, index) => (
                 <Fragment key={index}>
                     {itemArr.map((item) =>

src/components/layouts/Dashboard/Sidebar/SidebarListItem.jsx

@@ -10,26 +10,26 @@ import useNotification from "@/lib/app/hooks/useNotification";
 const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
     const t = useTranslations();
     const { notification_count } =  useNotification();
-
     const hasSubItems = item.type === "menu" && item.subItem && item.subItem.length > 0;
-
-    const renderBadge = () => (
-        <IconButton>
-            <Badge
-                badgeContent={notification_count ? notification_count[item.name] : 0}
-                color="error"
-                variant="standard"
-                anchorOrigin={{
-                    vertical: "top",
-                    horizontal: "right",
-                }}
-            />
-        </IconButton>
-    );
+    const renderBadge = () => {
+        return !hasSubItems ? (
+            <IconButton>
+                <Badge
+                    badgeContent={notification_count ? notification_count[item.name] : 0}
+                    color="error"
+                    variant="standard"
+                    anchorOrigin={{
+                        vertical: "top",
+                        horizontal: "right",
+                    }}
+                />
+            </IconButton>
+        ) : null;
+    };
 
     return (
         <>
-            <ListItem disablePadding secondaryAction={renderBadge()}>
+            <ListItem data-route={item.route} disablePadding secondaryAction={renderBadge()}>
                 <ListItemButton
                     selected={item.selected}
                     {...(item.type == "page" && {

src/components/layouts/Dashboard/Sidebar/SidebarListSubItem.jsx

@@ -13,10 +13,9 @@ import {
 import {useTranslations} from "next-intl";
 import useNotification from "@/lib/app/hooks/useNotification";
 
-const SidebarListSubItem = ({item, handleDrawerToggle}) => {
+const SidebarListSubItem = ({item, handleDrawerToggle }) => {
     const t = useTranslations();
     const {notification_count} = useNotification();
-
     const renderBadge = (subitem) => (
         <IconButton>
             <Badge
@@ -32,8 +31,9 @@ const SidebarListSubItem = ({item, handleDrawerToggle}) => {
     );
 
     return (
+
         <Collapse in={item.showSubItem} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
-            <List component="div" disablePadding sx={{bgcolor: "#f6f6f6", pr: 1}}>
+            <List component="div" disablePadding sx={{bgcolor: "#f6f6f6", pr: 0}}>
                 {item.subItem.map((subitem) => (
                     <ListItem key={subitem.key} disablePadding secondaryAction={renderBadge(subitem)}>
                         <ListItemButton
@@ -67,6 +67,7 @@ const SidebarListSubItem = ({item, handleDrawerToggle}) => {
                 ))}
             </List>
         </Collapse>
+
     );
 };
 

src/components/layouts/Dashboard/Sidebar/index.jsx

@@ -22,6 +22,7 @@ const Sidebar = (props) => {
                     "& .MuiDrawer-paper": {
                         boxSizing: "border-box",
                         width: props.drawerWidth,
+                        overflow: "hidden",
                     },
                 }}
             >
@@ -34,6 +35,7 @@ const Sidebar = (props) => {
                     "& .MuiDrawer-paper": {
                         boxSizing: "border-box",
                         width: props.drawerWidth,
+                        overflow: "hidden",
                     },
                 }}
                 open