gitbook-jump-to-top

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)

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)

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

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>
   )

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} />

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 {

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}/>

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>