sideBar目录

components/SideBar.js

@@ -4,7 +4,20 @@ import InfoCard from '@/components/InfoCard'
 import TagList from '@/components/TagList'
 import LatestPosts from '@/components/LatestPosts'
 import PostsCategories from '@/components/PostsCategories'
+import Toc from '@/components/Toc'
+import SearchInput from '@/components/SearchInput'
 
+/**
+ * 侧边栏
+ * @param tags
+ * @param currentTag
+ * @param post
+ * @param posts
+ * @param categories
+ * @param currentCategory
+ * @returns {JSX.Element}
+ * @constructor
+ */
 const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory }) => {
   // 按时间排序
   if (posts) {
@@ -15,47 +28,60 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory })
     }).slice(0, 5)
   }
 
-  return <aside className='z-10 dark:border-gray-500 border-gray-200 bg-white hidden xl:block'>
-    <div
-      className='w-72 dark:bg-gray-800 h-full scroll-hidden left-0 duration-500 ease-in-out min-h-screen'>
-      <div id='sidebar' className='hidden md:block sticky top-20 pb-56 duration-500'>
-        <>
-          <InfoCard />
-          <hr className='dark:border-gray-700' />
-          <MenuButtonGroup allowCollapse={true} />
-        </>
+  return <aside id='sidebar' className='bg-white dark:bg-gray-800 w-72 z-10 dark:border-gray-500 border-gray-200 scroll-hidden h-full'>
+    <section>
+      <InfoCard />
+    </section>
 
+    <div className={(!post ? 'sticky top-0' : '') + ' bg-white dark:bg-gray-800'}>
+
+      {/* 搜索框 */}
+      <section className='p-5'>
+        <SearchInput currentTag={currentTag} />
+      </section>
+
+      <section>
+        <hr className='dark:border-gray-700' />
+        <MenuButtonGroup allowCollapse={true} />
         <hr className='dark:border-gray-700 my-2' />
+      </section>
 
-        {/* 分类  */}
-        {categories && (
-          <div className='mt-2'>
-            <PostsCategories currentCategory={currentCategory} categories={categories}/>
+      {/* 分类  */}
+      {categories && (
+        <section className='mt-2'>
+          <PostsCategories currentCategory={currentCategory} categories={categories} />
+        </section>
+      )}
+
+      {/* 最新文章 */}
+      {posts && (
+        <section className='mt-2'>
+          <LatestPosts posts={posts} />
+        </section>
+      )}
+
+      {/* 标签云  */}
+      {tags && (
+        <section className='mt-2'>
+          <section
+            className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
+            <div className='w-32'>标签</div>
+          </section>
+          <div className='px-5'>
+            <TagList tags={tags} currentTag={currentTag} />
           </div>
-        )}
-
-        {/* 最新文章 */}
-        {posts && (
-          <div className='mt-2'>
-            <LatestPosts posts={posts}/>
-          </div>
-        )}
-
-        {/* 标签云  */}
-        {tags && (
-          <div className='mt-2'>
-            <section
-              className='text-sm font-bold py-3 px-5 text-gray-600 dark:text-gray-400 duration-100 flex flex-nowrap align-middle'>
-              <div className='w-32'>标签</div>
-            </section>
-            <div className='px-5'>
-              <TagList tags={tags} currentTag={currentTag} />
-            </div>
-          </div>
-        )}
-
-      </div>
+        </section>
+      )}
     </div>
+
+    {post && (
+      <section id='left-toc' className='sticky top-0 bg-white dark:bg-gray-800'>
+        <Toc toc={post.toc} />
+      </section>
+    )}
+
+     <section id='blank' className='bg-white dark:bg-gray-800 py-20'/>
+
   </aside>
 }
 export default SideBar