heo-动态导航栏

themes/heo/components/Logo.js

@@ -7,14 +7,14 @@ const Logo = props => {
   const { siteInfo } = props
   return (
         <Link href='/' passHref legacyBehavior>
-            <div className='flex justify-center items-center cursor-pointer font-extrabold'>
+            <div className='pl-5 flex flex-nowrap justify-center items-center cursor-pointer font-extrabold'>
                 {/*  eslint-disable-next-line @next/next/no-img-element */}
                 <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
-                <div id='logo-text' className='group rounded-2xl flex relative'>
+                <div id='logo-text' className='group rounded-2xl flex-none relative'>
                     <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
                         {siteInfo?.title || BLOG.TITLE}
                     </div>
-                    <div className='flex rounded-2xl group-hover:absolute group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute justify-center px-8 py-1 duration-200'>
+                    <div className='flex justify-center rounded-2xl group-hover:bg-indigo-600 w-full group-hover:opacity-100 opacity-0 invisible group-hover:visible absolute top-0 px-8 py-1 duration-200'>
                         <Home className={'w-6 h-6 stroke-white stroke-2 '}/>
                     </div>
                 </div>

themes/heo/components/NavBar.js

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Logo from './Logo'
-
-import { MenuListTop } from './MenuListTop'
 import throttle from 'lodash.throttle'
 import RandomPostButton from './RandomPostButton'
 import SearchButton from './SearchButton'
 import SlideOver from './SlideOver'
 import ReadingProgress from './ReadingProgress'
+import NavBarSwipe from './NavBarSwipe'
 /**
  * 顶部导航
  * @param {*} param0
@@ -68,9 +67,7 @@ const NavBar = props => {
                 </div>
 
                 {/* 中间菜单 */}
-                <div className='mr-1 justify-end items-center hidden lg:block'>
-                    <div className='hidden lg:flex'> <MenuListTop {...props} /></div>
-                </div>
+                <NavBarSwipe {...props}/>
 
                 {/* 右侧固定 */}
                 <div className='flex justify-center items-center space-x-1'>

themes/heo/components/NavBarSwipe.js

@@ -0,0 +1,106 @@
+import BLOG from '@/blog.config'
+import { isBrowser } from '@/lib/utils'
+import { useEffect, useState } from 'react'
+import { MenuListTop } from './MenuListTop'
+
+/**
+ * 一个swipe组件
+ * 垂直方向，g给导航栏用
+ * @param {*} param0
+ * @returns
+ */
+export default function NavSwipe(props) {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const item1 = (
+    <div className='mr-1 justify-end items-center hidden lg:block'>
+      <div className='hidden lg:flex'>
+        <MenuListTop {...props} />
+      </div>
+    </div>
+  )
+
+  const item2 = <h1 className='font-bold text-light-400 dark:text-gray-400'>{BLOG.AUTHOR || BLOG.TITLE} | {BLOG.BIO}</h1>
+  const items = [item1, item2]
+
+  useEffect(() => {
+    let prevScrollY = 0
+    let ticking = false
+
+    const handleScroll = () => {
+      if (!ticking) {
+        window.requestAnimationFrame(() => {
+          const currentScrollY = window.scrollY
+
+          if (currentScrollY > prevScrollY) {
+            setActiveIndex(1) // 向下滚动时设置activeIndex为1
+          } else {
+            setActiveIndex(0) // 向上滚动时设置activeIndex为0
+          }
+
+          prevScrollY = currentScrollY
+          ticking = false
+        })
+
+        ticking = true
+      }
+    }
+
+    if (isBrowser()) {
+      window.addEventListener('scroll', handleScroll)
+    }
+
+    return () => {
+      if (isBrowser()) {
+        window.removeEventListener('scroll', handleScroll)
+      }
+    }
+  }, [])
+
+  return (
+    <div className="h-full relative w-full overflow-hidden">
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className={`absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${
+            index === activeIndex ? 'slide-in' : 'slide-out'
+          }`}
+        >
+          {item}
+        </div>
+      ))}
+
+      <style jsx>{`
+        .slide-in {
+          animation-name: slide-in;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        .slide-out {
+          animation-name: slide-out;
+          animation-duration: 0.5s;
+          animation-fill-mode: forwards;
+        }
+
+        @keyframes slide-in {
+          from {
+            transform: translateY(${activeIndex === 0 ? '100%' : '-100%'});
+          }
+          to {
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes slide-out {
+          from {
+            transform: translateY(0);
+          }
+          to {
+            transform: translateY(${activeIndex === 0 ? '-100%' : '100%'});
+          }
+        }
+      `}</style>
+    </div>
+  )
+};