fix: window navbar layout

This commit is contained in:
kangfenmao 2025-01-08 14:19:09 +08:00
parent 7271a86677
commit f9f5befc59
2 changed files with 15 additions and 14 deletions

View File

@ -66,6 +66,9 @@ const Container = styled.div`
font-size: 10px; font-size: 10px;
margin-right: 3px; margin-right: 3px;
} }
@media (max-width: 600px) {
display: none;
}
` `
const Text = styled.div` const Text = styled.div`

View File

@ -50,8 +50,8 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
return ( return (
<Navbar className="home-navbar"> <Navbar className="home-navbar">
{showAssistants && ( {showAssistants && (
<NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}> <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: 0 }}>
<NavbarIcon onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}> <NavbarIcon onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 16 : 0 }}>
<i className="iconfont icon-hide-sidebar" /> <i className="iconfont icon-hide-sidebar" />
</NavbarIcon> </NavbarIcon>
<NavbarIcon onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)}> <NavbarIcon onClick={() => EventEmitter.emit(EVENT_NAMES.ADD_NEW_TOPIC)}>
@ -64,9 +64,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
className="home-navbar-right"> className="home-navbar-right">
<HStack alignItems="center"> <HStack alignItems="center">
{!showAssistants && ( {!showAssistants && (
<NavbarIcon <NavbarIcon onClick={() => toggleShowAssistants()} style={{ marginRight: 8, marginLeft: isMac ? 4 : -12 }}>
onClick={() => toggleShowAssistants()}
style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 4 : 0 }}>
<i className="iconfont icon-show-sidebar" /> <i className="iconfont icon-show-sidebar" />
</NavbarIcon> </NavbarIcon>
)} )}
@ -79,23 +77,23 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
<SelectModelButton assistant={assistant} /> <SelectModelButton assistant={assistant} />
</HStack> </HStack>
<HStack alignItems="center" gap={8}> <HStack alignItems="center" gap={8}>
<NavbarIcon onClick={() => SearchPopup.show()}> <NarrowIcon onClick={() => SearchPopup.show()}>
<SearchOutlined /> <SearchOutlined />
</NavbarIcon> </NarrowIcon>
<NarrowIcon onClick={() => dispatch(setNarrowMode(!narrowMode))}> <NarrowIcon onClick={() => dispatch(setNarrowMode(!narrowMode))}>
<i className="iconfont icon-icon-adaptive-width"></i> <i className="iconfont icon-icon-adaptive-width"></i>
</NarrowIcon> </NarrowIcon>
{sidebarIcons.visible.includes('minapp') && ( {sidebarIcons.visible.includes('minapp') && (
<AppStorePopover> <AppStorePopover>
<NavbarIcon> <NarrowIcon>
<i className="iconfont icon-appstore" /> <i className="iconfont icon-appstore" />
</NavbarIcon> </NarrowIcon>
</AppStorePopover> </AppStorePopover>
)} )}
{topicPosition === 'right' && ( {topicPosition === 'right' && (
<NavbarIcon onClick={toggleShowTopics}> <NarrowIcon onClick={toggleShowTopics}>
<i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} /> <i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
</NavbarIcon> </NarrowIcon>
)} )}
</HStack> </HStack>
</NavbarRight> </NavbarRight>
@ -140,15 +138,15 @@ export const NavbarIcon = styled.div`
const TitleText = styled.span` const TitleText = styled.span`
margin-left: 5px; margin-left: 5px;
font-family: Ubuntu; font-family: Ubuntu;
font-size: 13px; font-size: 12px;
user-select: none; user-select: none;
@media (max-width: 600px) { @media (max-width: 1080px) {
display: none; display: none;
} }
` `
const NarrowIcon = styled(NavbarIcon)` const NarrowIcon = styled(NavbarIcon)`
@media (max-width: 800px) { @media (max-width: 1000px) {
display: none; display: none;
} }
` `