From 99d98566b7357de5d4898830b43c63b4c60edd68 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 29 Nov 2021 14:48:03 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E7=9B=AE=E5=BD=95=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SearchInput.js     |  2 +-
 components/SideBar.js         |  4 ++++
 components/Toc.js             |  6 +-----
 components/TocDrawer.js       | 21 ++++++++++++--------
 components/TocDrawerButton.js |  7 +++----
 components/TopNav.js          |  2 +-
 layouts/BaseLayout.js         | 36 ++++++++++++++++++++++++-----------
 pages/article/[slug].js       |  2 +-
 8 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/components/SearchInput.js b/components/SearchInput.js
index 9ef4f138..c9462b59 100644
--- a/components/SearchInput.js
+++ b/components/SearchInput.js
@@ -49,7 +49,7 @@ const SearchInput = ({ currentTag, currentSearch }) => {
 
     <div className='py-4 px-4 bg-gray-50 flex border-l dark:border-gray-700 dark:bg-gray-500 justify-center align-middle cursor-pointer'
          onClick={() => { handleSearch(searchKey) }}>
-      <i className={`fa ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'} text-black cursor-pointer`}/>
+      <i className={`fa ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}  dark:text-gray-100 text-black cursor-pointer`}/>
     </div>
   </div>
 }
diff --git a/components/SideBar.js b/components/SideBar.js
index ce1ac741..6b4eb05a 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -69,6 +69,10 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
 
     {post && (
       <section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
+        <div
+          className='border-b text-2xl bg-white font-bold text-black dark:bg-gray-700 dark:text-white py-6 px-6'>
+          文章目录
+        </div>
         <Toc toc={post.toc} />
       </section>
     )}
diff --git a/components/Toc.js b/components/Toc.js
index 9ff24e14..15aedbc3 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -50,11 +50,7 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs))
 
-  return <div className='dark:bg-gray-800 min-h-screen'>
-    <div
-      className='dark:border-gray-600 border-b text-2xl bg-white font-bold text-black dark:bg-gray-900 dark:text-white py-6 px-6'>
-      文章目录
-    </div>
+  return <div className='dark:bg-gray-800 bg-white'>
     <nav className='text-gray-500 dark:text-gray-400 underline overflow-y-auto scroll-hidden p-2'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 804d3942..9dca938d 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -20,19 +20,24 @@ const TocDrawer = ({ post, cRef }) => {
     switchShowDrawer(!showDrawer)
   }
 
-  return <div>
-    <div className='fixed top-0 right-0 z-40 '>
+  return <>
+    <div className='fixed top-0 right-0 z-40'>
       {/* 侧边菜单 */}
       <div
-        className={(showDrawer ? 'shadow-2xl ' : ' -mr-72 ') + ' w-72 duration-200 h-full bg-white fixed right-0 top-0 overflow-y-auto'}>
-        <div className='z-20'>
-          {post && <Toc toc={post.toc}/>}
-        </div>
+        className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') + ' border dark:border-gray-800 bg-white dark:bg-gray-700 shadow-xl animate__animated animate__faster max-h-96 w-72 duration-200 fixed right-4 top-16 rounded-xl overflow-y-auto'}>
+          {post && <>
+            <div
+              className='border-b text-xl font-bold text-black dark:text-white py-3 px-6'>
+              文章目录
+            </div>
+            <Toc toc={post.toc}/>
+          </>
+          }
       </div>
     </div>
     {/* 背景蒙版 */}
-    <div id='right-drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-50'}
+    <div id='right-drawer-background' className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
          onClick={switchVisible} />
