oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Correct inner padding and sider visibility logic in HeaderBar, PageLayout, and SiderBar components

Browse Source 
- 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.
This commit is contained in:
CalciumIon
2024-12-12 20:31:40 +08:00
parent 263547ebb7
commit e17f36e7b7
4 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/HeaderBar.js
View File

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

4
web/src/components/PageLayout.js
View File

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

4
web/src/components/SiderBar.js
View File

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

20
web/src/context/Style/index.js
View File

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