fix(proxio): dropdown menu overlap and blur behavior (notionnext-org#3937)

Partial merge from PR notionnext-org#3937: MenuItem.js and MenuList.js only; excludes blog.config, theme config, and yarn.lock.

Made-with: Cursor

Author: ProcessMonitor

themes/proxio/components/MenuItem.js

@@ -7,17 +7,23 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const MenuItem = ({ link }) => {
+export const MenuItem = ({ link, isOpen, toggleOpen }) => {
   const hasSubMenu = link?.subMenus?.length > 0
   const router = useRouter()
 
   // 管理子菜单的展开状态
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)
 
   const toggleSubMenu = () => {
-    setIsSubMenuOpen(prev => !prev) // 切换子菜单状态
+    if (toggleOpen) {
+      toggleOpen()
+    } else {
+      setIsSubMenuOpen(prev => !prev) // 切换子菜单状态
+    }
   }
 
+  const open = isOpen !== undefined ? isOpen : isSubMenuOpen
+
   return (
     <>
       {/* 普通 MenuItem */}
@@ -66,7 +72,7 @@ export const MenuItem = ({ link }) => {
           {/* 子菜单 */}
           <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
+              open
                 ? 'block opacity-100 visible'
                 : 'hidden opacity-0 invisible'
             }`}>

themes/proxio/components/MenuList.js

@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
 import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { MenuItem } from './MenuItem'
 
 /**
@@ -13,7 +13,10 @@ export const MenuList = props => {
   const { locale } = useGlobal()
 
   const [showMenu, setShowMenu] = useState(false) // 控制菜单展开/收起状态
+  const [openSubMenuIdx, setOpenSubMenuIdx] = useState(null) // 控制哪个子菜单处于展开状态
   const router = useRouter()
+  const menuRef = useRef(null) // 监听点击外部区域
+
 
   let links = [
     {
@@ -57,14 +60,28 @@ export const MenuList = props => {
 
   useEffect(() => {
     setShowMenu(false)
+    setOpenSubMenuIdx(null)
   }, [router])
 
+  // 监听点击外部区域，收起子菜单
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setOpenSubMenuIdx(null)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
   if (!links || links.length === 0) {
     return null
   }
 
   return (
-    <div>
+    <div ref={menuRef}>
       {/* 移动端菜单切换按钮 */}
       <button
         id='navbarToggler'
@@ -84,7 +101,12 @@ export const MenuList = props => {
         }`}>
         <ul className='blcok lg:flex 2xl:ml-20'>
           {links?.map((link, index) => (
-            <MenuItem key={index} link={link} />
+            <MenuItem 
+              key={index} 
+              link={link} 
+              isOpen={openSubMenuIdx === index}
+              toggleOpen={() => setOpenSubMenuIdx(openSubMenuIdx === index ? null : index)}
+            />
           ))}
         </ul>
       </nav>