From c4f4156f7f902cd7525feb69cff5f568539dcfe4 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Tue, 4 Jul 2023 17:41:22 +0800
Subject: [PATCH] =?UTF-8?q?fukasawa-=E6=8A=98=E5=8F=A0=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/fukasawa/components/AsideLeft.js | 96 ++++++++++++++-----------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index 58d690ec..e839d0a7 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -9,60 +9,74 @@ import Announcement from './Announcement'
 import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
 import SocialButton from './SocialButton'
+import { useState } from 'react'
 
-function AsideLeft (props) {
+function AsideLeft(props) {
   const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
   const router = useRouter()
-  return <div className='sideLeft relative w-80 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
-    <Logo {...props}/>
+  const [open, setOpen] = useState(true)
+  // 折叠侧边栏
+  const toggleOpen = () => {
+    setOpen(!open)
+  }
+  return <div className={`sideLeft relative ${open ? 'w-80' : 'w-0'} duration-150 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+        {/* 折叠按钮 */}
+        <div className={`${open ? 'ml-80' : ''} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-150 px-3 py-2`} onClick={toggleOpen}>
+            {open ? <i className='fas fa-bars text-xl'></i> : <i className="fa-solid fa-indent text-xl"></i>}
+        </div>
 
-    <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-      { siteInfo?.description }
-    </section>
+        <div className={` ${open ? 'px-10' : 'hidden'}`}>
 
-    <section className='flex flex-col text-gray-600'>
-      <div className='w-12 my-4' />
-      <MenuList {...props}/>
-    </section>
+            <Logo {...props} />
 
-    <section className='flex flex-col text-gray-600'>
-      <div className='w-12 my-4' />
-      <SearchInput {...props}/>
-    </section>
+            <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
+                {siteInfo?.description}
+            </section>
 
-    <section className='flex flex-col dark:text-gray-300'>
-      <div className='w-12 my-4' />
-      <Announcement post={notice}/>
-    </section>
+            <section className='flex flex-col text-gray-600'>
+                <div className='w-12 my-4' />
+                <MenuList {...props} />
+            </section>
 
-    {router.asPath !== '/tag' && <section className='flex flex-col'>
-      <div className='w-12 my-4' />
-      <GroupTag tags={tagOptions} currentTag={currentTag}/>
-    </section>}
+            <section className='flex flex-col text-gray-600'>
+                <div className='w-12 my-4' />
+                <SearchInput {...props} />
+            </section>
 
-    {router.asPath !== '/category' && <section className='flex flex-col'>
-      <div className='w-12 my-4' />
-      <GroupCategory categories={categoryOptions} currentCategory={currentCategory}/>
-    </section>}
+            <section className='flex flex-col dark:text-gray-300'>
+                <div className='w-12 my-4' />
+                <Announcement post={notice} />
+            </section>
 
-    <section className='flex flex-col'>
-      <div className='w-12 my-4' />
-      <SocialButton/>
-      <SiteInfo/>
-    </section>
+            {router.asPath !== '/tag' && <section className='flex flex-col'>
+                <div className='w-12 my-4' />
+                <GroupTag tags={tagOptions} currentTag={currentTag} />
+            </section>}
 
-    <section className='flex justify-center dark:text-gray-200'>
-        <DarkModeButton/>
-    </section>
+            {router.asPath !== '/category' && <section className='flex flex-col'>
+                <div className='w-12 my-4' />
+                <GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
+            </section>}
 
-    <section className='sticky top-0 pt-12'>
-      <Catalog toc={post?.toc}/>
-      <div className='flex justify-center'>
-        <div>{slot}</div>
-      </div>
-    </section>
+            <section className='flex flex-col'>
+                <div className='w-12 my-4' />
+                <SocialButton />
+                <SiteInfo />
+            </section>
 
-  </div>
+            <section className='flex justify-center dark:text-gray-200 pt-4'>
+                <DarkModeButton />
+            </section>
+
+            <section className='sticky top-0 pt-12'>
+                <Catalog toc={post?.toc} />
+                <div className='flex justify-center'>
+                    <div>{slot}</div>
+                </div>
+            </section>
+
+        </div>
+    </div>
 }
 
 export default AsideLeft