84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
|
import { FC, PropsWithChildren, Fragment, ReactElement } from "react";
|
||
|
|
import ExpandMore from "@material-ui/icons/ExpandMore";
|
||
|
|
import List from "@material-ui/core/List";
|
||
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
||
|
|
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
||
|
|
import Typography from "@material-ui/core/Typography";
|
||
|
|
import Collapse from "@material-ui/core/Collapse";
|
||
|
|
import Tooltip from "@material-ui/core/Tooltip";
|
||
|
|
import { makeStyles } from "@material-ui/core/styles";
|
||
|
|
import { useTranslate } from "react-admin";
|
||
|
|
|
||
|
|
const useStyles = makeStyles((theme) => ({
|
||
|
|
icon: { minWidth: theme.spacing(5) },
|
||
|
|
sidebarIsOpen: {
|
||
|
|
"& a": {
|
||
|
|
paddingLeft: theme.spacing(4),
|
||
|
|
transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
sidebarIsClosed: {
|
||
|
|
"& a": {
|
||
|
|
paddingLeft: theme.spacing(2),
|
||
|
|
transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
type SubMenuProps = PropsWithChildren<{
|
||
|
|
dense: boolean;
|
||
|
|
handleToggle: () => void;
|
||
|
|
icon: ReactElement;
|
||
|
|
isOpen: boolean;
|
||
|
|
name: string;
|
||
|
|
sidebarIsOpen: boolean;
|
||
|
|
}>;
|
||
|
|
|
||
|
|
export const SubMenu: FC<SubMenuProps> = ({
|
||
|
|
handleToggle,
|
||
|
|
sidebarIsOpen,
|
||
|
|
isOpen,
|
||
|
|
name,
|
||
|
|
icon,
|
||
|
|
children,
|
||
|
|
dense,
|
||
|
|
}) => {
|
||
|
|
const translate = useTranslate();
|
||
|
|
const classes = useStyles();
|
||
|
|
|
||
|
|
const header = (
|
||
|
|
<MenuItem dense={dense} button onClick={handleToggle}>
|
||
|
|
<ListItemIcon className={classes.icon}>
|
||
|
|
{isOpen ? <ExpandMore /> : icon}
|
||
|
|
</ListItemIcon>
|
||
|
|
<Typography variant="inherit" color="textSecondary">
|
||
|
|
{translate(name)}
|
||
|
|
</Typography>
|
||
|
|
</MenuItem>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
{sidebarIsOpen || isOpen ? (
|
||
|
|
header
|
||
|
|
) : (
|
||
|
|
<Tooltip title={translate(name)} placement="right">
|
||
|
|
{header}
|
||
|
|
</Tooltip>
|
||
|
|
)}
|
||
|
|
<Collapse in={isOpen} timeout="auto" unmountOnExit>
|
||
|
|
<List
|
||
|
|
dense={dense}
|
||
|
|
component="div"
|
||
|
|
disablePadding
|
||
|
|
className={
|
||
|
|
sidebarIsOpen ? classes.sidebarIsOpen : classes.sidebarIsClosed
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</List>
|
||
|
|
</Collapse>
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
};
|