From e17f36e7b75eb44e87bf4fd6cbb30e46d155fbab Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Thu, 12 Dec 2024 20:31:40 +0800
Subject: [PATCH] fix: Correct inner padding and sider visibility logic in
 HeaderBar, PageLayout, and SiderBar components

- Updated the click handler in HeaderBar to toggle inner padding and sider visibility correctly based on the selected item.
- Adjusted the conditional rendering of SiderBar in PageLayout to ensure it displays when the sider is shown.
- Refined the inner padding logic in SiderBar to maintain consistent behavior when selecting items.
- Introduced a new function in Style context to manage sider visibility based on the current pathname, enhancing responsiveness to navigation changes.
---
 web/src/components/HeaderBar.js  | 10 +++++-----
 web/src/components/PageLayout.js |  4 ++--
 web/src/components/SiderBar.js   |  4 ++--
 web/src/context/Style/index.js   | 20 ++++++++++++++++++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index 6234d867..1ddf24e9 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -124,11 +124,11 @@ const HeaderBar = () => {
               return (
                 <div onClick={(e) => {
                   if (props.itemKey === 'home') {
-                    styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
-                    styleDispatch({ type: 'SET_SIDER', payload: true });
-                  } else {
                     styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
                     styleDispatch({ type: 'SET_SIDER', payload: false });
+                  } else {
+                    styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
+                    styleDispatch({ type: 'SET_SIDER', payload: true });
                   }
                 }}>
                   <Link
@@ -150,10 +150,10 @@ const HeaderBar = () => {
                   {
                     styleState.showSider ?
                       <Button icon={<IconMenu />} theme="light" aria-label="展开侧边栏" onClick={
-                        () => styleDispatch({ type: 'SET_SIDER', payload: false })
+                        () => styleDispatch({ type: 'SET_SIDER', payload: true })
                       } />:
                       <Button icon={<IconIndentLeft />} theme="light" aria-label="关闭侧边栏" onClick={
-                        () => styleDispatch({ type: 'SET_SIDER', payload: true })
+                        () => styleDispatch({ type: 'SET_SIDER', payload: false })
                       } />
                   }
                 </>
diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index 6a8a9f1f..187ee15e 100644
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -19,11 +19,11 @@ const PageLayout = () => {
       </Header>
       <Layout style={{ flex: 1, overflow: 'hidden' }}>
         <Sider>
-          {styleState.showSider ? null : <SiderBar />}
+          {styleState.showSider ? <SiderBar /> : null}
         </Sider>
         <Layout>
           <Content
-            style={{ overflowY: styleState.shouldInnerPadding?'hidden':'auto', padding: styleState.shouldInnerPadding? '0': '24px' }}
+            style={{ overflowY: styleState.shouldInnerPadding?'auto':'hidden', padding: styleState.shouldInnerPadding? '24px': '0' }}
           >
             <App />
           </Content>
diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index 0bad3142..603fa338 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -274,9 +274,9 @@ const SiderBar = () => {
         items={headerButtons}
         onSelect={(key) => {
           if (key.itemKey.toString().startsWith('chat')) {
-            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
-          } else {
             styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
+          } else {
+            styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
           }
           setSelectedKeys([key.itemKey]);
         }}
diff --git a/web/src/context/Style/index.js b/web/src/context/Style/index.js
index 43206b43..46d5e6a1 100644
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -44,6 +44,26 @@ export const StyleProvider = ({ children }) => {
 
     updateIsMobile();
 
+    const updateShowSider = () => {
+      if (isMobile()) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+      } else {
+        // check pathname
+        const pathname = window.location.pathname;
+        console.log(pathname)
+        if (pathname === '' || pathname === '/' || pathname.includes('/home') || pathname.includes('/chat')) {
+          dispatch({ type: 'SET_SIDER', payload: false });
+          dispatch({ type: 'SET_INNER_PADDING', payload: false });
+        } else {
+          dispatch({ type: 'SET_SIDER', payload: true });
+          dispatch({ type: 'SET_INNER_PADDING', payload: true });
+        }
+      }
+    };
+
+    updateShowSider()
+
+
     // Optionally, add event listeners to handle window resize
     window.addEventListener('resize', updateIsMobile);