修复移动端显示bug

This commit is contained in:
CaIon 2023-10-31 01:19:19 +08:00
parent 79bf621289
commit db358facc0
2 changed files with 75 additions and 151 deletions

View File

@ -85,81 +85,81 @@ const HeaderBar = () => {
});
};
if (isMobile()) {
return (
<>
<Menu
borderless
size='large'
style={
showSidebar
? {
borderBottom: 'none',
marginBottom: '0',
borderTop: 'none',
height: '51px'
}
: {borderTop: 'none', height: '52px'}
}
>
<Container>
<Menu.Item as={Link} to='/'>
<img
src={logo}
alt='logo'
style={{marginRight: '0.75em'}}
/>
<div style={{fontSize: '20px'}}>
<b>{systemName}</b>
</div>
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item onClick={toggleSidebar}>
<Icon name={showSidebar ? 'close' : 'sidebar'}/>
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
{showSidebar ? (
<Segment style={{marginTop: 0, borderTop: '0'}}>
<Menu secondary vertical style={{ width: '100%', margin: 0 }}>
{renderButtons(true)}
<Menu.Item>
{userState.user ? (
<Button onClick={logout}>注销</Button>
) : (
<>
<Button
onClick={() => {
setShowSidebar(false);
navigate('/login');
}}
>
登录
</Button>
<Button
onClick={() => {
setShowSidebar(false);
navigate('/register');
}}
>
注册
</Button>
</>
)}
</Menu.Item>
</Menu>
</Segment>
) : (
<></>
)}
</>
);
}
// if (isMobile()) {
// return (
// <>
// <Menu
// borderless
// size='large'
// style={
// showSidebar
// ? {
// borderBottom: 'none',
// marginBottom: '0',
// borderTop: 'none',
// height: '51px'
// }
// : {borderTop: 'none', height: '52px'}
// }
// >
// <Container>
// <Menu.Item as={Link} to='/'>
// <img
// src={logo}
// alt='logo'
// style={{marginRight: '0.75em'}}
// />
// <div style={{fontSize: '20px'}}>
// <b>{systemName}</b>
// </div>
// </Menu.Item>
// <Menu.Menu position='right'>
// <Menu.Item onClick={toggleSidebar}>
// <Icon name={showSidebar ? 'close' : 'sidebar'}/>
// </Menu.Item>
// </Menu.Menu>
// </Container>
// </Menu>
//
// {showSidebar ? (
// <Segment style={{marginTop: 0, borderTop: '0'}}>
// <Menu secondary vertical style={{ width: '100%', margin: 0 }}>
// {renderButtons(true)}
// <Menu.Item>
// {userState.user ? (
// <Button onClick={logout}>注销</Button>
// ) : (
// <>
// <Button
// onClick={() => {
// setShowSidebar(false);
// navigate('/login');
// }}
// >
// 登录
// </Button>
// <Button
// onClick={() => {
// setShowSidebar(false);
// navigate('/register');
// }}
// >
// 注册
// </Button>
// </>
// )}
// </Menu.Item>
// </Menu>
//
// </Segment>
// ) : (
// <></>
// )}
//
//
// </>
// );
// }
const switchMode = (model) => {
const body = document.body;
if (!model) {

View File

@ -142,82 +142,6 @@ const HeaderBar = () => {
});
};
if (isMobile()) {
return (
<>
<Menu
borderless
size='large'
style={
showSidebar
? {
borderBottom: 'none',
marginBottom: '0',
borderTop: 'none',
height: '51px'
}
: {borderTop: 'none', height: '52px'}
}
>
<Container>
<Menu.Item as={Link} to='/'>
<img
src={logo}
alt='logo'
style={{marginRight: '0.75em'}}
/>
<div style={{fontSize: '20px'}}>
<b>{systemName}</b>
</div>
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item onClick={toggleSidebar}>
<Icon name={showSidebar ? 'close' : 'sidebar'}/>
</Menu.Item>
</Menu.Menu>
</Container>
</Menu>
{showSidebar ? (
<Segment style={{marginTop: 0, borderTop: '0'}}>
{/*<Menu secondary vertical style={{ width: '100%', margin: 0 }}>*/}
{/* {renderButtons(true)}*/}
{/* <Menu.Item>*/}
{/* {userState.user ? (*/}
{/* <Button onClick={logout}>注销</Button>*/}
{/* ) : (*/}
{/* <>*/}
{/* <Button*/}
{/* onClick={() => {*/}
{/* setShowSidebar(false);*/}
{/* navigate('/login');*/}
{/* }}*/}
{/* >*/}
{/* 登录*/}
{/* </Button>*/}
{/* <Button*/}
{/* onClick={() => {*/}
{/* setShowSidebar(false);*/}
{/* navigate('/register');*/}
{/* }}*/}
{/* >*/}
{/* 注册*/}
{/* </Button>*/}
{/* </>*/}
{/* )}*/}
{/* </Menu.Item>*/}
{/*</Menu>*/}
</Segment>
) : (
<></>
)}
</>
);
}
return (
<>
<Layout>