62 lines
1.2 KiB
TypeScript
Executable File
62 lines
1.2 KiB
TypeScript
Executable File
import {
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
|
|
interface Props {
|
|
icon: any;
|
|
text: string;
|
|
isActive?: boolean;
|
|
disabled?: boolean;
|
|
isCollapsed: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export default function MenuItem({
|
|
icon,
|
|
text,
|
|
isActive = false,
|
|
isCollapsed,
|
|
onClick,
|
|
disabled = false,
|
|
}: Props) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<ListItem
|
|
sx={{
|
|
px: 0,
|
|
pt: "5px",
|
|
pb: "3px",
|
|
whiteSpace: "break-spaces"
|
|
}}
|
|
>
|
|
<ListItemButton
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
sx={{
|
|
py: "4px",
|
|
gap: "14px",
|
|
backgroundColor: isActive ? theme.palette.darkPurple.main : undefined,
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<ListItemIcon sx={{ minWidth: 0 }}>{icon}</ListItemIcon>
|
|
{!isCollapsed && (
|
|
<ListItemText
|
|
primary={text}
|
|
primaryTypographyProps={{
|
|
fontSize: "16px",
|
|
lineHeight: "20px",
|
|
color: "white",
|
|
}}
|
|
/>
|
|
)}
|
|
</ListItemButton>
|
|
</ListItem>
|
|
);
|
|
}
|