hexo-menu

themes/hexo/components/MenuItemDrop.js

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useState } from 'react'
 
-export const DropMenu = ({ link }) => {
+export const MenuItemDrop = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 

themes/hexo/components/MenuList.js

@@ -1,14 +1,12 @@
 import React from 'react'
-import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import CONFIG_HEXO from '../config_hexo'
 import BLOG from '@/blog.config'
-import { DropMenu } from './DropMenu'
+import { MenuItemDrop } from './MenuItemDrop'
 
 const MenuList = (props) => {
   const { postCount, customNav, customMenu } = props
   const { locale } = useGlobal()
-  const router = useRouter()
   const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
 
   let links = [
@@ -29,14 +27,7 @@ const MenuList = (props) => {
 
   return (
     <nav id='nav' className='leading-8 text-gray-500 dark:text-gray-300 '>
-      {links.map(link => {
-        if (link && link.show) {
-          const selected = (router.pathname === link.to) || (router.asPath === link.to)
-          return <DropMenu key={link.id} selected={selected} link={link} />
-        } else {
-          return null
-        }
-      })}
+      {links.map(link => <MenuItemDrop key={link.id} link={link} />)}
     </nav>
   )
 }

themes/hexo/components/MenuListTop.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { useGlobal } from '@/lib/global'
 import CONFIG_HEXO from '../config_hexo'
-import { DropMenu } from './DropMenu'
+import { MenuItemDrop } from './MenuItemDrop'
 import BLOG from '@/blog.config'
 
-const MenuButtonGroupTop = (props) => {
+export const MenuListTop = (props) => {
   const { customNav, customMenu } = props
   const { locale } = useGlobal()
 
@@ -27,8 +27,7 @@ const MenuButtonGroupTop = (props) => {
 
   return (
         <nav id='nav' className='leading-8 flex justify-center  font-light w-full'>
-            {links.map(link => link && link.show && <DropMenu key={link.id} link={link} />)}
+            {links.map(link => link && link.show && <MenuItemDrop key={link.id} link={link} />)}
         </nav>
   )
 }
-export default MenuButtonGroupTop

themes/hexo/components/TopNav.js

@@ -5,7 +5,7 @@ import CategoryGroup from './CategoryGroup'
 import Logo from './Logo'
 import SearchDrawer from './SearchDrawer'
 import TagGroups from './TagGroups'
-import MenuButtonGroupTop from './MenuButtonGroupTop'
+import { MenuListTop } from './MenuListTop'
 import MenuList from './MenuList'
 import { useRouter } from 'next/router'
 import throttle from 'lodash.throttle'
@@ -137,7 +137,7 @@ const TopNav = props => {
 
                 {/* 右侧功能 */}
                 <div className='mr-1 justify-end items-center '>
-                    <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                    <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
                     <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
                         {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                     </div>