update navigation content

src/components/NavigationContent/NavigationContent.tsx

@@ -24,7 +24,7 @@ import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
 import Logo from "../Logo";
-
+import GroupIcon from '@mui/icons-material/Group';
 interface NavigationItem {
   icon: React.ReactNode;
   label: string;
@@ -87,7 +87,13 @@ const navigationItems: NavigationItem[] = [
   { icon: <Task />, label: "Task Template", path: "/tasks" },
   { icon: <Payments />, label: "Invoice", path: "/invoice" },
   { icon: <Analytics />, label: "Analysis Report", path: "/analytics" },
-  { icon: <Settings />, label: "Setting", path: "/settings", children: [{ icon: <Staff />, label: "Staff", path: "/staff" }]},
+  {
+    icon: <Settings />, label: "Setting", path: "",
+    children: [
+      { icon: <GroupIcon />, label: "Customer", path: "/customer" },
+      { icon: <Staff />, label: "Staff", path: "/staff" }
+    ],
+  },
 ];
 
 const NavigationContent: React.FC = () => {
@@ -95,16 +101,16 @@ const NavigationContent: React.FC = () => {
   const pathname = usePathname();
 
   const [openItems, setOpenItems] = React.useState<string[]>([]);
-  const toggleItem = (path: string) => {
+  const toggleItem = (label: string) => {
     setOpenItems((prevOpenItems) =>
-      prevOpenItems.includes(path)
-        ? prevOpenItems.filter((item) => item !== path)
-        : [...prevOpenItems, path],
+      prevOpenItems.includes(label)
+        ? prevOpenItems.filter((item) => item !== label)
+        : [...prevOpenItems, label],
     );
   };
 
   const renderNavigationItem = (item: NavigationItem) => {
-    const isOpen = openItems.includes(item.path);
+    const isOpen = openItems.includes(item.label);
 
     return (
       <Box
@@ -114,8 +120,8 @@ const NavigationContent: React.FC = () => {
         sx={{ textDecoration: "none", color: "inherit" }}
       >
         <ListItemButton
-          selected={pathname.includes(item.path)}
-          onClick={() => item.children && toggleItem(item.path)}
+          selected={pathname.includes(item.label)}
+          onClick={() => item.children && toggleItem(item.label)}
         >
           <ListItemIcon>{item.icon}</ListItemIcon>
           <ListItemText primary={t(item.label)} />