mirror of
https://github.com/umami-software/umami.git
synced 2026-02-04 04:37:11 +01:00
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:
parent
482d6c1e47
commit
452a385c4e
1 changed files with 18 additions and 23 deletions
|
|
@ -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">
|
||||||
|
{collapsed ? (
|
||||||
<Column gap="2">
|
<Column gap="2">
|
||||||
<ThemeButton />
|
<ThemeButton />
|
||||||
<LanguageButton />
|
<LanguageButton />
|
||||||
<PreferencesButton />
|
<PreferencesButton />
|
||||||
</Column>
|
</Column>
|
||||||
|
) : (
|
||||||
|
<Row>
|
||||||
|
<ThemeButton />
|
||||||
|
<LanguageButton />
|
||||||
|
<PreferencesButton />
|
||||||
|
</Row>
|
||||||
|
)}
|
||||||
</Column>
|
</Column>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue