feature: 样式调整，加入Tabs组件

components/TopNav.js

@@ -1,11 +1,11 @@
 import BLOG from '@/blog.config'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import { useGlobal } from '@/lib/global'
+import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef } from 'react'
-import Image from 'next/image'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
+import SearchDrawer from './SearchDrawer'
 import throttle from 'lodash.throttle'
 
 let windowTop = 0
@@ -18,6 +18,7 @@ let windowTop = 0
 const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, autoHide = true }) => {
   const drawer = useRef()
   const { locale } = useGlobal()
+  const searchDrawer = useRef()
 
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -30,7 +31,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
       nav && nav.classList.replace('-top-16', 'top-0')
       windowTop = scrollS
     }
-  }, 200))
+  }, 200), [])
 
   // 监听滚动
   useEffect(() => {
@@ -42,10 +43,10 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
       autoHide && window.removeEventListener('scroll', scrollTrigger)
     }
   }, [])
-
-  return (<div id='top-nav'>
+  return (<div id='top-nav' className='sticky top-0 z-40 block lg:hidden'>
     {/* 侧面抽屉 */}
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
+    <SearchDrawer cRef={searchDrawer}/>
 
     {/* 导航栏 */}
     <div id='sticky-nav' className='flex animate__animated animate__fadeIn fixed lg:relative w-full top-0 z-20 transform duration-500'>
@@ -53,16 +54,10 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
           <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='w-8 cursor-pointer dark:text-gray-300 block lg:hidden'>
+               className='w-8 cursor-pointer dark:text-gray-300'>
             <FontAwesomeIcon icon={faBars} size={'lg'}/>
           </div>
-          <div className='relative w-10 hidden lg:block' ><Image
-            alt={BLOG.title}
-            layout='fill'
-            loading='lazy'
-            src='/favicon.svg'
-            className='border-black'
-          /></div>
+
           <Link href='/' passHref>
             <a>
              <h1 className='cursor-pointer ml-2 w-full hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{ BLOG.title }</h1>
@@ -72,15 +67,9 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
 
         {/* 右侧功能 */}
         <div className='mr-1 flex flex-nowrap flex-grow justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-        <Link href='/'>
-            <a>{locale.NAV.INDEX}</a>
-          </Link>
-          <Link href='/archive'>
-            <a>{locale.NAV.ARCHIVE}</a>
-          </Link>
-          <Link href='/about'>
-            <a>{locale.NAV.ABOUT}</a>
-          </Link>
+          <div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
+            <FontAwesomeIcon icon={faSearch} className="mr-2" />{locale.NAV.SEARCH}
+          </div>
         </div>
       </div>
     </div>