1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| import * as React from 'react';
| import { ReactElement, ReactNode } from 'react';
| import {
| List,
| MenuItem,
| ListItemIcon,
| Typography,
| Collapse,
| Tooltip,
| } from '@mui/material';
| import ExpandMore from '@mui/icons-material/ExpandMore';
| import { useTranslate, useSidebarState } from 'react-admin';
| import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
| import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
| const SubMenu = (props) => {
| const { handleToggle, isOpen, name, icon, children, dense } = props;
| const translate = useTranslate();
| const [sidebarIsOpen] = useSidebarState();
|
| const header = (
| <MenuItem dense={dense} onClick={handleToggle} sx={{ display: 'flex', alignItems: 'center' }}>
| <ListItemIcon sx={{ minWidth: 40, color: 'text.secondary', display: 'flex', alignItems: 'center' }}>
| {icon ? icon : isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
| </ListItemIcon>
| <Typography variant="inherit" color="textSecondary" sx={{ ml: 1, display: 'flex', alignItems: 'center' }}>
| {translate(name)}
| </Typography>
| </MenuItem>
| );
|
| return (
| <div>
| {sidebarIsOpen || isOpen ? (
| header
| ) : (
| <Tooltip title={translate(name)} placement="right">
| {header}
| </Tooltip>
| )}
| <Collapse in={isOpen} timeout="auto" unmountOnExit>
| <List
| dense={dense}
| component="div"
| disablePadding
| sx={{
| '& .MuiMenuItem-root': {
| transition:
| 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
| paddingLeft: theme =>
| sidebarIsOpen
| ? theme.spacing(4)
| : theme.spacing(2),
| },
| }}
| >
| {children}
| </List>
| </Collapse>
| </div>
| );
| };
|
| export default SubMenu;
|
|
