| | |
| | | import * as React from 'react'; |
| | | import { ReactElement, ReactNode } from 'react'; |
| | | import { |
| | | Box, |
| | | List, |
| | | MenuItem, |
| | | ListItemIcon, |
| | |
| | | } 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' }}> |
| | | {isOpen ? <ExpandMore /> : icon} |
| | | </ListItemIcon> |
| | | <Typography variant="inherit" color="textSecondary" sx={{ ml: 1, display: 'flex', alignItems: 'center' }}> |
| | | {translate(name)} |
| | | </Typography> |
| | | <MenuItem dense={dense} onClick={handleToggle} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
| | | <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}> |
| | | <ListItemIcon sx={{ minWidth: 40, color: 'text.secondary', display: 'flex', alignItems: 'center' }}> |
| | | {icon} |
| | | </ListItemIcon> |
| | | <Typography variant="inherit" color="textSecondary" sx={{ ml: 1, display: 'flex', alignItems: 'center' }}> |
| | | {translate(name)} |
| | | </Typography> |
| | | </Box> |
| | | <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 24 }}> |
| | | {isOpen ? <KeyboardArrowDownIcon fontSize="small" sx={{color: 'text.secondary'}} /> : <KeyboardArrowRightIcon fontSize="small" sx={{color: 'text.secondary'}} />} |
| | | </Box> |
| | | </MenuItem> |
| | | ); |
| | | |
| | |
| | | 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), |
| | | }, |
| | | }} |
| | | // 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), |
| | | // }, |
| | | // // 显示二级菜单的icon |
| | | // '& .RaMenuItemLink-icon': { |
| | | // visibility: 'visible !important', |
| | | // minWidth: '24px' |
| | | // } |
| | | // }} |
| | | > |
| | | {children} |
| | | </List> |