75 lines
1.6 KiB
TypeScript
75 lines
1.6 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 type { NavigationItem } from "../model";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface NavigationItemProps {
|
|
item: NavigationItem;
|
|
open: boolean;
|
|
}
|
|
|
|
export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
|
|
item,
|
|
open,
|
|
}) => {
|
|
const Icon = item.icon;
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<ListItem
|
|
onClick={() => navigate(item.path)}
|
|
disablePadding
|
|
sx={{ display: "block" }}
|
|
>
|
|
<ListItemButton
|
|
sx={[
|
|
{
|
|
minHeight: 48,
|
|
px: 2.5,
|
|
},
|
|
open
|
|
? {
|
|
justifyContent: "initial",
|
|
}
|
|
: {
|
|
justifyContent: "center",
|
|
},
|
|
]}
|
|
>
|
|
<ListItemIcon
|
|
sx={[
|
|
{
|
|
minWidth: 0,
|
|
justifyContent: "center",
|
|
},
|
|
open
|
|
? {
|
|
mr: 3,
|
|
}
|
|
: {
|
|
mr: "auto",
|
|
},
|
|
]}
|
|
>
|
|
<Icon />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={item.label}
|
|
sx={[
|
|
open
|
|
? {
|
|
opacity: 1,
|
|
}
|
|
: {
|
|
opacity: 0,
|
|
},
|
|
]}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
);
|
|
};
|