|  |  |  | 
|---|
|  |  |  | 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}  */} | 
|---|
|  |  |  | {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> | 
|---|