gitbook 布局交互优化

themes/gitbook/components/PageNavDrawer.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import NavPostList from './NavPostList'
 
@@ -11,6 +12,7 @@ import NavPostList from './NavPostList'
 const PageNavDrawer = props => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
   const { filteredNavPages } = props
+  const { locale } = useGlobal()
 
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
@@ -24,7 +26,15 @@ const PageNavDrawer = props => {
         {/* 侧边菜单 */}
         <div
           className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
-                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+          <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+            <span>{locale.COMMON.ARTICLE}</span>
+            <i
+              className='fas fa-times p-1 cursor-pointer'
+              onClick={() => {
+                changePageNavVisible(false)
+              }}></i>
+          </div>
           {/* 所有文章列表 */}
           <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
             <NavPostList filteredNavPages={filteredNavPages} />