NAV主题

themes/nav/components/LogoBar.js

@@ -1,6 +1,4 @@
 import BLOG from '@/blog.config'
-import LazyImage from '@/components/LazyImage'
-import { useNavGlobal } from '@/themes/nav'
 import Link from 'next/link'
 import CONFIG from '../config'
 
@@ -11,23 +9,15 @@ import CONFIG from '../config'
  */
 export default function LogoBar(props) {
   const { siteInfo } = props
-  const { pageNavVisible, changePageNavVisible } = useNavGlobal()
-  // const logo = siteInfo?.icon?.replaceAll("width=400", "width=280")
 
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
   return (
         <div id='top-wrapper' className='w-full flex items-center'>
-            {/* <div onClick={togglePageNavVisible} className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
-                <i className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
-            </div> */}
-            <div className='md:w-48'>
-              <a href='/' className='grid justify-items-center text-md md:text-xl dark:text-gray-200'>
-                  <img src={siteInfo?.icon?.replaceAll("width=400", "width=280")} height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block' placeholderSrc=''/>
-                  {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
-              </a>
-            </div>
+                <Link href='/' className='md:w-48 grid justify-items-center text-md md:text-xl dark:text-gray-200'>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img src={siteInfo?.icon?.replaceAll('width=400', 'width=280')}
+                        height='44px' alt={BLOG.AUTHOR + ' - ' + BLOG.NEXT_PUBLIC_BIO} className='md:block transition-all hover:scale-110 duration-150' placeholderSrc='' />
+                    {CONFIG.SHOW_TITLE_TEXT && siteInfo?.title}
+                </Link>
         </div>
   )
 }

themes/nav/components/MenuBarMobile.js

@@ -4,6 +4,11 @@ import CONFIG from '../config'
 import BLOG from '@/blog.config'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
+/**
+ * 移动端菜单栏
+ * @param {*} props
+ * @returns
+ */
 export const MenuBarMobile = (props) => {
   const { customMenu, customNav } = props
   const { locale } = useGlobal()

themes/nav/components/MenuItem.js

@@ -1,84 +1,64 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import { useRouter } from 'next/router'
 import Collapse from './Collapse'
 
+/**
+ * 菜单
+ * @param {} param0
+ * @returns
+ */
 export const MenuItem = ({ link }) => {
-  const [show, changeShow] = useState(false)
-  //   const show = true
-  //   const changeShow = () => {}
-  const router = useRouter()
-
-  if (!link || !link.show) {
-    return null
-  }
-  const hasSubMenu = link?.subMenus?.length > 0
-  const selected = (router.pathname === link.to) || (router.asPath === link.to)
-
   link.selected = true
 
-//   const { group } = props
   const [isOpen, changeIsOpen] = useState(link?.selected)
 
   const toggleOpenSubMenu = () => {
     changeIsOpen(!isOpen)
   }
-  console.log('link::')
-  console.log(link)
 
-    return <>
-            <div
-                onClick={toggleOpenSubMenu}
-                className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 cursor-pointer pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.name}>
-                <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>{link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.name}</span>
-                <div className='inline-flex items-center select-none pointer-events-none '><i className={`text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
-            </div>
+  if (!link || !link.show) {
+    return null
+  }
+
+  return <>
+        {/* 菜单 */}
+        <div
+            onClick={toggleOpenSubMenu}
+            className='nav-menu dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-sm text-gray w-full items-center duration-300 pt-2 font-light select-none flex justify-between cursor-pointer' key={link?.name}>
+
+            {link?.subMenus
+              ? (<>
+                    <span className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+                        {link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title}
+                    </span>
+                    <div className='inline-flex items-center select-none pointer-events-none '>
+                        <i className={`${isOpen ? '-rotate-90' : ''} text-xs dark:text-neutral-500 text-gray-300 hover:text-black dark:hover:text-white-400 px-2 fas fa-chevron-left transition-all duration-200`}></i>
+                    </div>
+                </>)
+              : (
+                    <Link href={link?.to} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+                        {link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title}
+                    </Link>
+                )
+
+            }
+        </div>
+
+        {/* 菜单按钮 */}
+        {link?.subMenus && (
             <Collapse isOpen={isOpen} key='collapse'>
-            {link?.subMenus?.map((sLink, index) => (
-                <div key={index} className='nav-submenu'>
-                    {/* <BlogPostCard className='text-sm ml-3' post={post} /></div> */}
-                    <a href={`/#${sLink.title}`}>
-                        <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-2 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
-                    </a>
-                </div>
-                ))
+                {
+                    link?.subMenus?.map((sLink, index) => (
+                        <div key={index} className='nav-submenu'>
+                            <a href={sLink?.to}>
+                                <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
+                            </a>
+                        </div>
+                    ))
                 }
+
             </Collapse>
-        </>
+        )}
 
-
-
-//   return <li className='cursor-pointer list-none items-center flex mx-2' onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} >
-
-//         {hasSubMenu &&
-//             <div className={'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-//                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
-//                 <div>
-//                     {link?.icon && <i className={link?.icon} />} {link?.name}
-//                     {hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
-//                 </div>
-//             </div>
-//         }
-
-//         {!hasSubMenu &&
-//             <div className={'px-2 h-full whitespace-nowrap duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
-//                 (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
-//                 <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-//                     {link?.icon && <i className={link?.icon} />} {link?.name}
-//                 </Link>
-//             </div>
-//         }
-
-//         {/* 子菜单 */}
-//         {hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 block drop-shadow-lg `}>
-//             {link?.subMenus?.map((sLink, index) => {
-//               return <li key={index} className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
-//                     <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-//                         <span className='text-xs font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-//                     </Link>
-//                 </li>
-//             })}
-//         </ul>}
-
-//     </li>
+    </>
 }

themes/nav/components/TopNavBar.js

@@ -1,15 +1,10 @@
-import LogoBar from './LogoBar'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Collapse from '@/components/Collapse'
 import { MenuBarMobile } from './MenuBarMobile'
-import { useGlobal } from '@/lib/global'
-import CONFIG from '../config'
-import BLOG from '@/blog.config'
 import throttle from 'lodash.throttle'
-import { useRouter } from 'next/router'
-import { MenuItemDrop } from './MenuItemDrop'
 import SearchInput from './SearchInput'
 import DarkModeButton from '@/components/DarkModeButton'
+import LogoBar from './LogoBar'
 
 /**
  * 顶部导航栏 + 菜单
@@ -17,13 +12,10 @@ import DarkModeButton from '@/components/DarkModeButton'
  * @returns
  */
 export default function TopNavBar(props) {
-  const { className, customNav, customMenu } = props
+  const { className } = props
   const [isOpen, changeShow] = useState(false)
   const collapseRef = useRef(null)
 
-  const { locale } = useGlobal()
-
-
   let windowTop = 0
 
   // 监听滚动
@@ -53,28 +45,16 @@ export default function TopNavBar(props) {
   }, throttleMs)
   )
 
-
-
-  const defaultLinks = [
-    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG.MENU_CATEGORY },
-    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG.MENU_TAG },
-    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG.MENU_ARCHIVE },
-    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG.MENU_SEARCH }
-  ]
-
-  let links = defaultLinks.concat(customNav)
-
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
   }
 
-  // 如果 开启自定义菜单，则覆盖Page生成的菜单
-  if (BLOG.CUSTOM_MENU) {
-    links = customMenu
-  }
-
   return (
         <div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg  md:shadow-none pb-2 md:pb-0 ' + className}>
+            {/* 图标Logo */}
+            <div className='fixed top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+                <LogoBar {...props} />
+            </div>
 
             {/* 移动端折叠菜单 */}
             <Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden mt-16'>
@@ -86,10 +66,6 @@ export default function TopNavBar(props) {
             {/* 导航栏菜单 */}
             <div className='h-18 px-5'>
 
-              {/* 左侧图标Logo */}
-              {/* <div className='absolute top-0 left-5 md:left-4 z-40 pt-3 md:pt-4 md:pt-0'>
-                <LogoBar {...props} />
-              </div> */}
               <div className='absolute top-0 right-5'>
                 {/* 搜索框、折叠按钮、仅移动端显示 */}
                 <div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>