在 react-admin 中创建可折叠的左侧菜单

如何解决在 react-admin 中创建可折叠的左侧菜单

我希望能够将 react admin 的左侧菜单从折叠状态切换为非折叠状态。

我希望非折叠菜单显示图标和资源名称。

另一方面，我希望折叠菜单仅显示资源上的图标。

谁能给我一个关于如何做到这一点的提示？

这就是我的自定义菜单现在的样子：

const MyLayout = (props) => <Layout {...props} menu={Menu} appBar={MyAppBar} />;

const Menu = ({ onMenuClick,logout }) => {
  const classes = useStyles();
  const open = useSelector((state) => state.admin.ui.sidebarOpen);
  const resources = useSelector(getResources);
  return (
    <div className={classes.menu}>
      {open && <logo type={'main'} activateEgg className={classes.logo} />}
      {resources.map(
        (resource) =>
          resource.name !== 'users' &&
            <MenuItemLink
              className={classes.menuItem}
              key={resource.name}
              to={`/${resource.name}`}
              primaryText={
                (resource.options && resource.options.label) || resource.name
              }
              leftIcon={
                resource.name === 'cashkicks' ? (
                  <Icon
                    name={IconName.Dollar}
                    type={IconType.outlined}
                    size={20}
                  />
                ) : (
                  <Icon
                    name={IconName.DesktopComputer}
                    type={IconType.outlined}
                    size={20}
                  />
                )
              }
              onClick={onMenuClick}
              sidebarIsOpen={open}
            />
          )
      )}
      />
    </div>
  );
};