feature:

目录样式微调

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

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

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)

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

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>

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

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

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}