From 8ea86d3976f7cb89e7e034db5c5ec7b6accca06b Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 17 Dec 2021 14:09:19 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=8E=92=E7=8F=AD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E6=8C=89=E9=92=AE=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ArticleDetail.js       |  2 +-
 components/CategoryGroup.js       |  2 +-
 components/DarkModeButton.js      |  4 +--
 components/FloatDarkModeButton.js |  3 ++-
 components/JumpToTopButton.js     |  9 ++++---
 components/SideArea.js            |  4 +--
 components/SideAreaDrawer.js      | 45 -------------------------------
 components/SideBar.js             |  4 +--
 components/SideBarDrawer.js       |  6 ++---
 components/TocDrawerButton.js     | 11 ++++----
 components/TopNav.js              |  7 +++--
 11 files changed, 27 insertions(+), 70 deletions(-)
 delete mode 100644 components/SideAreaDrawer.js

diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 93ba0122..83dc82b0 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -44,7 +44,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
     <>
      <Progress targetRef={targetRef} />
 
-      <div id="article-wrapper" ref={targetRef} className="flex-grow">
+      <div id="article-wrapper" ref={targetRef} className="flex-grow mt-14 md:mt-0">
         <div className="max-w-5xl mx-auto w-screen md:w-full ">
           <article
             itemScope
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 6e9c71e8..b21547ce 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -5,7 +5,7 @@ import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   return <>
-    <div id='category-list' className='dark:border-gray-600 dark:bg-gray-800 flex flex-wrap'>
+    <div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
       {Object.keys(categories).map(category => {
         const selected = currentCategory === category
         return <Link key={category} href={`/category/${category}`} passHref>
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 1bb7d086..c4df5e3c 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -11,8 +11,8 @@ const DarkModeButton = () => {
     saveTheme(newTheme)
     changeTheme(newTheme)
   }
-  return <div className='z-10 duration-200 text-lg cursor-pointer'>
-    <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='mx-2 my-2 hover:scale-125 transform duration-200'
+  return <div className='z-10 duration-200 text-xs cursor-pointer py-1.5 px-1'>
+    <FontAwesomeIcon icon={userTheme === 'dark' ? faSun : faMoon} id='darkModeButton' className='hover:scale-125 transform duration-200'
        onClick={handleChangeDarkMode} />
   </div>
 }
diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index b36b404b..06ed046d 100644
--- a/components/FloatDarkModeButton.js
+++ b/components/FloatDarkModeButton.js
@@ -6,7 +6,8 @@ export default function FloatDarkModeButton () {
   const [show, switchShow] = useState(false)
   const scrollListener = () => {
     const scrollY = window.pageYOffset
-    const shouldShow = scrollY > 100 && scrollY < windowTop
+    // const shouldShow = scrollY > 100 && scrollY < windowTop
+    const shouldShow = scrollY > 100
     windowTop = scrollY
     if (shouldShow !== show) {
       switchShow(shouldShow)
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index b8ee6e9e..2d708f27 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -25,7 +25,8 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     const fullHeight = clientHeight - window.outerHeight
     let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
     if (per > 100) per = 100
-    const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
+    // const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
+    const shouldShow = scrollY > 100 && per > 0
     windowTop = scrollY
 
     if (shouldShow !== show) {
@@ -39,11 +40,11 @@ const JumpToTopButton = ({ targetRef, showPercent = true }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div id='jump-to-top' className='right-5 fixed flex bottom-52 duration-500 z-20'>
+  return (<div id='jump-to-top' className='right-5 fixed flex bottom-48 duration-500 z-20'>
       <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-        className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-full glassmorphism p-2 cursor-pointer '}>
+        className={(show ? '' : 'hidden') + ' animate__fadeInRight animate__animated animate__faster shadow-card rounded-full glassmorphism py-1 cursor-pointer '}>
         <div className='text-center'>
-        <div className='w-10 dark:text-gray-200 transform hover:scale-125 duration-200' title={locale.POST.TOP} >
+        <div className='w-10 dark:text-gray-200 transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowUp} />
         </div>
           {showPercent && (<div className='w-10 text-xs dark:text-gray-200'>{percent}</div>)}
diff --git a/components/SideArea.js b/components/SideArea.js
index f01f4368..98728f09 100644
--- a/components/SideArea.js
+++ b/components/SideArea.js
@@ -86,8 +86,8 @@ const SideArea = ({ title, tags, currentTag, post, posts, categories, currentCat
     </div>
 
     {post && (
-      <section id='left-toc' className='sticky pb-20 top-0 pt-2 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
-        <div className='border-b text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
+      <section id='left-toc' className='sticky pb-20 top-6 rounded-xl shadow-lg bg-white dark:bg-gray-800'>
+        <div className='border-b text-2xl bg-white text-black rounded-t-xl dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
diff --git a/components/SideAreaDrawer.js b/components/SideAreaDrawer.js
deleted file mode 100644
index 2855ceb8..00000000
--- a/components/SideAreaDrawer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useImperativeHandle, useState } from 'react'
-import SideArea from './SideArea'
-
-/**
- * 侧边栏抽屉面板，可以从侧面拉出
- * @returns {JSX.Element}
- * @constructor
- */
-const SideAreaDrawer = ({ post, currentTag, cRef, tags, posts, categories, currentCategory }) => {
-  // 暴露给父组件 通过cRef.current.handleMenuClick 调用
-  useImperativeHandle(cRef, () => {
-    return {
-      handleSwitchSideDrawerVisible: () => switchSideDrawerVisible()
-    }
-  })
-  const [isShow, changeHiddenStatus] = useState(false)
-  // 点击按钮更改侧边抽屉状态
-  const switchSideDrawerVisible = () => {
-    const showStatus = !isShow
-    changeHiddenStatus(showStatus)
-    if (window) {
-      const sideBarDrawer = window.document.getElementById('sidebar-drawer')
-      const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
-
-      if (showStatus) {
-        sideBarDrawer.classList.replace('-ml-72', 'ml-2')
-        sideBarDrawerBackground.classList.replace('hidden', 'block')
-      } else {
-        sideBarDrawer.classList.replace('ml-2', '-ml-72')
-        sideBarDrawerBackground.classList.replace('block', 'hidden')
-      }
-    }
-  }
-  return <>
-    <div id='sidebar-drawer' className='-ml-72 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
-      <SideArea tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
-    </div>
-    {/* 背景蒙版 */}
-    <div id='sidebar-drawer-background'
-          className='hidden fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'
-         onClick={switchSideDrawerVisible} />
-
-  </>
-}
-export default SideAreaDrawer
diff --git a/components/SideBar.js b/components/SideBar.js
index cd1797ba..2c322052 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -25,7 +25,7 @@ import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/fr
  */
 const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCategory, currentSearch }) => {
   const { locale } = useGlobal()
-  return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+  return <aside id='sidebar' className='pt-5 bg-white dark:bg-gray-900 w-80 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
 
     <section className='hidden lg:block'>
       <InfoCard />
@@ -86,7 +86,7 @@ const SideBar = ({ title, tags, currentTag, post, posts, categories, currentCate
     </div>
 
     {post && (
-      <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900'>
+      <section id='left-toc' className='sticky pb-20 top-0 bg-white dark:bg-gray-900 hidden md:block'>
         <div className='border-b text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index 30e96a6a..e500ec77 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -23,16 +23,16 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
       const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
       if (showStatus) {
-        sideBarDrawer.classList.replace('-ml-72', 'ml-0')
+        sideBarDrawer.classList.replace('-ml-80', 'ml-0')
         sideBarDrawerBackground.classList.replace('hidden', 'block')
       } else {
-        sideBarDrawer.classList.replace('ml-0', '-ml-72')
+        sideBarDrawer.classList.replace('ml-0', '-ml-80')
         sideBarDrawerBackground.classList.replace('block', 'hidden')
       }
     }
   }
   return <>
-    <div id='sidebar-drawer' className='-ml-72 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
+    <div id='sidebar-drawer' className='-ml-80 bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-50'>
       <SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
     </div>
     {/* 背景蒙版 */}
diff --git a/components/TocDrawerButton.js b/components/TocDrawerButton.js
index 4b2d9e71..e3c0f159 100644
--- a/components/TocDrawerButton.js
+++ b/components/TocDrawerButton.js
@@ -16,7 +16,8 @@ const TocDrawerButton = (props) => {
   const [show, switchShow] = useState(false)
   const scrollListener = () => {
     const scrollY = window.pageYOffset
-    const shouldShow = scrollY > 100 && scrollY < windowTop
+    // const shouldShow = scrollY > 100 && scrollY < windowTop
+    const shouldShow = scrollY > 100
     windowTop = scrollY
 
     if (shouldShow !== show) {
@@ -29,10 +30,10 @@ const TocDrawerButton = (props) => {
   })
 
   return (
-    <div id='toc-drawer-button' className='right-5 fixed bottom-72 duration-500 z-40' onClick={props.onClick}>
-        <div className={(show ? 'animate__fadeInRight' : 'hidden') + ' px-2 py-4 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
-            <div className='w-10 dark:text-gray-200 text-center transform hover:scale-125 duration-200' title={locale.POST.TOP} >
-              <div className='w-10 text-md' title={locale.COMMON.TABLE_OF_CONTENTS} ><FontAwesomeIcon icon={faListOl} /> </div>
+    <div id='toc-drawer-button' className='right-5 fixed bottom-60 duration-500 z-40' onClick={props.onClick}>
+        <div className={(show ? 'animate__fadeInRight' : 'hidden') + ' py-3 px-3.5 animate__animated glassmorphism rounded-full cursor-pointer shadow-card' }>
+            <div className='dark:text-gray-200 text-center transform hover:scale-125 duration-200 text-xs' title={locale.POST.TOP} >
+              <FontAwesomeIcon icon={faListOl} />
             </div>
         </div>
     </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index ff50da79..48108b46 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,11 +1,11 @@
 import { useRef } from 'react'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
 import BLOG from '@/blog.config'
 import Link from 'next/link'
 import Image from 'next/image'
 import { useGlobal } from '@/lib/global'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
 
 const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
   const drawer = useRef()
@@ -46,9 +46,8 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
             <a>{locale.NAV.ABOUT}</a>
           </Link>
           <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='ppb-1z-30 text-gray-600 text-2xl flex items-center cursor-pointer dark:text-gray-300'>
-            <FontAwesomeIcon icon={faBars} className='hover:scale-125 transform duration-200'
-            />
+               className='cursor-pointer dark:text-gray-300'>
+            {locale.NAV.SEARCH}
           </div>
         </div>
       </div>