From ed7b235edff68291e5faeeeb4dc017424cfb7b3b Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Wed, 28 Jun 2023 23:19:21 +0800
Subject: [PATCH] gitbook-jump-to-top

---
 components/DarkModeButton.js                 |  2 +-
 components/Player.js                         |  8 +++----
 themes/gitbook/LayoutBase.js                 | 19 +++++-----------
 themes/gitbook/components/BottomMenuBar.js   |  4 ++--
 themes/gitbook/components/FloatTocButton.js  |  4 ++--
 themes/gitbook/components/JumpToTopButton.js | 24 +++++++++-----------
 themes/gitbook/components/LogoBar.js         | 17 +++++++++++++-
 themes/gitbook/components/PageNavDrawer.js   |  6 ++---
 themes/gitbook/components/SearchInput.js     |  4 ++--
 themes/gitbook/components/TocDrawer.js       |  6 ++---
 themes/gitbook/components/TopNavBar.js       | 11 ++++-----
 themes/medium/LayoutBase.js                  | 15 ++++--------
 themes/medium/components/BottomMenuBar.js    |  4 ++--
 themes/medium/components/JumpToTopButton.js  | 20 ++++++++--------
 themes/medium/components/TocDrawer.js        |  4 ++--
 15 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 62bace09..c270ca8e 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -13,7 +13,7 @@ const DarkModeButton = (props) => {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  return <div onClick={handleChangeDarkMode} className={'px-1 dark:text-gray-200 text-gray-800 z-10 duration-200 text-xl hover:scale-125 cursor-pointer transform ' + props.className}>
+  return <div onClick={handleChangeDarkMode} className={'px-1 dark:text-gray-200 text-gray-800 z-10 duration-200 text-xl hover:scale-110 cursor-pointer transform ' + props.className}>
     <i id='darkModeButton' className={`${isDarkMode ? 'far fa-sun' : 'far fa-moon'}`}/>
   </div>
 }
diff --git a/components/Player.js b/components/Player.js
index 98da72c3..82295e69 100644
--- a/components/Player.js
+++ b/components/Player.js
@@ -1,9 +1,9 @@
-import React from 'react'
 import BLOG from '@/blog.config'
