feat: Add edit
pages with cache
This commit is contained in:
@ -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";
|
||||
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user