feat: Implement chat page state management in layout and sidebar
- Added `isChatPage` state to the Style context to manage chat page layout. - Updated `PageLayout` component to adjust padding based on the chat page state. - Enhanced `SiderBar` component to dispatch chat page state changes when chat-related items are selected.
This commit is contained in:
@@ -23,7 +23,7 @@ const PageLayout = () => {
|
|||||||
</Sider>
|
</Sider>
|
||||||
<Layout>
|
<Layout>
|
||||||
<Content
|
<Content
|
||||||
style={{ overflowY: 'auto', padding: '24px' }}
|
style={{ overflowY: 'auto', padding: styleState.isChatPage? '0': '24px' }}
|
||||||
>
|
>
|
||||||
<App />
|
<App />
|
||||||
</Content>
|
</Content>
|
||||||
|
|||||||
@@ -279,6 +279,11 @@ const SiderBar = () => {
|
|||||||
}}
|
}}
|
||||||
items={headerButtons}
|
items={headerButtons}
|
||||||
onSelect={(key) => {
|
onSelect={(key) => {
|
||||||
|
if (key.itemKey.toString().startsWith('chat')) {
|
||||||
|
styleDispatch({ type: 'SET_CHAT_PAGE', payload: true });
|
||||||
|
} else {
|
||||||
|
styleDispatch({ type: 'SET_CHAT_PAGE', payload: false });
|
||||||
|
}
|
||||||
setSelectedKeys([key.itemKey]);
|
setSelectedKeys([key.itemKey]);
|
||||||
}}
|
}}
|
||||||
footer={
|
footer={
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
|
|||||||
const [state, setState] = useState({
|
const [state, setState] = useState({
|
||||||
isMobile: false,
|
isMobile: false,
|
||||||
showSider: false,
|
showSider: false,
|
||||||
|
isChatPage: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const dispatch = (action) => {
|
const dispatch = (action) => {
|
||||||
@@ -25,6 +26,9 @@ export const StyleProvider = ({ children }) => {
|
|||||||
case 'SET_MOBILE':
|
case 'SET_MOBILE':
|
||||||
setState(prev => ({ ...prev, isMobile: action.payload }));
|
setState(prev => ({ ...prev, isMobile: action.payload }));
|
||||||
break;
|
break;
|
||||||
|
case 'SET_CHAT_PAGE':
|
||||||
|
setState(prev => ({ ...prev, isChatPage: action.payload }));
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
setState(prev => ({ ...prev, ...action }));
|
setState(prev => ({ ...prev, ...action }));
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user