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/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>