Antd Menu窗口缩放后无法恢复原状态问题求助

问题现象 #

基于Antd Layout实现header-content-footer布局时，窗口从大屏缩小到小屏，Menu可正常折叠；但从小屏重新放大到大屏时，Menu无法恢复到原始的尺寸与位置。

问题根源 #

当前代码中Navigation组件的mode属性被固定为"horizontal"，未根据窗口尺寸变化动态切换。小屏时触发的折叠逻辑没有在窗口放大后反向触发，导致菜单状态停留在折叠模式。

解决方案 #

通过监听窗口尺寸变化，动态切换Menu的显示模式与折叠状态，具体实现如下：

1. 改造Navigation组件，添加响应式逻辑 #

import { useState, useEffect } from 'react';
import { Menu } from 'antd';
import Link from 'next/link'; // 根据项目路由方案调整，如用react-router则替换为对应Link

const Navigation = ({ theme }) => {
  const [isMobile, setIsMobile] = useState(false);
  const [collapsed, setCollapsed] = useState(false);

  // 监听窗口尺寸变化
  useEffect(() => {
    const checkScreenSize = () => {
      const mobileBreakpoint = 768; // 自定义小屏阈值，可根据需求调整
      const currentIsMobile = window.innerWidth < mobileBreakpoint;
      
      // 从移动端切回大屏时，自动展开菜单
      if (!currentIsMobile && isMobile) {
        setCollapsed(false);
      }
      setIsMobile(currentIsMobile);
    };

    // 初始化时执行一次
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, [isMobile]);

  const toggleCollapse = () => setCollapsed(!collapsed);

  return (
    <>
      {/* 移动端显示折叠/展开按钮 */}
      {isMobile && (
        <button onClick={toggleCollapse} className="mr-3">
          {collapsed ? '展开菜单' : '折叠菜单'}
        </button>
      )}
      <Menu
        className="select-none"
        theme={theme}
        defaultSelectedKeys={[router.asPath]}
        mode={isMobile ? 'inline' : 'horizontal'} // 动态切换菜单模式
        collapsed={collapsed} // 控制折叠状态
      >
        {navigation.map(({ title, icon, path }) => (
          <Menu.Item key={path} icon={icon}>
            <Link href={path}>{title}</Link>
          </Menu.Item>
        ))}
      </Menu>
    </>
  );
};

export default Navigation;

2. 保持Layout结构不变 #

原Header布局无需额外修改，确保容器可容纳动态变化的菜单元素即可：

import { Layout } from 'antd';
const { Header } = Layout;

// 原Layout代码
<AntdLayout className={className}>
  <Header>
    <div className="flex items-center px-4 h-16">           
      <Navigation theme="dark" />
    </div>
  </Header>
  <main
    className="flex flex-col container min-h-auto my-10 mx-auto px-5"
    style={fullWidth && { maxWidth: '90%', maxHeight: '90%' }}
  >
    <div>{children}</div>
  </main>
  {footer && (footer === true ? <Footer /> : footer)}
</AntdLayout>

核心逻辑说明 #

• 通过useEffect监听窗口resize事件，实时判断当前屏幕是否为移动端。
• 当屏幕从移动端切换到大屏时，自动重置collapsed状态为false，强制菜单展开。
• 动态设置Menu的mode属性：移动端使用inline模式配合折叠功能，大屏使用horizontal模式恢复横向布局。

内容的提问来源于stack exchange，提问作者Drashti Kheni