mirror of
https://github.com/umami-software/umami.git
synced 2026-02-04 20:57:17 +01:00
fix(sidebar): ensure language & theme buttons visible in mobile drawer
This commit is contained in:
parent
d1be7bcfc8
commit
84b47200fc
2 changed files with 76 additions and 0 deletions
|
|
@ -8,6 +8,7 @@ import { Grid, IconLabel, NavMenu, NavMenuItem, Row, Text } from '@umami/react-z
|
|||
import Link from 'next/link';
|
||||
import { AdminNav } from './admin/AdminNav';
|
||||
import { SettingsNav } from './settings/SettingsNav';
|
||||
import { MobileLanguageButton } from '@/components/input/MobileLanguageButton';
|
||||
|
||||
export function MobileNav() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
|
@ -54,6 +55,7 @@ export function MobileNav() {
|
|||
);
|
||||
})}
|
||||
</NavMenu>
|
||||
<MobileLanguageButton />
|
||||
{websiteId && <WebsiteNav websiteId={websiteId} onItemClick={close} />}
|
||||
{isAdmin && <AdminNav onItemClick={close} />}
|
||||
{isSettings && <SettingsNav onItemClick={close} />}
|
||||
|
|
|
|||
74
src/components/input/MobileLanguageButton.tsx
Normal file
74
src/components/input/MobileLanguageButton.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog, Row } from '@umami/react-zen';
|
||||
import { languages } from '@/lib/lang';
|
||||
import { useLocale } from '@/components/hooks';
|
||||
import { Globe } from 'lucide-react';
|
||||
import { ThemeButton } from '@umami/react-zen';
|
||||
|
||||
export function MobileLanguageButton() {
|
||||
const { locale, saveLocale } = useLocale();
|
||||
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
|
||||
|
||||
function handleSelect(value: string) {
|
||||
saveLocale(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
padding: 16,
|
||||
backgroundColor: 'var(--background)',
|
||||
borderTop: '1px solid var(--border)',
|
||||
gap: 8,
|
||||
justifyContent: 'center',
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<MenuTrigger>
|
||||
<Button variant="quiet">
|
||||
<Icon>
|
||||
<Globe />
|
||||
</Icon>
|
||||
</Button>
|
||||
<Popover
|
||||
placement="top"
|
||||
style={{
|
||||
width: '75vw',
|
||||
maxWidth: '100vw',
|
||||
left: '0 !important',
|
||||
right: '0 !important',
|
||||
marginBottom: 16,
|
||||
position: 'fixed',
|
||||
}}
|
||||
>
|
||||
<Dialog variant="menu" style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
<Grid columns="1fr" gap={1} style={{ padding: '8px 0' }}>
|
||||
{items.map(({ value, label }) => (
|
||||
<Button
|
||||
key={value}
|
||||
variant="quiet"
|
||||
onPress={() => handleSelect(value)}
|
||||
style={{
|
||||
padding: '16px 24px',
|
||||
justifyContent: 'flex-start',
|
||||
minHeight: '48px',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
weight={value === locale ? 'bold' : 'medium'}
|
||||
color={value === locale ? undefined : 'muted'}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</Button>
|
||||
))}
|
||||
</Grid>
|
||||
</Dialog>
|
||||
</Popover>
|
||||
</MenuTrigger>
|
||||
<ThemeButton />
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue