导航条加阴影；

航条标签栏滚动时隐藏；
使用Container容器;
移动端文章边距调整。

components/TopNav.js

@@ -1,24 +1,31 @@
 import Link from 'next/link'
 import BLOG from '@/blog.config'
-import React from 'react'
+import React, { useRef } from 'react'
 import DarkModeButton from '@/components/DarkModeButton'
 import Image from 'next/image'
 import SearchInput from '@/components/SearchInput'
 import Drawer from '@/components/Drawer'
 
 const TopNav = ({ tags, currentTag, post }) => {
-  return (
-    <div className='bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
+  const drawer = useRef()
 
-      {/* 侧面抽屉 */}
-      <Drawer post={post} currentTag={currentTag} />
+  return (<div className='fixed w-full top-0 z-20'>
+    {/* 侧面抽屉 */}
+    <Drawer post={post} currentTag={currentTag} cRef={drawer} />
 
+    <div id='sticky-nav'
+         className='transform xl:mt-0 duration-500 bg-white dark:bg-gray-800 border-b dark:border-gray-700'>
       {/* 导航栏 */}
       <div
-        id='sticky-nav'
-        className='text-sm m-auto w-full flex flex-row justify-between items-center p-2 md:px-4'
+        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'>
+          <div onClick={() => { drawer.current.handleMenuClick() }}
+               className='fixed top-3 left-0 z-30 py-1 px-5 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
+            <i className='fa hover:scale-125 transform duration-200 fa-bars '
+            />
+          </div>
           <Link href='/'>
             <a
               className='flex text-xl py-1 px-3 justify-center align-middle my-auto font-bold font-semibold hover:bg-gray-800 hover:text-white duration-200
@@ -27,11 +34,12 @@ const TopNav = ({ tags, currentTag, post }) => {
           </Link>
         </div>
 
+        {/* 中间搜索框 */}
         <div className='hidden sm:block w-96'>
-          {/* 搜索框 */}
           <SearchInput currentTag={currentTag} />
         </div>
 
+        {/* 右侧功能 */}
         <div className='flex flex-nowrap space-x-1'>
           <DarkModeButton />
           <div className='flex align-middle cursor-pointer'>
@@ -48,7 +56,8 @@ const TopNav = ({ tags, currentTag, post }) => {
         </div>
       </div>
     </div>
-  )
+
+  </div>)
 }
 
 export default TopNav