From 75e901780e07585ee49d411d370a9ab5f2844d06 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Tue, 4 Jan 2022 12:29:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=8A=BD=E5=B1=89?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=8A=98=E5=8F=A0=E3=80=81=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SideBarDrawer.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
index 0c751c58..93ccfa52 100644
--- a/components/SideBarDrawer.js
+++ b/components/SideBarDrawer.js
@@ -1,5 +1,6 @@
 import SideBar from '@/components/SideBar'
-import React, { useEffect, useImperativeHandle, useState } from 'react'
+import { useRouter } from 'next/router'
+import React, { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 侧边栏抽屉面板，可以从侧面拉出
@@ -10,7 +11,7 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
   // 暴露给父组件 通过cRef.current.handleMenuClick 调用
   useImperativeHandle(cRef, () => {
     return {
-      handleSwitchSideDrawerVisible: () => switchSideDrawerVisible()
+      handleSwitchSideDrawerVisible: () => switchSideDrawerVisible(true)
     }
   })
 
@@ -19,11 +20,19 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
     sideBarWrapperElement?.classList?.remove('hidden')
   })
 
+  const router = useRouter()
+  useEffect(() => {
+    const sideBarDrawerRouteListener = url => {
+      switchSideDrawerVisible(false)
+    }
+    router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+    return () => {
+      router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+    }
+  }, [router.events])
+
   // 点击按钮更改侧边抽屉状态
-  const [isShow, changeHiddenStatus] = useState(false)
-  const switchSideDrawerVisible = () => {
-    const showStatus = !isShow
-    changeHiddenStatus(showStatus)
+  const switchSideDrawerVisible = (showStatus) => {
     if (window) {
       const sideBarDrawer = window.document.getElementById('sidebar-drawer')
       const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
@@ -39,11 +48,11 @@ const SideBarDrawer = ({ post, currentTag, cRef, tags, posts, categories, curren
   }
 
   return <div id='sidebar-wrapper' className='hidden'>
-    <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'>
+    <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 shadow-2xl'>
       <SideBar tags={tags} post={post} posts={posts} categories={categories} currentCategory={currentCategory} />
     </div>
     {/* 背景蒙版 */}
-    <div id='sidebar-drawer-background' onClick={switchSideDrawerVisible} className='hidden fixed top-0 left-0 z-30 w-full h-full bg-black bg-opacity-30'/>
+    <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }} className='hidden animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-30 w-full h-full glassmorphism'/>
 
   </div>
 }