114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
import * as React from "react";
|
|
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";
|
|
|
|
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 disablePadding sx={{ display: "block" }}>
|
|
<ListItemButton
|
|
onClick={handleClick}
|
|
sx={[
|
|
{
|
|
minHeight: 48,
|
|
px: 2.5,
|
|
},
|
|
open
|
|
? {
|
|
justifyContent: "initial",
|
|
}
|
|
: {
|
|
justifyContent: "center",
|
|
},
|
|
isNested && {
|
|
pl: 4,
|
|
},
|
|
]}
|
|
>
|
|
<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>
|
|
)}
|
|
</>
|
|
);
|
|
};
|