llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-22 18:25:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: fix dynamic width of navbar UI (#3664)

Browse Source
This commit is contained in:
WindSpiritSR 2025-03-16 16:12:58 +08:00 committed by GitHub
parent 7be026dd1f
commit aafc16e4f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/src/ManagementPage.js
View File

@ -443,8 +443,6 @@ function ManagementPage(props) {
return Setting.isMobile() || window.location.pathname.startsWith("/trees"); return Setting.isMobile() || window.location.pathname.startsWith("/trees");
} }
const menuStyleRight = Setting.isAdminUser(props.account) && !Setting.isMobile() ? "calc(180px + 280px)" : "320px";
const onClose = () => { const onClose = () => {
setMenuVisible(false); setMenuVisible(false);
}; };
@ -456,34 +454,40 @@ function ManagementPage(props) {
return ( return (
<React.Fragment> <React.Fragment>
<EnableMfaNotification account={props.account} /> <EnableMfaNotification account={props.account} />
<Header style={{padding: "0", marginBottom: "3px", backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}} > <Header style={{display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0", marginBottom: "4px", backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}} >
{props.requiredEnableMfa || (Setting.isMobile() ?
<React.Fragment>
<Drawer title={i18next.t("general:Close")} placement="left" open={menuVisible} onClose={onClose}>
<Menu
items={getMenuItems()}
mode={"inline"}
selectedKeys={[props.selectedMenuKey]}
style={{lineHeight: "64px"}}
onClick={onClose}
>
</Menu>
</Drawer>
<Button icon={<BarsOutlined />} onClick={showMenu} type="text">
{i18next.t("general:Menu")}
</Button>
</React.Fragment> :
<Menu
onClick={onClose}
items={getMenuItems()}
mode={"horizontal"}
selectedKeys={[props.selectedMenuKey]}
style={{position: "absolute", left: 0, right: menuStyleRight, backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}}
/>
)}
{ {
renderAccountMenu() props.requiredEnableMfa || (Setting.isMobile() ? (
<React.Fragment>
<Drawer title={i18next.t("general:Close")} placement="left" open={menuVisible} onClose={onClose}>
<Menu
items={getMenuItems()}
mode={"inline"}
selectedKeys={[props.selectedMenuKey]}
style={{lineHeight: "64px"}}
onClick={onClose}
>
</Menu>
</Drawer>
<Button icon={<BarsOutlined />} onClick={showMenu} type="text">
{i18next.t("general:Menu")}
</Button>
</React.Fragment>
) : (
// Padding 1px for Menu Item Highlight border
<div style={{flex: 1, overflow: "hidden", paddingBottom: "1px"}}>
<Menu
onClick={onClose}
items={getMenuItems()}
mode={"horizontal"}
selectedKeys={[props.selectedMenuKey]}
style={{backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}}
/>
</div>
))
} }
<div style={{flexShrink: 0}}>
{renderAccountMenu()}
</div>
</Header> </Header>
<Content style={{display: "flex", flexDirection: "column"}} > <Content style={{display: "flex", flexDirection: "column"}} >
{isWithoutCard() ? {isWithoutCard() ?