menu

themes/simple/components/MenuItemCollapse.js

@@ -7,7 +7,7 @@ import { useState } from 'react'
  * @param {*} param0
  * @returns
  */
-export const CollapseMenu = ({ link }) => {
+export const MenuItemCollapse = ({ link }) => {
   const [show, changeShow] = useState(false)
   const hasSubMenu = link?.subMenus?.length > 0
 
@@ -21,6 +21,10 @@ export const CollapseMenu = ({ link }) => {
     changeIsOpen(!isOpen)
   }
 
+  if (!link || !link.show) {
+    return null
+  }
+
   return <>
         <div className='w-full px-8 py-3 text-left border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
             {!hasSubMenu && <Link

themes/simple/components/MenuItemDrop.js

@@ -1,10 +1,14 @@
 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
 
+  if (!link || !link.show) {
+    return null
+  }
+
   return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
 
         {!hasSubMenu &&

themes/simple/components/MenuList.js

@@ -4,15 +4,15 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
-import { CollapseMenu } from './CollapseMenu'
-import { DropMenu } from './DropMenu'
+import { MenuItemCollapse } from './MenuItemCollapse'
+import { MenuItemDrop } from './MenuItemDrop'
 
 /**
  * 菜单导航
  * @param {*} props
  * @returns
  */
-export const NavBarMenu = ({ customNav, customMenu }) => {
+export const MenuList = ({ customNav, customMenu }) => {
   const { locale } = useGlobal()
   const [isOpen, changeIsOpen] = useState(false)
   const toggleIsOpen = () => {
@@ -49,13 +49,7 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
   return (<>
         {/* 大屏模式菜单 */}
         <div id='nav-menu-pc' className='hidden md:flex my-auto'>
-            {links?.map(link => {
-              if (link?.show) {
-                return <DropMenu key={link.id} link={link} />
-              } else {
-                return null
-              }
-            })}
+            {links?.map(link => <MenuItemDrop key={link.id} link={link} />)}
         </div>
         {/* 移动端小屏菜单 */}
         <div id='nav-menu-mobile' className='flex md:hidden my-auto justify-start'>
@@ -66,13 +60,7 @@ export const NavBarMenu = ({ customNav, customMenu }) => {
 
             <Collapse className='absolute w-full top-12 left-0' isOpen={isOpen}>
                 <div id='menu-wrap' className='bg-white dark:border-hexo-black-gray border'>
-                {links?.map(link => {
-                  if (link?.show) {
-                    return <CollapseMenu key={link.id} link={link} />
-                  } else {
-                    return null
-                  }
-                })}
+                {links?.map(link => <MenuItemCollapse key={link.id} link={link} />)}
                 </div>
             </Collapse>
         </div>

themes/simple/components/NavBar.js

@@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import CONFIG_SIMPLE from '../config_simple'
-import { NavBarMenu } from './NavBarMenu'
+import { MenuList } from './MenuList'
 
 /**
  * 菜单导航
@@ -53,7 +53,7 @@ export const NavBar = (props) => {
                 {/* 左侧菜单 */}
                 <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
                     {showSearchInput && <input id="theme-simple-search" onKeyUp={onKeyUp} className='float-left w-full outline-none h-full px-4' aria-label="Submit search" type="search" name="s" autoComplete="off" placeholder="Type then hit enter to search..." />}
-                    {!showSearchInput && (<NavBarMenu {...props}/>)}
+                    {!showSearchInput && (<MenuList {...props}/>)}
                 </div>
 
                 <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400">