mobile-gitbook

themes/gitbook/LayoutBase.js

@@ -15,6 +15,7 @@ import ArticleInfo from './components/ArticleInfo'
 import Catalog from './components/Catalog'
 import { useRouter } from 'next/router'
 import Announcement from './components/Announcement'
+import PageNavDrawer from './components/PageNavDrawer'
 const ThemeGlobalMedium = createContext()
 
 /**
@@ -26,6 +27,7 @@ const ThemeGlobalMedium = createContext()
 const LayoutBase = (props) => {
   const { children, meta, post, allNavPages, slotLeft, slotRight, slotTop, siteInfo } = props
   const [tocVisible, changeTocVisible] = useState(false)
+  const [pageNavVisible, changePageNavVisible] = useState(false)
   const [filterPosts, setFilterPosts] = useState(allNavPages)
   const { onLoading } = useGlobal()
   const router = useRouter()
@@ -41,7 +43,7 @@ const LayoutBase = (props) => {
     </div>
 
   return (
-        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible, filterPosts, setFilterPosts, allNavPages }}>
+        <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible, filterPosts, setFilterPosts, allNavPages, pageNavVisible, changePageNavVisible }}>
             <CommonHead meta={meta} />
 
             <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
@@ -107,6 +109,8 @@ const LayoutBase = (props) => {
 
                 </main>
 
+                <PageNavDrawer {...props}/>
+
                 {/* 移动端底部导航栏 */}
                 <BottomMenuBar {...props} className='block md:hidden' />
             </div>

themes/gitbook/LayoutSlug.js

@@ -25,7 +25,7 @@ export const LayoutSlug = (props) => {
 
                 {/* Notion文章主体 */}
                 {post && (<section id="notion-article" className="px-1">
-                   <NotionPage post={post} />
+                    <NotionPage post={post} />
                 </section>)}
 
                 <section>

themes/gitbook/components/BottomMenuBar.js

@@ -3,34 +3,36 @@ import React from 'react'
 import { useMediumGlobal } from '../LayoutBase'
 import JumpToTopButton from './JumpToTopButton'
 
-export default function BottomMenuBar ({ post, className }) {
-  const { tocVisible, changeTocVisible } = useMediumGlobal()
+export default function BottomMenuBar({ post, className }) {
+  const { tocVisible, changeTocVisible, pageNavVisible, changePageNavVisible } = useMediumGlobal()
   const showTocBotton = post?.toc?.length > 0
 
   const toggleToc = () => {
     changeTocVisible(!tocVisible)
   }
 
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
   return (
-    <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
-      <div className='flex justify-between h-full shadow-card'>
-        <Link href='/search' passHref legacyBehavior>
-          <div className='flex w-full items-center justify-center cursor-pointer'>
-            <i className='fas fa-search'/>
-          </div>
-        </Link>
-        <div className='flex w-full items-center justify-center cursor-pointer'>
-          <JumpToTopButton/>
+        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
+            <div className='flex justify-between h-full shadow-card'>
+                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
+                    <i className="fa-regular fa-chart-bar"></i>
+                </div>
+                <div className='flex w-full items-center justify-center cursor-pointer'>
+                    <JumpToTopButton />
+                </div>
+                {showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
+                    <i className='fas fa-list-ol ' />
+                </div>}
+                {!showTocBotton && <Link href='/' passHref legacyBehavior>
+                    <div className='flex w-full items-center justify-center cursor-pointer'>
+                        <i className='fas fa-home' />
+                    </div>
+                </Link>}
+            </div>
         </div>
-        {showTocBotton && <div onClick={toggleToc} className='flex w-full items-center justify-center cursor-pointer'>
-          <i className='fas fa-list-ol ' />
-        </div>}
-        { !showTocBotton && <Link href='/' passHref legacyBehavior>
-          <div className='flex w-full items-center justify-center cursor-pointer'>
-            <i className='fas fa-home' />
-          </div>
-        </Link>}
-      </div>
-    </div>
   )
 }

themes/gitbook/components/PageNavDrawer.js

@@ -0,0 +1,36 @@
+import Catalog from './Catalog'
+import { useMediumGlobal } from '../LayoutBase'
+import BlogPostListScroll from './BlogPostListScroll'
+
+/**
+ * 悬浮抽屉 页面内导航
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const PageNavDrawer = ({ post, cRef }) => {
+  const { pageNavVisible, changePageNavVisible, filterPosts } = useMediumGlobal()
+  const switchVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  console.log('page', pageNavVisible)
+  return <>
+        <div id='gitbook-left-float' className='fixed top-0 left-0 z-40'>
+            {/* 侧边菜单 */}
+            <div
+                className={(pageNavVisible ? 'animate__slideInLeft ' : ' -ml-72 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'}>
+                <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
+                    {/* 所有文章列表 */}
+                    <BlogPostListScroll posts={filterPosts} />
+                </div>
+            </div>
+        </div>
+        {/* 背景蒙版 */}
+        <div id='left-drawer-background' className={(pageNavVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
+            onClick={switchVisible} />
+    </>
+}
+export default PageNavDrawer

themes/gitbook/components/TocDrawer.js

@@ -20,8 +20,8 @@ const TocDrawer = ({ post, cRef }) => {
         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-600'}>
           {post && <>
-           <div className='dark:text-gray-400 text-gray-600 h-56'>
-             <Catalog toc={post.toc}/>
+           <div className='dark:text-gray-400 text-gray-600 h-56 p-3'>
+             <Catalog post={post}/>
            </div>
           </>}
       </div>