Fix ShareNav collapse button and icon layout

- Use single PanelLeft icon with muted color
- Align collapse button to right of header
- Bottom icons: horizontal (Row) when expanded, vertical (Column) when collapsed

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-01-29 00:12:23 -08:00
parent 482d6c1e47
commit 452a385c4e

View file

@ -1,16 +1,7 @@
import { Button, Column, Icon, Row, Text, ThemeButton } from '@umami/react-zen'; import { Button, Column, Icon, Row, Text, ThemeButton } from '@umami/react-zen';
import { SideMenu } from '@/components/common/SideMenu'; import { SideMenu } from '@/components/common/SideMenu';
import { useMessages, useNavigation, useShare } from '@/components/hooks'; import { useMessages, useNavigation, useShare } from '@/components/hooks';
import { import { AlignEndHorizontal, Clock, Eye, PanelLeft, Sheet, Tag, User } from '@/components/icons';
AlignEndHorizontal,
Clock,
Eye,
PanelLeftClose,
PanelLeftOpen,
Sheet,
Tag,
User,
} from '@/components/icons';
import { LanguageButton } from '@/components/input/LanguageButton'; import { LanguageButton } from '@/components/input/LanguageButton';
import { PreferencesButton } from '@/components/input/PreferencesButton'; import { PreferencesButton } from '@/components/input/PreferencesButton';
import { Funnel, Lightning, Logo, Magnet, Money, Network, Path, Target } from '@/components/svg'; import { Funnel, Lightning, Logo, Magnet, Money, Network, Path, Target } from '@/components/svg';
@ -156,13 +147,7 @@ export function ShareNav({
border="right" border="right"
borderColor="4" borderColor="4"
> >
<Row <Row as="header" gap alignItems="center" paddingY="3" justifyContent="space-between">
as="header"
gap
alignItems="center"
paddingY="3"
justifyContent={collapsed ? 'center' : undefined}
>
{!collapsed && ( {!collapsed && (
<a href={logoUrl} target="_blank" rel="noopener" style={{ marginLeft: 12 }}> <a href={logoUrl} target="_blank" rel="noopener" style={{ marginLeft: 12 }}>
<Row alignItems="center" gap> <Row alignItems="center" gap>
@ -178,7 +163,9 @@ export function ShareNav({
</a> </a>
)} )}
<Button variant="quiet" onPress={() => onCollapse?.(!collapsed)}> <Button variant="quiet" onPress={() => onCollapse?.(!collapsed)}>
<Icon>{collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}</Icon> <Icon color="muted">
<PanelLeft />
</Icon>
</Button> </Button>
</Row> </Row>
{!collapsed && ( {!collapsed && (
@ -192,11 +179,19 @@ export function ShareNav({
</Column> </Column>
)} )}
<Column flexGrow={1} justifyContent="flex-end"> <Column flexGrow={1} justifyContent="flex-end">
<Column gap="2"> {collapsed ? (
<ThemeButton /> <Column gap="2">
<LanguageButton /> <ThemeButton />
<PreferencesButton /> <LanguageButton />
</Column> <PreferencesButton />
</Column>
) : (
<Row>
<ThemeButton />
<LanguageButton />
<PreferencesButton />
</Row>
)}
</Column> </Column>
</Column> </Column>
); );