feat: Add edit pages with cache

src/entities/navigation/model/index.ts

@@ -4,7 +4,9 @@ export interface NavigationItem {
   id: string;
   label: string;
   icon: LucideIcon;
-  path: string;
+  path?: string;
+  onClick?: () => void;
+  nestedItems?: NavigationItem[];
 }
 
 export type NavigationSection = "primary" | "secondary";

src/entities/navigation/ui/index.tsx

@@ -3,6 +3,10 @@ import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import Collapse from "@mui/material/Collapse";
+import List from "@mui/material/List";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import type { NavigationItem } from "../model";
 import { useNavigate } from "react-router-dom";
 
@@ -10,73 +14,100 @@ interface NavigationItemProps {
   item: NavigationItem;
   open: boolean;
   onClick?: () => void;
+  isNested?: boolean;
 }
 
 export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
   item,
   open,
   onClick,
+  isNested = false,
 }) => {
   const Icon = item.icon;
   const navigate = useNavigate();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const handleClick = () => {
+    if (item.nestedItems) {
+      setIsExpanded(!isExpanded);
+    } else if (onClick) {
+      onClick();
+    } else if (item.path) {
+      navigate(item.path);
+    }
+  };
 
   return (
-    <ListItem
-      onClick={() => {
-        if (onClick) {
-          onClick();
-        } else {
-          navigate(item.path);
-        }
-      }}
-      disablePadding
-      sx={{ display: "block" }}
-    >
-      <ListItemButton
-        sx={[
-          {
-            minHeight: 48,
-            px: 2.5,
-          },
-          open
-            ? {
-                justifyContent: "initial",
-              }
-            : {
-                justifyContent: "center",
-              },
-        ]}
-      >
-        <ListItemIcon
+    <>
+      <ListItem disablePadding sx={{ display: "block" }}>
+        <ListItemButton
+          onClick={handleClick}
           sx={[
             {
-              minWidth: 0,
-              justifyContent: "center",
+              minHeight: 48,
+              px: 2.5,
             },
             open
               ? {
-                  mr: 3,
+                  justifyContent: "initial",
                 }
               : {
-                  mr: "auto",
+                  justifyContent: "center",
                 },
+            isNested && {
+              pl: 4,
+            },
           ]}
         >
-          <Icon />
-        </ListItemIcon>
-        <ListItemText
-          primary={item.label}
-          sx={[
-            open
-              ? {
-                  opacity: 1,
-                }
-              : {
-                  opacity: 0,
-                },
-          ]}
-        />
-      </ListItemButton>
-    </ListItem>
+          <ListItemIcon
+            sx={[
+              {
+                minWidth: 0,
+                justifyContent: "center",
+              },
+              open
+                ? {
+                    mr: 3,
+                  }
+                : {
+                    mr: "auto",
+                  },
+            ]}
+          >
+            <Icon />
+          </ListItemIcon>
+          <ListItemText
+            primary={item.label}
+            sx={[
+              open
+                ? {
+                    opacity: 1,
+                  }
+                : {
+                    opacity: 0,
+                  },
+            ]}
+          />
+          {item.nestedItems &&
+            open &&
+            (isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />)}
+        </ListItemButton>
+      </ListItem>
+      {item.nestedItems && (
+        <Collapse in={isExpanded && open} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            {item.nestedItems.map((nestedItem) => (
+              <NavigationItemComponent
+                key={nestedItem.id}
+                item={nestedItem}
+                open={open}
+                onClick={nestedItem.onClick}
+                isNested={true}
+              />
+            ))}
+          </List>
+        </Collapse>
+      )}
+    </>
   );
 };