🐛 [BUG]侧边菜单布局下折叠菜单后，用户和语言没有折叠

[jiabochao]

🐛 bug 描述

侧边菜单布局下折叠菜单后，用户和语言没有折叠

📷 复现步骤 | Recurrence steps

1. 切换侧边菜单布局

2. 折叠菜单

3. 出现未折叠部分遮挡内容

🏞 期望结果 | Expected results

💻 复现代码 | Recurrence code

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

🌟 可能的解决方案

可以通过修改 src/layouts/BasicLayout.tsx 文件，将未折叠的部分添加到侧边菜单中:

// src/layouts/BasicLayout.tsx

import React from 'react';
import { formatMessage } from 'umi-plugin-locale';
import GlobalHeader from '@/components/GlobalHeader';
import SiderMenu from '@/components/SiderMenu';
import logo from '../assets/logo.svg';
import './BasicLayout.less';

const menuData = [
  {
    name: formatMessage({ id: 'menu.home' }),
    icon: 'home',
    path: 'home',
  },
  {
    name: formatMessage({ id: 'menu.dashboard' }),
    icon: 'dashboard',
    path: 'dashboard',
    children: [
      {
        name: formatMessage({ id: 'menu.analysis' }),
        path: 'analysis',
      },
      {
        name: formatMessage({ id: 'menu.monitor' }),
        path: 'monitor',
      },
      {
        name: formatMessage({ id: 'menu.workplace' }),
        path: 'workplace',
      },
    ],
  },
  {
    name: formatMessage({ id: 'menu.form' }),
    icon: 'form',
    path: 'form',
    children: [
      {
        name: formatMessage({ id: 'menu.basic-form' }),
        path: 'basic-form',
      },
      {
        name: formatMessage({ id: 'menu.step-form' }),
        path: 'step-form',
      },
      {
        name: formatMessage({ id: 'menu.advance-form' }),
        path: 'advance-form',
      },
    ],
  },
];

interface BasicLayoutProps {
  children: any;
}

const BasicLayout: React.FunctionComponent<BasicLayoutProps> = props => {
  const { children } = props;

  return (
    <div className="basic-layout">
      <GlobalHeader />
      <div className="basic-layout-container">
        <div className="basic-layout-content">
          <div className="basic-layout-topbar">
            <a href="#!">
              <img src={logo} alt="logo" />
              <h2>{formatMessage({ id: 'app.title' })}</h2>
            </a>
          </div>
          <SiderMenu menuData={menuData} />
          <div className="basic-layout-main">{children}</div>
        </div>
      </div>
    </div>
  );
};

export default BasicLayout;

这样，在折叠菜单后，未折叠的部分也将会出现在侧边菜单中，不会遮挡内容。

详细的解决方案文档可以参考：Ant Design Pro 侧边菜单处理