From 2b70058f70f590b05b5de9cad2c5b2db37f97b9a Mon Sep 17 00:00:00 2001
From: Bhwa233 <404174262@qq.com>
Date: Sat, 16 Mar 2024 11:48:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=98=E5=8F=A0=E6=8C=89=E9=92=AE=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=8F=B3=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/fukasawa/components/AsideLeft.js | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index 0c8aa27d..984385cf 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -14,7 +14,7 @@ import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
 import MailChimpForm from './MailChimpForm'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
 import { debounce } from 'lodash'
 
@@ -75,14 +75,30 @@ function AsideLeft(props) {
       }
     }
   }, [])
-
+  const position = useMemo(()=>{
+    const isReverse = JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+    if(isCollapsed){
+      if(isReverse){
+        return 'right-2'
+      }else{
+        return 'left-2'
+      }
+    }else{
+      if(isReverse){
+        return 'right-80'
+      }else{
+        return 'left-80'
+      }
+    }
+  },[isCollapsed] )
+ 
   return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
         {/* 折叠按钮 */}
-    {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${isCollapsed ? '' : 'ml-80'} hidden lg:block sticky top-0 mx-2 cursor-pointer hover:scale-110 duration-300 px-3 py-2   dark:text-white`} onClick={toggleOpen}>
+    {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2   dark:text-white`} onClick={toggleOpen}>
             {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
         </div>}
 
-        <div className={`h-full ${isCollapsed ? 'hidden' : 'px-8'}`}>
+        <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
 
             <Logo {...props} />