-  </div>
+  </>
 }
 export default TocDrawer
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index 7a60d58a..bb300176 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -3,16 +3,15 @@ import React from 'react'
 /**
  * 点击召唤目录抽屉
  * 当屏幕下滑500像素后会出现该控件
- * @param targetRef 关联高度的目标html标签
- * @param showPercent 是否显示百分比
+ * @param props 父组件传入props
  * @returns {JSX.Element}
  * @constructor
  */
 const TocDrawerButton = (props) => {
   return (
-    <div id='toc-drawer-button' className='right-0 fixed flex top-2 mr-4 duration-500 z-10 opacity-75' onClick={props.onClick}>
+    <div id='toc-drawer-button' className='right-0 fixed flex top-24 mr-4 duration-500 z-40 hidden' onClick={props.onClick}>
       <div className='transform hover:scale-105 duration-200 '>
-        <div style={{ boxShadow: 'rgba(41, 50, 60, 0.5) 0px 2px 16px', borderRadius: '28px' }}
+        <div style={{ borderRadius: '28px' }}
           className={'animate__fadeInUp bg-white dark:bg-gray-700 px-1 py-1 cursor-pointer animate__animated animate__faster shadow-xl'}>
           <div className='text-center dark:text-gray-100'>
             <div className='w-10 text-xl' title='目录' ><i className='fa fa-book'/> </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index 4a66f83d..eaf047f9 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -11,7 +11,7 @@ const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, curr
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 bg-white dark:bg-gray-900 border-b dark:border-gray-700'>
+    <div id='sticky-nav' className='fixed w-full top-0 z-20 transform duration-500 bg-white dark:bg-gray-700 border-b dark:border-gray-700'>
       <div className='text-sm m-auto w-full flex flex-row justify-between items-center px-4 py-2 shadow-md'>
         {/* 左侧LOGO */}
         <div className='flex ml-12'>
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 8fc41c9e..99c55013 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -42,11 +42,12 @@ const BaseLayout = ({
   let windowTop = 0
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
+    console.log(scrollS)
     if (scrollS >= windowTop && scrollS > 10) {
-      hiddenNav()
+      handleScrollDown()
       windowTop = scrollS
     } else {
-      showNav()
+      handleScrollUp()
       windowTop = scrollS
     }
   }, 200))
@@ -63,7 +64,7 @@ const BaseLayout = ({
   const targetRef = useRef(null)
 
   return (
-    <div id='wrapper' className={[BLOG.font,'subpixel-antialiased', theme].join(' ')}>
+    <div id='wrapper' className={[BLOG.font, 'subpixel-antialiased', theme].join(' ')}>
       <CommonHead meta={meta} />
 
       {/* 顶部导航栏 */}
@@ -96,32 +97,45 @@ const BaseLayout = ({
 
 /**
  * 隐藏导航
+ * 划到页面下方
  */
-const hiddenNav = () => {
+const handleScrollDown = () => {
   if (document) {
     const nav = document.querySelector('#sticky-nav')
-    // const sidebar = document.querySelector('#sidebar')
-    const tagsBar = document.querySelector('#tags-bar')
-    // const rightToc = document.querySelector('#right-toc')
     nav && nav.classList.replace('top-0', '-top-16')
+
+    const tagsBar = document.querySelector('#tags-bar')
     tagsBar && tagsBar.classList.replace('top-16', 'top-0')
+
+    const tocDrawerButton = document.querySelector('#toc-drawer-button')
+    tocDrawerButton && tocDrawerButton.classList.replace('hidden', 'block')
+
+    // const sidebar = document.querySelector('#sidebar')
     // sidebar && sidebar.classList.replace('top-20', 'top-2')
+    // const rightToc = document.querySelector('#right-toc')
     // rightToc && rightToc.classList.replace('top-16', 'top-0')
   }
 }
 
 /**
  * 显示导航
+ * 划到顶部
  */
-const showNav = () => {
+const handleScrollUp = () => {
   if (document) {
     const nav = document.querySelector('#sticky-nav')
-    // const sidebar = document.querySelector('#sidebar')
-    const tagsBar = document.querySelector('#tags-bar')
-    // const rightToc = document.querySelector('#right-toc')
     nav && nav.classList.replace('-top-16', 'top-0')
+
+    const tagsBar = document.querySelector('#tags-bar')
     tagsBar && tagsBar.classList.replace('top-0', 'top-16')
+
+    // const tocDrawerButton = document.querySelector('#toc-drawer-button')
+    // tocDrawerButton && tocDrawerButton.classList.replace('block', 'hidden')
+
+    // const sidebar = document.querySelector('#sidebar')
     // sidebar && sidebar.classList.replace('top-2', 'top-20')
+
+    // const rightToc = document.querySelector('#right-toc')
     // rightToc && rightToc.classList.replace('top-0', 'top-16')
   }
 }
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index cd585d16..2e10c7cd 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -56,7 +56,7 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, posts, categories })
         )}
       </header>
 
-      <article className='shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-800'>
+      <article className='shadow-card mb-20 w-screen md:w-full overflow-x-auto md:px-10 px-5 pt-10 max-w-5xl mx-auto dark:border-gray-700 bg-white dark:bg-gray-900'>
         {/* 文章标题 */}
         <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
           {post.title}