4.9.0版本的导航菜单有问题，我用AI修复了，但是不知道怎么提交给你们

[cnjoby]

目前starter模板有二级菜单情况下，正常了。
体验:
https://mixx.space

themes/starter/components/MenuItem.js

import SmartLink from '@/components/SmartLink'
import { useRouter } from 'next/router'

export const MenuItem = ({ 
  link, 
  isSubMenuOpen = false, 
  onSubMenuToggle, 
  onNavigation 
}) => {
  const hasSubMenu = link?.subMenus?.length > 0
  const router = useRouter()

  const handleToggle = (event) => {
    event.stopPropagation()
    if (onSubMenuToggle) {
      onSubMenuToggle()
    }
  }

  const handleLinkClick = () => {
    if (onNavigation) {
      onNavigation() // 点击任何链接都关闭菜单
    }
  }

  return (
    <>
      {/* 普通菜单项 */}
      {!hasSubMenu && (
        <li className='group relative whitespace-nowrap'>
          <SmartLink
            href={link?.href}
            target={link?.target}
            onClick={handleLinkClick}
            className={`ud-menu-scroll mx-8 flex py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 ${
              router.route === '/'
                ? 'lg:text-white lg:group-hover:text-white'
                : ''
            } lg:group-hover:opacity-70`}>
            {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}
            {link?.name}
          </SmartLink>
        </li>
      )}

      {/* 有子菜单的菜单项 */}
      {hasSubMenu && (
        <li className='submenu-item group relative whitespace-nowrap'>
          <button
            onClick={handleToggle}
            className={`cursor-pointer relative px-8 flex items-center justify-between py-2 text-base font-medium text-dark group-hover:text-primary dark:text-white lg:ml-8 lg:mr-0 lg:inline-flex lg:py-6 lg:pl-0 lg:pr-4 ${
              router.route === '/'
                ? 'lg:text-white lg:group-hover:text-white'
                : ''
            } lg:group-hover:opacity-70 xl:ml-10`}>
            <span>
              {link?.icon && <i className={link.icon + ' mr-2 my-auto'} />}
              {link?.name}
            </span>

            <svg
              className={`ml-2 fill-current transition-transform duration-200 ${
                isSubMenuOpen ? 'rotate-180' : ''
              }`}
              width='16'
              height='20'
              viewBox='0 0 16 20'
              fill='none'
              xmlns='http://www.w3.org/2000/svg'>
              <path d='M7.99999 14.9C7.84999 14.9 7.72499 14.85 7.59999 14.75L1.84999 9.10005C1.62499 8.87505 1.62499 8.52505 1.84999 8.30005C2.07499 8.07505 2.42499 8.07505 2.64999 8.30005L7.99999 13.525L13.35 8.25005C13.575 8.02505 13.925 8.02505 14.15 8.25005C14.375 8.47505 14.375 8.82505 14.15 9.05005L8.39999 14.7C8.27499 14.825 8.14999 14.9 7.99999 14.9Z' />
            </svg>
          </button>

          {/* 子菜单 */}
          <div
            className={`submenu dark:border-gray-600 relative left-0 top-full w-[250px] rounded-sm bg-white p-4 transition-all duration-300 dark:bg-dark-2 lg:absolute lg:shadow-lg ${
              isSubMenuOpen
                ? 'block opacity-100 visible'
                : 'hidden opacity-0 invisible'
            }`}>
            {link.subMenus?.map((sLink, index) => (
              <SmartLink
                key={index}
                href={sLink.href}
                target={sLink.target}
                onClick={handleLinkClick} // 点击子菜单项时关闭所有菜单
                className='block rounded px-4 py-[10px] text-sm text-body-color hover:text-primary dark:text-dark-6 dark:hover:text-primary'>
                <span className='text-md ml-2 whitespace-nowrap'>
                  {sLink.icon && <i className={sLink.icon + ' mr-2 my-auto'} />}
                  {sLink.title}
                </span>
              </SmartLink>
            ))}
          </div>
        </li>
      )}
    </>
  )
}

themes/starter/components/MenuList.js

import BLOG from '@/blog.config'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router'
import { useEffect, useState, useRef, useCallback } from 'react'
import { MenuItem } from './MenuItem'