+import { useEffect, useRef, useState } from 'react'
 
 const Player = () => {
-  const [player, setPlayer] = React.useState()
-  const ref = React.useRef(null)
+  const [player, setPlayer] = useState()
+  const ref = useRef(null)
 
   const lrcType = JSON.parse(BLOG.MUSIC_PLAYER_LRC_TYPE)
   const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
@@ -11,7 +11,7 @@ const Player = () => {
 
   const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!meting && window.APlayer) {
       setPlayer(new window.APlayer({
         container: ref.current,
diff --git a/themes/gitbook/LayoutBase.js b/themes/gitbook/LayoutBase.js
index 98883245..5aea009c 100644
--- a/themes/gitbook/LayoutBase.js
+++ b/themes/gitbook/LayoutBase.js
@@ -6,7 +6,6 @@ import RevolverMaps from './components/RevolverMaps'
 import CONFIG_GITBOOK from './config_gitbook'
 import TopNavBar from './components/TopNavBar'
 import SearchInput from './components/SearchInput'
-import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
@@ -17,6 +16,7 @@ import { useRouter } from 'next/router'
 import Announcement from './components/Announcement'
 import PageNavDrawer from './components/PageNavDrawer'
 import FloatTocButton from './components/FloatTocButton'
+import JumpToTopButton from './components/JumpToTopButton'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -76,14 +76,7 @@ const LayoutBase = (props) => {
                             {onLoading ? LoadingCover : children}
 
                             {/* 回顶按钮 */}
-                            <div
-                                data-aos="fade-up"
-                                data-aos-duration="300"
-                                data-aos-once="false"
-                                data-aos-anchor-placement="top-center"
-                                className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20 '>
-                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-black dark:border-gray-800' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-                            </div>
+                            <JumpToTopButton />
                         </div>
 
                         {/* 底部 */}
@@ -113,17 +106,17 @@ const LayoutBase = (props) => {
                 </main>
 
                 {showTocButton && !tocVisible && <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-                    <FloatTocButton {...props}/>
+                    <FloatTocButton {...props} />
                 </div>}
 
-                <PageNavDrawer {...props}/>
+                <PageNavDrawer {...props} />
 
                 {/* 移动端底部导航栏 */}
-                <BottomMenuBar {...props} className='block md:hidden' />
+                {/* <BottomMenuBar {...props} className='block md:hidden' /> */}
             </div>
         </ThemeGlobalMedium.Provider>
   )
 }
 
 export default LayoutBase
-export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
+export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)
diff --git a/themes/gitbook/components/BottomMenuBar.js b/themes/gitbook/components/BottomMenuBar.js
index 2c7cdffc..0265bd28 100644
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar({ post, className }) {
-  const { pageNavVisible, changePageNavVisible } = useMediumGlobal()
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
 
   const togglePageNavVisible = () => {
     changePageNavVisible(!pageNavVisible)
diff --git a/themes/gitbook/components/FloatTocButton.js b/themes/gitbook/components/FloatTocButton.js
index 19d0c294..8a66ee8f 100644
--- a/themes/gitbook/components/FloatTocButton.js
+++ b/themes/gitbook/components/FloatTocButton.js
@@ -1,7 +1,7 @@
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 
 export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)
diff --git a/themes/gitbook/components/JumpToTopButton.js b/themes/gitbook/components/JumpToTopButton.js
index f066fcc7..0afdbb6c 100644
--- a/themes/gitbook/components/JumpToTopButton.js
+++ b/themes/gitbook/components/JumpToTopButton.js
@@ -1,6 +1,3 @@
-import { useGlobal } from '@/lib/global'
-import React from 'react'
-import CONFIG_GITBOOK from '../config_gitbook'
 
 /**
  * 跳转到网页顶部
@@ -11,16 +8,17 @@ import CONFIG_GITBOOK from '../config_gitbook'
  * @constructor
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
-  const { locale } = useGlobal()
-  if (!CONFIG_GITBOOK.WIDGET_TO_TOP) {
-    return <></>
-  }
-  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
-        <div title={locale.POST.TOP} >
-          <i className='fas fa-arrow-up'/>
-        </div>
-        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
-    </div>)
+  return (
+          <div
+              id="jump-to-top"
+              data-aos="fade-up"
+              data-aos-duration="300"
+              data-aos-once="false"
+              data-aos-anchor-placement="top-center"
+              className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
+              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
+          </div>
+  )
 }
 
 export default JumpToTopButton
diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js
index a7fceebd..70e78100 100644
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -1,13 +1,28 @@
 import BLOG from '@/blog.config'
 import Link from 'next/link'
+import { useGitBookGlobal } from '../LayoutBase'
 
+/**
+ * Logo区域
+ * @param {*} props
+ * @returns
+ */
 export default function LogoBar(props) {
   const { siteInfo } = props
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
+
+  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>
             <Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
                 {/*  eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2' /> {siteInfo?.title}
+                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
+                {siteInfo?.title}
             </Link>
         </div>
   )
diff --git a/themes/gitbook/components/PageNavDrawer.js b/themes/gitbook/components/PageNavDrawer.js
index 3bfc39b9..5fa6d114 100644
--- a/themes/gitbook/components/PageNavDrawer.js
+++ b/themes/gitbook/components/PageNavDrawer.js
@@ -1,4 +1,4 @@
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import BlogPostListScroll from './BlogPostListScroll'
 
 /**
@@ -9,7 +9,7 @@ import BlogPostListScroll from './BlogPostListScroll'
  * @constructor
  */
 const PageNavDrawer = ({ post, cRef }) => {
-  const { pageNavVisible, changePageNavVisible, filterPosts } = useMediumGlobal()
+  const { pageNavVisible, changePageNavVisible, filterPosts } = useGitBookGlobal()
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
   }
@@ -19,7 +19,7 @@ const PageNavDrawer = ({ post, cRef }) => {
             {/* 侧边菜单 */}
             <div
                 className={(pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft') +
-                    ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-gray-600'}>
+                    ' overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-gray-600'}>
                 <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
                     {/* 所有文章列表 */}
                     <BlogPostListScroll posts={filterPosts} />
diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js
index f88615bf..b1f15a74 100644
--- a/themes/gitbook/components/SearchInput.js
+++ b/themes/gitbook/components/SearchInput.js
@@ -1,11 +1,11 @@
 import { useImperativeHandle, useRef, useState } from 'react'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import { deepClone } from '@/lib/utils'
 let lock = false
 
 const SearchInput = ({ currentSearch, cRef, className }) => {
   const searchInputRef = useRef()
-  const { setFilterPosts, allNavPages } = useMediumGlobal()
+  const { setFilterPosts, allNavPages } = useGitBookGlobal()
 
   useImperativeHandle(cRef, () => {
     return {
diff --git a/themes/gitbook/components/TocDrawer.js b/themes/gitbook/components/TocDrawer.js
index e7f5d305..f08644f4 100644
--- a/themes/gitbook/components/TocDrawer.js
+++ b/themes/gitbook/components/TocDrawer.js
@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 
 /**
  * 悬浮抽屉目录
@@ -9,7 +9,7 @@ import { useMediumGlobal } from '../LayoutBase'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }
@@ -18,7 +18,7 @@ const TocDrawer = ({ post, cRef }) => {
       {/* 侧边菜单 */}
       <div
         className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-gray-900'}>
+        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'}>
           {post && <>
            <div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
              <Catalog post={post}/>
diff --git a/themes/gitbook/components/TopNavBar.js b/themes/gitbook/components/TopNavBar.js
index 9c4d01f2..555275f3 100644
--- a/themes/gitbook/components/TopNavBar.js
+++ b/themes/gitbook/components/TopNavBar.js
@@ -49,17 +49,16 @@ export default function TopNavBar(props) {
             </Collapse>
 
             {/* 导航栏菜单 */}
-            <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
+            <div className='flex w-full h-14 shadow bg-white dark:bg-hexo-black-gray px-7 items-between'>
 
                 {/* 左侧图标Logo */}
                 <LogoBar {...props} />
 
                 {/* 折叠按钮、仅移动端显示 */}
-                <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-                    <DarkModeButton className='text-sm flex items-center h-full' />
-
-                    <div onClick={toggleMenuOpen} className='cursor-pointer'>
-                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                <div className='mr-1 flex md:hidden justify-end items-center space-x-4 font-serif dark:text-gray-200'>
+                    <DarkModeButton className='flex text-md items-center h-full' />
+                    <div onClick={toggleMenuOpen} className='cursor-pointer text-lg hover:scale-110 duration-150'>
+                        {isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
                     </div>
                 </div>
 
diff --git a/themes/medium/LayoutBase.js b/themes/medium/LayoutBase.js
index a50a071b..728252c9 100644
--- a/themes/medium/LayoutBase.js
+++ b/themes/medium/LayoutBase.js
@@ -13,6 +13,7 @@ import { useRouter } from 'next/router'
 import Live2D from '@/components/Live2D'
 import BLOG from '@/blog.config'
 import Announcement from './components/Announcement'
+import JumpToTopButton from './components/JumpToTopButton'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -53,15 +54,7 @@ const LayoutBase = props => {
 
                             {onLoading ? LoadingCover : children}
 
-                            {/* 回顶按钮 */}
-                            <div
-                                data-aos="fade-up"
-                                data-aos-duration="300"
-                                data-aos-once="false"
-                                data-aos-anchor-placement="top-center"
-                                className='fixed xl:right-80 right-2 mr-10 bottom-24 hidden lg:block z-20'>
-                                <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-                            </div>
+                            <JumpToTopButton />
                         </div>
 
                         {/* 底部 */}
@@ -79,7 +72,7 @@ const LayoutBase = props => {
                                     {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
                                 </div>
                             </Tabs>
-                            <Announcement post={notice}/>
+                            <Announcement post={notice} />
                             <Live2D />
                         </div>
                     </div>
@@ -93,4 +86,4 @@ const LayoutBase = props => {
 }
 
 export default LayoutBase
-export const useMediumGlobal = () => useContext(ThemeGlobalMedium)
+export const useGitBookGlobal = () => useContext(ThemeGlobalMedium)
diff --git a/themes/medium/components/BottomMenuBar.js b/themes/medium/components/BottomMenuBar.js
index 45215f50..5b63c82e 100644
--- a/themes/medium/components/BottomMenuBar.js
+++ b/themes/medium/components/BottomMenuBar.js
@@ -1,10 +1,10 @@
 import Link from 'next/link'
 import React from 'react'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
 export default function BottomMenuBar ({ post, className }) {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
   const showTocBotton = post?.toc?.length > 0
 
   const toggleToc = () => {
diff --git a/themes/medium/components/JumpToTopButton.js b/themes/medium/components/JumpToTopButton.js
index 2d83338c..60281369 100644
--- a/themes/medium/components/JumpToTopButton.js
+++ b/themes/medium/components/JumpToTopButton.js
@@ -1,5 +1,3 @@
-import { useGlobal } from '@/lib/global'
-import React from 'react'
 import CONFIG_MEDIUM from '../config_medium'
 
 /**
@@ -11,16 +9,20 @@ import CONFIG_MEDIUM from '../config_medium'
  * @constructor
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
-  const { locale } = useGlobal()
   if (!CONFIG_MEDIUM.WIDGET_TO_TOP) {
     return <></>
   }
-  return (<div className={'flex space-x-1 items-center cursor-pointer w-full justify-center ' + className } onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} >
-        <div title={locale.POST.TOP} >
-          <i className='fas fa-arrow-up'/>
-        </div>
-        {showPercent && (<div className='text-xs dark:text-gray-200 block lg:hidden'>{percent}%</div>)}
-    </div>)
+  return (
+    <div
+        id="jump-to-top"
+        data-aos="fade-up"
+        data-aos-duration="300"
+        data-aos-once="false"
+        data-aos-anchor-placement="top-center"
+        className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
+        <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
+    </div>
+  )
 }
 
 export default JumpToTopButton
diff --git a/themes/medium/components/TocDrawer.js b/themes/medium/components/TocDrawer.js
index 9a9270db..1cfbb504 100644
--- a/themes/medium/components/TocDrawer.js
+++ b/themes/medium/components/TocDrawer.js
@@ -1,5 +1,5 @@
 import Catalog from './Catalog'
-import { useMediumGlobal } from '../LayoutBase'
+import { useGitBookGlobal } from '../LayoutBase'
 
 /**
  * 悬浮抽屉目录
@@ -9,7 +9,7 @@ import { useMediumGlobal } from '../LayoutBase'
  * @constructor
  */
 const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
   const switchVisible = () => {
     changeTocVisible(!tocVisible)
   }