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

@@ -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 })
                       } />
                   }
                 </>

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>

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]);
         }}

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);