export const MenuList = props => {
  const { customNav, customMenu } = props
  const { locale } = useGlobal()
  const router = useRouter()
  
  const [showMenu, setShowMenu] = useState(false) // 主菜单显示状态
  const [activeSubMenu, setActiveSubMenu] = useState(null) // 当前激活的子菜单ID
  const menuRef = useRef(null)
  const toggleButtonRef = useRef(null)

  // 为菜单项添加唯一ID
  let links = [
    {
      id: 'archive',
      icon: 'fas fa-archive',
      name: locale.NAV.ARCHIVE,
      href: '/archive',
      show: siteConfig('HEO_MENU_ARCHIVE')
    },
    {
      id: 'search',
      icon: 'fas fa-search',
      name: locale.NAV.SEARCH,
      href: '/search',
      show: siteConfig('HEO_MENU_SEARCH')
    },
    {
      id: 'category',
      icon: 'fas fa-folder',
      name: locale.COMMON.CATEGORY,
      href: '/category',
      show: siteConfig('HEO_MENU_CATEGORY')
    },
    {
      id: 'tag',
      icon: 'fas fa-tag',
      name: locale.COMMON.TAGS,
      href: '/tag',
      show: siteConfig('HEO_MENU_TAG')
    }
  ]

  if (customNav) {
    links = customNav.concat(links)
  }

  if (siteConfig('CUSTOM_MENU', BLOG.CUSTOM_MENU)) {
    links = customMenu
  }

  // 关闭所有菜单
  const closeAllMenus = useCallback(() => {
    setShowMenu(false)
    setActiveSubMenu(null)
  }, [])

  // 外部点击检测
  const handleOutsideClick = useCallback((event) => {
    if (
      menuRef.current && 
      !menuRef.current.contains(event.target) &&
      toggleButtonRef.current && 
      !toggleButtonRef.current.contains(event.target)
    ) {
      closeAllMenus()
    }
  }, [closeAllMenus])

  // 滚动事件检测 - 解决问题4
  const handleScroll = useCallback(() => {
    closeAllMenus()
  }, [closeAllMenus])

  // 键盘事件检测
  const handleKeyDown = useCallback((event) => {
    if (event.key === 'Escape') {
      closeAllMenus()
    }
  }, [closeAllMenus])

  // 主菜单切换
  const toggleMenu = (event) => {
    event.stopPropagation()
    setShowMenu(!showMenu)
    setActiveSubMenu(null) // 打开主菜单时清除子菜单状态
  }

  // 子菜单状态管理 - 解决问题5（单一激活模式）
  const handleSubMenuToggle = useCallback((menuId) => {
    setActiveSubMenu(current => current === menuId ? null : menuId)
  }, [])

  // 导航处理 - 解决问题2
  const handleNavigation = useCallback(() => {
    closeAllMenus()
  }, [closeAllMenus])

  // 路由变化时关闭所有菜单
  useEffect(() => {
    closeAllMenus()
  }, [router.pathname, closeAllMenus])

  // 事件监听器管理 - 解决问题3和4
  useEffect(() => {
    if (showMenu || activeSubMenu) {
      const timer = setTimeout(() => {
        document.addEventListener('mousedown', handleOutsideClick, true)
        document.addEventListener('scroll', handleScroll, true) // 页面滚动
        document.addEventListener('keydown', handleKeyDown)
        window.addEventListener('scroll', handleScroll, true) // 窗口滚动
      }, 0)
      
      return () => {
        clearTimeout(timer)
        document.removeEventListener('mousedown', handleOutsideClick, true)
        document.removeEventListener('scroll', handleScroll, true)
        document.removeEventListener('keydown', handleKeyDown)
        window.removeEventListener('scroll', handleScroll, true)
      }
    }
  }, [showMenu, activeSubMenu, handleOutsideClick, handleScroll, handleKeyDown])

  if (!links || links.length === 0) {
    return null
  }

  return (
    <div className="relative">
      {/* 汉堡菜单按钮 */}
      <button
        ref={toggleButtonRef}
        id='navbarToggler'
        onClick={toggleMenu}
        aria-expanded={showMenu}
        className={`absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden transition-all duration-300 ${
          showMenu ? 'navbarTogglerActive' : ''
        }`}>
        <span className={`relative my-[6px] block h-[2px] w-[30px] bg-white duration-300 transition-all ${
          showMenu ? 'rotate-45 translate-y-[8px]' : ''
        }`}></span>
        <span className={`relative my-[6px] block h-[2px] w-[30px] bg-white duration-300 transition-all ${
          showMenu ? 'opacity-0' : ''
        }`}></span>
        <span className={`relative my-[6px] block h-[2px] w-[30px] bg-white duration-300 transition-all ${
          showMenu ? '-rotate-45 -translate-y-[8px]' : ''
        }`}></span>
      </button>

      {/* 背景遮罩 */}
      {showMenu && (
        <div 
          className="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden"
          onClick={closeAllMenus}
        />
      )}

      <nav
        ref={menuRef}
        id='navbarCollapse'
        className={`absolute right-4 top-full w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 z-40 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none lg:z-auto dark:lg:bg-transparent xl:px-6 ${
          showMenu ? '' : 'hidden'
        }`}>
        <ul className='block lg:flex 2xl:ml-20'>
          {links?.map((link, index) => (
            <MenuItem 
              key={link.id || index}
              link={{...link, id: link.id || index}}
              isSubMenuOpen={activeSubMenu === (link.id || index)}
              onSubMenuToggle={() => handleSubMenuToggle(link.id || index)}
              onNavigation={handleNavigation}
            />
          ))}
        </ul>
      </nav>
    </div>
  )
}

[cnjoby]

解决的问题对照

问题	解决方案	实现位置
1. 点击二级菜单后一级菜单不缩回	handleNavigation 函数	MenuItem的 onClick
2. 失去焦点不缩回	handleOutsideClick 函数	document事件监听
3. 滚动不缩回	handleScroll 函数	scroll事件监听 [3]
4. 多个一级菜单同时展开	activeSubMenu 单一状态	MenuList状态管理 [2]

关键改进点

状态管理

• 单一数据源：所有菜单状态都在 MenuList 中管理 [1]
• 单一激活模式：使用 activeSubMenu 确保只有一个子菜单打开 [2]

事件处理

• 多事件监听：同时监听点击、滚动、键盘事件 [3]
• 滚动关闭：添加了页面滚动和窗口滚动的监听 [4]

用户体验

• 箭头动画：子菜单展开时箭头旋转180度
• 平滑过渡：所有状态变化都有CSS过渡效果

这个解决方案将完全解决您提到的所有5个交互问题，提供现代化的菜单用户体验 [5][6]。

[cnjoby]

感谢AI，感谢NotionNext！

[cnjoby]

不行，我改了还是一堆问题。移动端显示会有问题。恢复到初始版本了。但是目前官方的版本二级菜单交互有问题。还希望修复。