Drawer的文章分类

components/Drawer.js

@@ -1,5 +1,3 @@
-import Link from 'next/link'
-import BLOG from '@/blog.config'
 import SearchInput from '@/components/SearchInput'
 import MenuButtonGroup from '@/components/MenuButtonGroup'
 import React, { useImperativeHandle, useState } from 'react'
@@ -7,13 +5,14 @@ import InfoCard from '@/components/InfoCard'
 import TagList from '@/components/TagList'
 import Logo from '@/components/Logo'
 import LatestPosts from '@/components/LatestPosts'
+import PostsCategories from '@/components/PostsCategories'
 
 /**
  * 抽屉面板，可以从侧面拉出
  * @returns {JSX.Element}
  * @constructor
  */
-const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
+const Drawer = ({ post, currentTag, cRef, tags, posts, categories, currentCategory }) => {
   // 暴露给父组件 通过cRef.current.handleMenuClick 调用
   useImperativeHandle(cRef, () => {
     return {
@@ -62,6 +61,13 @@ const Drawer = ({ post, currentTag, cRef, tags, posts }) => {
             </div>
           )}
 
+          {/* 分类  */}
+          {categories && (
+            <div className='mt-2'>
+              <PostsCategories currentCategory={currentCategory} categories={categories}/>
+            </div>
+          )}
+
           {/* 标签云  */}
           {tags && (
             <div className='mt-2'>

components/TopNav.js

@@ -5,13 +5,13 @@ import Drawer from '@/components/Drawer'
 import DrawerRight from '@/components/DrawerRight'
 import Logo from '@/components/Logo'
 
-const TopNav = ({ tags, currentTag, post, posts, currentSearch }) => {
+const TopNav = ({ tags, currentTag, post, posts, currentSearch, categories, currentCategory }) => {
   const drawer = useRef()
   const drawerRight = useRef()
 
   return (<>
     {/* 侧面抽屉 */}
-    <Drawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts}/>
+    <Drawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
     <DrawerRight post={post} cRef={drawerRight}/>
 
     {/* 导航栏 */}

layouts/BaseLayout.js

@@ -37,7 +37,7 @@ const BaseLayout = ({ children, layout, fullWidth, tags, meta, post, totalPosts,
     <div id='wrapper' className={[BLOG.font, theme].join(' ')}>
       <CommonHead meta={meta} />
 
-      <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} />
+      <TopNav tags={tags} post={post} posts={totalPosts} currentSearch={currentSearch} categories={categories} currentCategory={currentCategory}/>
       {/* Middle Wrapper */}
       <main className='flex dark:bg-black'>
         <SideBar tags={tags} post={post} posts={totalPosts} categories={categories} currentCategory={currentCategory} />