From 4b3fbba087f70a625111e605832ca99d1f8e86cf Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 17 Jul 2023 19:01:20 +0800
Subject: [PATCH] theme-heo-nav-progress

---
 components/HeroIcons.js                  |  6 ++++
 themes/heo/components/MenuItemDrop.js    |  2 +-
 themes/heo/components/NavBar.js          |  3 ++
 themes/heo/components/ReadingProgress.js | 42 ++++++++++++++++++++++++
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 themes/heo/components/ReadingProgress.js

diff --git a/components/HeroIcons.js b/components/HeroIcons.js
index d9bf4ff8..6a24d8b7 100644
--- a/components/HeroIcons.js
+++ b/components/HeroIcons.js
@@ -86,3 +86,9 @@ export const ArrowSmallRight = ({ className }) => {
     <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
   </svg>
 }
+
+export const ArrowSmallUp = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+  </svg>
+}
diff --git a/themes/heo/components/MenuItemDrop.js b/themes/heo/components/MenuItemDrop.js
index dcbe2673..fe8fdf53 100644
--- a/themes/heo/components/MenuItemDrop.js
+++ b/themes/heo/components/MenuItemDrop.js
@@ -28,7 +28,7 @@ export const MenuItemDrop = ({ link }) => {
         </>}
 
         {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
             {link.subMenus.map((sLink, index) => {
               return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
                     <Link href={sLink.to}>
diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js
index 508eb209..297df23b 100644
--- a/themes/heo/components/NavBar.js
+++ b/themes/heo/components/NavBar.js
@@ -6,6 +6,7 @@ import throttle from 'lodash.throttle'
 import RandomPostButton from './RandomPostButton'
 import SearchButton from './SearchButton'
 import SlideOver from './SlideOver'
+import ReadingProgress from './ReadingProgress'
 /**
  * 顶部导航
  * @param {*} param0
@@ -75,6 +76,8 @@ const NavBar = props => {
                 <div className='flex justify-center items-center space-x-1'>
                     <RandomPostButton {...props} />
                     <SearchButton />
+                    <ReadingProgress/>
+
                     {/* 移动端菜单按钮 */}
                     <div onClick={toggleMenuOpen} className='flex lg:hidden w-8 justify-center items-center h-8 cursor-pointer'>
                         <i className='fas fa-bars' />
diff --git a/themes/heo/components/ReadingProgress.js b/themes/heo/components/ReadingProgress.js
new file mode 100644
index 00000000..fed74a54
--- /dev/null
+++ b/themes/heo/components/ReadingProgress.js
@@ -0,0 +1,42 @@
+import { ArrowSmallUp } from '@/components/HeroIcons'
+import { useEffect, useState } from 'react'
+
+/**
+ * 回顶按钮
+ * @returns
+ */
+export default function ReadingProgress() {
+  const [scrollPercentage, setScrollPercentage] = useState(0)
+  useEffect(() => {
+    let requestId
+
+    function handleScroll() {
+      const scrollHeight = document.documentElement.scrollHeight
+      const clientHeight = document.documentElement.clientHeight
+      const scrollY = window.scrollY || window.pageYOffset
+
+      const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100)
+      setScrollPercentage(percent)
+
+      requestId = requestAnimationFrame(handleScroll)
+    }
+
+    handleScroll() // 初始化滚动位置
+
+    return () => {
+      cancelAnimationFrame(requestId)
+    }
+  }, [])
+
+  return (<>
+        <div title={'阅读进度'}
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            className={`${scrollPercentage > 0 ? 'w-10 h-10 ' : 'w-0 h-0 opacity-0'} group cursor-pointer  hover:bg-black hover:bg-opacity-10 rounded-full flex justify-center items-center duration-200 transition-all`} >
+            <ArrowSmallUp className={'w-5 h-5 hidden group-hover:block'} />
+            <div className='group-hover:hidden text-xs flex justify-center items-center rounded-full w-6 h-6 bg-black text-white'>
+                {scrollPercentage < 100 ? scrollPercentage : <ArrowSmallUp className={'w-5 h-5 fill-white'} />}
+            </div>
+        </div>
+
+    </>)
+}