From 762c9e944096e240d1416ff4ee83a8b7dcab3605 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Wed, 20 Nov 2024 14:45:58 +0800 Subject: [PATCH] =?UTF-8?q?starter=20=E4=B8=BB=E9=A2=98=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ui/dashboard/DashboardButton.js | 9 +- themes/starter/components/Header.js | 2 +- themes/starter/components/MenuItem.js | 75 ++++++++++------ themes/starter/components/MenuList.js | 100 +++++++++------------ 4 files changed, 99 insertions(+), 87 deletions(-) diff --git a/components/ui/dashboard/DashboardButton.js b/components/ui/dashboard/DashboardButton.js index 5f382f1a8a4..ff866a5f323 100644 --- a/components/ui/dashboard/DashboardButton.js +++ b/components/ui/dashboard/DashboardButton.js @@ -5,9 +5,12 @@ import { useRouter } from 'next/router' * 跳转仪表盘的按钮 * @returns */ -export default function DashboardButton() { +export default function DashboardButton({ className }) { const { asPath } = useRouter() - const enableDashboardButton = siteConfig('ENABLE_DASHBOARD_BUTTON', false) + const enableDashboardButton = siteConfig( + 'ENABLE_DASHBOARD_BUTTON', + process.env.PUBLIC_NEXT_ENABLE_DASHBOARD_BUTTON + ) if (!enableDashboardButton) { return null @@ -20,7 +23,7 @@ export default function DashboardButton() { return ( ) diff --git a/themes/starter/components/Header.js b/themes/starter/components/Header.js index 7a88df87e8a..7eccdc15650 100644 --- a/themes/starter/components/Header.js +++ b/themes/starter/components/Header.js @@ -88,7 +88,7 @@ export const Header = props => { - + )} diff --git a/themes/starter/components/MenuItem.js b/themes/starter/components/MenuItem.js index 3e32a08b9b9..40700857b0b 100644 --- a/themes/starter/components/MenuItem.js +++ b/themes/starter/components/MenuItem.js @@ -1,5 +1,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' +import { useState } from 'react' + /** * 菜单链接 * @param {*} param0 @@ -8,28 +10,47 @@ import { useRouter } from 'next/router' export const MenuItem = ({ link }) => { const hasSubMenu = link?.subMenus?.length > 0 const router = useRouter() + + // 管理子菜单的展开状态 + const [isSubMenuOpen, setIsSubMenuOpen] = useState(false) + + const toggleSubMenu = () => { + setIsSubMenuOpen(prev => !prev) // 切换子菜单状态 + } + return ( <> - {/* MenuItem */} + {/* 普通 MenuItem */} {!hasSubMenu && (
  • + 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 && } {link?.name}
    • )} + {/* 有子菜单的 MenuItem */} {hasSubMenu && (
  • - {/* 有子菜单的MenuItem */} - - {link?.icon && } - {link?.name} + -
    - {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 ( - <> -
    - {/* 移动端菜单切换按钮 */} - +
    + {/* 移动端菜单切换按钮 */} + - {/* 响应式菜单 */} - -
    - + +
    ) }