mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-04-19 15:38:37 +00:00
e17f36e7b7
- 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.
40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
import HeaderBar from './HeaderBar.js';
|
|
import { Layout } from '@douyinfe/semi-ui';
|
|
import SiderBar from './SiderBar.js';
|
|
import App from '../App.js';
|
|
import FooterBar from './Footer.js';
|
|
import { ToastContainer } from 'react-toastify';
|
|
import React, { useContext } from 'react';
|
|
import { StyleContext } from '../context/Style/index.js';
|
|
const { Sider, Content, Header, Footer } = Layout;
|
|
|
|
|
|
const PageLayout = () => {
|
|
const [styleState, styleDispatch] = useContext(StyleContext);
|
|
|
|
return (
|
|
<Layout style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
<Header>
|
|
<HeaderBar />
|
|
</Header>
|
|
<Layout style={{ flex: 1, overflow: 'hidden' }}>
|
|
<Sider>
|
|
{styleState.showSider ? <SiderBar /> : null}
|
|
</Sider>
|
|
<Layout>
|
|
<Content
|
|
style={{ overflowY: styleState.shouldInnerPadding?'auto':'hidden', padding: styleState.shouldInnerPadding? '24px': '0' }}
|
|
>
|
|
<App />
|
|
</Content>
|
|
<Layout.Footer>
|
|
<FooterBar></FooterBar>
|
|
</Layout.Footer>
|
|
</Layout>
|
|
</Layout>
|
|
<ToastContainer />
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default PageLayout; |