feat: Refactor style management for inner padding in layout components
- Updated HeaderBar, PageLayout, and SiderBar components to manage inner padding state based on selected items. - Replaced `isChatPage` state with `shouldInnerPadding` in Style context for better clarity and functionality. - Enhanced user experience by dynamically adjusting content padding based on navigation selections.
This commit is contained in:
@@ -118,8 +118,10 @@ 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 });
|
||||
}
|
||||
}}>
|
||||
|
||||
@@ -23,7 +23,7 @@ const PageLayout = () => {
|
||||
</Sider>
|
||||
<Layout>
|
||||
<Content
|
||||
style={{ overflowY: 'auto', padding: styleState.isChatPage? '0': '24px' }}
|
||||
style={{ overflowY: styleState.shouldInnerPadding?'hidden':'auto', padding: styleState.shouldInnerPadding? '0': '24px' }}
|
||||
>
|
||||
<App />
|
||||
</Content>
|
||||
|
||||
@@ -280,9 +280,9 @@ const SiderBar = () => {
|
||||
items={headerButtons}
|
||||
onSelect={(key) => {
|
||||
if (key.itemKey.toString().startsWith('chat')) {
|
||||
styleDispatch({ type: 'SET_CHAT_PAGE', payload: true });
|
||||
styleDispatch({ type: 'SET_INNER_PADDING', payload: true });
|
||||
} else {
|
||||
styleDispatch({ type: 'SET_CHAT_PAGE', payload: false });
|
||||
styleDispatch({ type: 'SET_INNER_PADDING', payload: false });
|
||||
}
|
||||
setSelectedKeys([key.itemKey]);
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user