- {link.subMenus.map((sLink, index) => {
- return (
-
- {/* 子菜单SubMenuItem */}
-
- {link?.icon && (
-
- )}{' '}
- {sLink.title}
-
-
- )
- })}
+ {/* 子菜单 */}
+
+ {link.subMenus.map((sLink, index) => (
+
+ {/* 子菜单 SubMenuItem */}
+
+ {link?.icon && }{' '}
+ {sLink.title}
+
+
+ ))}
)}
diff --git a/themes/starter/components/MenuList.js b/themes/starter/components/MenuList.js
index bbfb7925c19..0352e8b2a78 100644
--- a/themes/starter/components/MenuList.js
+++ b/themes/starter/components/MenuList.js
@@ -1,7 +1,10 @@
+import BLOG from '@/blog.config'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
-import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
import { MenuItem } from './MenuItem'
+
/**
* 响应式 折叠菜单
*/
@@ -9,6 +12,9 @@ export const MenuList = props => {
const { customNav, customMenu } = props
const { locale } = useGlobal()
+ const [showMenu, setShowMenu] = useState(false) // 控制菜单展开/收起状态
+ const router = useRouter()
+
let links = [
{
icon: 'fas fa-archive',
@@ -40,68 +46,48 @@ export const MenuList = props => {
links = customNav.concat(links)
}
- useEffect(() => {
- // ===== responsive navbar
- const navbarToggler = document.querySelector('#navbarToggler')
- const navbarCollapse = document.querySelector('#navbarCollapse')
-
- // 点击弹出菜单
- navbarToggler?.addEventListener('click', () => {
- navbarToggler?.classList.toggle('navbarTogglerActive')
- navbarCollapse?.classList.toggle('hidden')
- })
-
- //= ==== close navbar-collapse when a clicked
- document
- .querySelectorAll('#navbarCollapse ul li:not(.submenu-item) a')
- .forEach(e =>
- e.addEventListener('click', () => {
- navbarToggler?.classList.remove('navbarTogglerActive')
- navbarCollapse?.classList.add('hidden')
- })
- )
-
- // ===== Sub-menu
- const submenuItems = document.querySelectorAll('.submenu-item')
- submenuItems.forEach(el => {
- el.querySelector('a')?.addEventListener('click', () => {
- el.querySelector('.submenu')?.classList.toggle('hidden')
- })
- })
- }, [])
-
// 如果 开启自定义菜单，则覆盖Page生成的菜单
- if (siteConfig('CUSTOM_MENU')) {
+ if (siteConfig('CUSTOM_MENU', BLOG.CUSTOM_MENU)) {
links = customMenu
}
- // if (!links || links.length === 0) {
- // return null
- // }
+ if (!links || links.length === 0) {
+ return null
+ }
+
+ const toggleMenu = () => {
+ setShowMenu(!showMenu) // 切换菜单状态
+ }
+
+ useEffect(() => {
+ setShowMenu(false)
+ }, [router])
return (
- <>
-
- {/* 移动端菜单切换按钮 */}
-
+
+ {/* 移动端菜单切换按钮 */}
+
- {/* 响应式菜单 */}
-
-
-
+
+
)
}