update
This commit is contained in:
Amirhossein Mahmoodi
@@ -1,201 +1,132 @@
|
||||
"use client"
|
||||
import {List} from "@mui/material";
|
||||
"use client";
|
||||
import SidebarListItems from "@/core/components/SidebarListItems";
|
||||
import {useEffect, useReducer, useState} from "react";
|
||||
import {usePathname} from 'next/navigation'
|
||||
import SecurityIcon from '@mui/icons-material/Security';
|
||||
import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
|
||||
import AssessmentIcon from '@mui/icons-material/Assessment';
|
||||
import AirlineSeatReclineNormalIcon from "@mui/icons-material/AirlineSeatReclineNormal";
|
||||
import RepartitionIcon from '@mui/icons-material/Repartition';
|
||||
|
||||
const data = [
|
||||
{
|
||||
id: "hello",
|
||||
type: "menu",
|
||||
route: "/hello",
|
||||
icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
selected: false,
|
||||
Subitems: [
|
||||
{
|
||||
id: "amin",
|
||||
route: "/s",
|
||||
icon: <SpaceDashboardIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
firstName: "amin",
|
||||
lastName: "ali",
|
||||
Subitems: [
|
||||
{
|
||||
id: "shahrokh", shahrokh: "shahrokh", type: "page", selected: false, route: "/dashbssoard", icon: <AssessmentIcon sx={{width: 'inherit', height: 'inherit'}}/>
|
||||
},
|
||||
{
|
||||
id: "shasdasdsahrokh", shahrokh: "shahroasdasdkh", type: "page", selected: false, route: "/dashboardsd", icon: <AirlineSeatReclineNormalIcon sx={{width: 'inherit', height: 'inherit'}}/>
|
||||
}
|
||||
],
|
||||
hasSubitems: true,
|
||||
showSubitems: false,
|
||||
type: "menu",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
id: "amir",
|
||||
route: "/dashboarsad",
|
||||
icon: <RepartitionIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
firstName: "amir",
|
||||
lastName: "akbar",
|
||||
hasSubitems: false,
|
||||
showSubitems: false,
|
||||
selected: false,
|
||||
type: "page",
|
||||
},
|
||||
],
|
||||
hasSubitems: true,
|
||||
showSubitems: false
|
||||
},
|
||||
{
|
||||
id: "hi",
|
||||
type: "menu",
|
||||
icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
route: "/hi",
|
||||
selected: false,
|
||||
Subitems: [
|
||||
{
|
||||
id: "ali",
|
||||
route: "/dashboardss",
|
||||
firstName: "ali",
|
||||
lastName: "ali",
|
||||
icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
hasSubitems: false,
|
||||
showSubitems: false,
|
||||
type: "page",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
id: "akbar",
|
||||
route: "/akbar",
|
||||
firstName: "akbar",
|
||||
icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
lastName: "akbar",
|
||||
hasSubitems: false,
|
||||
showSubitems: false,
|
||||
type: "page",
|
||||
selected: false,
|
||||
},
|
||||
],
|
||||
hasSubitems: true,
|
||||
showSubitems: false
|
||||
},
|
||||
{
|
||||
id: "hoo",
|
||||
type: "page",
|
||||
route: "/dashboard",
|
||||
icon: <SecurityIcon sx={{width: 'inherit', height: 'inherit'}}/>,
|
||||
selected: false,
|
||||
hasSubitems: false,
|
||||
showSubitems: false
|
||||
}
|
||||
]
|
||||
import { List } from "@mui/material";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useEffect, useReducer, useState } from "react";
|
||||
import { pageMenu } from "../utils/pageMenu";
|
||||
|
||||
function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
case "COLLAPSE_MENU":
|
||||
return state.map((item) => action.id == item.id ? {
|
||||
...item, showSubitems: !item.showSubitems
|
||||
} : item)
|
||||
case "COLLAPSE_SUB_ITEMS" :
|
||||
return state.map((item) => {
|
||||
return item.hasSubitems ? {
|
||||
...item, Subitems: item.Subitems.map((subitem) => action.id === subitem.id ? {
|
||||
...subitem, showSubitems: !subitem.showSubitems
|
||||
} : subitem)
|
||||
} : item
|
||||
})
|
||||
case "COLLAPSE_SUB_SECOND_ITEMS" :
|
||||
return state.map((item) => {
|
||||
return item.hasSubitems ? {
|
||||
...item, Subitems: item.Subitems.map((subitem) => {
|
||||
return subitem.hasSubitems ? {
|
||||
...subitem,
|
||||
Subitems: subitem.Subitems.map((secondSubitem) => action.id === secondSubitem.id ? {
|
||||
...secondSubitem, showSubitems: !secondSubitem.showSubitems
|
||||
} : secondSubitem)
|
||||
} : subitem
|
||||
})
|
||||
} : item
|
||||
})
|
||||
case "SELECTED":
|
||||
return state.map((item) => {
|
||||
return item.type === "page" ? {
|
||||
...item, selected: action.route === item.route,showSubitems: item.route === action.route
|
||||
} : item.Subitems && Array.isArray(item.Subitems) ? {
|
||||
...item, Subitems: item.Subitems.map((subitem) => {
|
||||
return subitem.type === "page" ? {
|
||||
...subitem, selected: action.route === subitem.route,showSubitems: subitem.route === action.route
|
||||
} : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
|
||||
...subitem, Subitems: subitem.Subitems.map((secondSubItem) => ({
|
||||
...secondSubItem, selected: secondSubItem.route === action.route
|
||||
})),showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
|
||||
} : subitem
|
||||
}),showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
|
||||
} : item
|
||||
});
|
||||
// case "SELECTED":
|
||||
// return state.map((item) => {
|
||||
// return item.type === "page" ? {
|
||||
// ...item,
|
||||
// selected: action.route === item.route
|
||||
// } : item.Subitems && Array.isArray(item.Subitems) ? {
|
||||
// ...item,
|
||||
// Subitems: item.Subitems.map((subitem) => {
|
||||
// const updatedSubitem = subitem.type === "page" ? {
|
||||
// ...subitem,
|
||||
// selected: action.route === subitem.route
|
||||
// } : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
|
||||
// ...subitem,
|
||||
// Subitems: subitem.Subitems.map((secondSubItem) => ({
|
||||
// ...secondSubItem,
|
||||
// selected: secondSubItem.route === action.route
|
||||
// })),
|
||||
// showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
|
||||
// } : subitem;
|
||||
//
|
||||
// console.log("Updated subitem:", updatedSubitem); // Log the updated subitem
|
||||
// return updatedSubitem;
|
||||
// }),
|
||||
// showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
|
||||
// } : item
|
||||
// });
|
||||
switch (action.type) {
|
||||
case "COLLAPSE_MENU":
|
||||
return state.map((item) =>
|
||||
action.id == item.id
|
||||
? {
|
||||
...item,
|
||||
showSubitems: !item.showSubitems,
|
||||
}
|
||||
: item
|
||||
);
|
||||
case "COLLAPSE_SUB_ITEMS":
|
||||
return state.map((item) => {
|
||||
return item.hasSubitems
|
||||
? {
|
||||
...item,
|
||||
Subitems: item.Subitems.map((subitem) =>
|
||||
action.id === subitem.id
|
||||
? {
|
||||
...subitem,
|
||||
showSubitems: !subitem.showSubitems,
|
||||
}
|
||||
: subitem
|
||||
),
|
||||
}
|
||||
: item;
|
||||
});
|
||||
case "COLLAPSE_SUB_SECOND_ITEMS":
|
||||
return state.map((item) => {
|
||||
return item.hasSubitems
|
||||
? {
|
||||
...item,
|
||||
Subitems: item.Subitems.map((subitem) => {
|
||||
return subitem.hasSubitems
|
||||
? {
|
||||
...subitem,
|
||||
Subitems: subitem.Subitems.map((secondSubitem) =>
|
||||
action.id === secondSubitem.id
|
||||
? {
|
||||
...secondSubitem,
|
||||
showSubitems: !secondSubitem.showSubitems,
|
||||
}
|
||||
: secondSubitem
|
||||
),
|
||||
}
|
||||
: subitem;
|
||||
}),
|
||||
}
|
||||
: item;
|
||||
});
|
||||
case "SELECTED":
|
||||
return state.map((item) => {
|
||||
return item.type === "page"
|
||||
? {
|
||||
...item,
|
||||
selected: action.route === item.route,
|
||||
showSubitems: item.route === action.route,
|
||||
}
|
||||
: item.Subitems && Array.isArray(item.Subitems)
|
||||
? {
|
||||
...item,
|
||||
Subitems: item.Subitems.map((subitem) => {
|
||||
return subitem.type === "page"
|
||||
? {
|
||||
...subitem,
|
||||
selected: action.route === subitem.route,
|
||||
showSubitems: subitem.route === action.route,
|
||||
}
|
||||
: subitem.Subitems && Array.isArray(subitem.Subitems)
|
||||
? {
|
||||
...subitem,
|
||||
Subitems: subitem.Subitems.map((secondSubItem) => ({
|
||||
...secondSubItem,
|
||||
selected: secondSubItem.route === action.route,
|
||||
})),
|
||||
showSubitems: subitem.Subitems.some(
|
||||
(secondSubItem) => secondSubItem.route === action.route
|
||||
),
|
||||
}
|
||||
: subitem;
|
||||
}),
|
||||
showSubitems: item.Subitems.some(
|
||||
(subitem) => subitem.showSubitems
|
||||
),
|
||||
}
|
||||
: item;
|
||||
});
|
||||
|
||||
|
||||
default:
|
||||
throw new Error();
|
||||
}
|
||||
default:
|
||||
throw new Error();
|
||||
}
|
||||
}
|
||||
|
||||
const SidebarMenu = () => {
|
||||
const [menuItems, dispatch] = useReducer(reducer, data);
|
||||
const pathname = usePathname()
|
||||
const [selectedKey, setSelectedKey] = useState(null);
|
||||
useEffect(() => {
|
||||
dispatch({type: "SELECTED", route: pathname});
|
||||
setSelectedKey(pathname);
|
||||
}, [pathname]);
|
||||
const [menuItems, dispatch] = useReducer(reducer, pageMenu);
|
||||
const pathname = usePathname();
|
||||
const [selectedKey, setSelectedKey] = useState(null);
|
||||
useEffect(() => {
|
||||
dispatch({ type: "SELECTED", route: pathname });
|
||||
setSelectedKey(pathname);
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
selectedKey && document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
|
||||
behavior: "smooth", block: "center"
|
||||
});
|
||||
}, [selectedKey]);
|
||||
useEffect(() => {
|
||||
selectedKey &&
|
||||
document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
});
|
||||
}, [selectedKey]);
|
||||
|
||||
return (
|
||||
<List disablePadding>
|
||||
{
|
||||
menuItems.map((menuItem) => {
|
||||
return (
|
||||
<SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem}/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
)
|
||||
}
|
||||
export default SidebarMenu
|
||||
return (
|
||||
<List disablePadding dense>
|
||||
{menuItems.map((menuItem) => {
|
||||
return (
|
||||
<SidebarListItems
|
||||
dispatch={dispatch}
|
||||
key={menuItem.id}
|
||||
menuItem={menuItem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
);
|
||||
};
|
||||
export default SidebarMenu;
|
||||
|
||||
Reference in New Issue
Block a user