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 = ({ 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 ( <> {item.nestedItems && open && (isExpanded ? : )} {item.nestedItems && ( {item.nestedItems.map((nestedItem) => ( ))} )} ); };