|  |  | 
 |  |  | import * as React from 'react'; | 
 |  |  | import { ReactElement, ReactNode } from 'react'; | 
 |  |  | import { | 
 |  |  |     Box, | 
 |  |  |     List, | 
 |  |  |     MenuItem, | 
 |  |  |     ListItemIcon, | 
 |  |  | 
 |  |  | 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}  */} | 
 |  |  |                 {isOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />} | 
 |  |  |             </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> |