watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-16 10:35:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix mobile nav
Some checks failed
Node.js CI / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Francis Cao 2026-02-10 13:22:40 -08:00
parent 02d28a9c53
commit 1f0de47c01
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/app/(main)/MobileNav.tsx
View file

@ -1,11 +1,11 @@
import { Grid, Row, Text } from '@umami/react-zen'; import { Column, Grid, Row, Text } from '@umami/react-zen';
import Link from 'next/link'; import Link from 'next/link';
import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav'; import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
import { IconLabel } from '@/components/common/IconLabel'; import { IconLabel } from '@/components/common/IconLabel';
import { useMessages, useNavigation } from '@/components/hooks'; import { useMessages, useNavigation } from '@/components/hooks';
import { Globe, Grid2x2, LinkIcon } from '@/components/icons'; import { Globe, Grid2x2, LayoutDashboard, LinkIcon } from '@/components/icons';
import { MobileMenuButton } from '@/components/input/MobileMenuButton'; import { MobileMenuButton } from '@/components/input/MobileMenuButton';
import { TeamsButton } from '@/components/input/TeamsButton'; import { UserButton } from '@/components/input/UserButton';
import { Logo } from '@/components/svg'; import { Logo } from '@/components/svg';
import { AdminNav } from './admin/AdminNav'; import { AdminNav } from './admin/AdminNav';
import { SettingsNav } from './settings/SettingsNav'; import { SettingsNav } from './settings/SettingsNav';
@ -15,8 +15,15 @@ export function MobileNav() {
const { pathname, websiteId, renderUrl } = useNavigation(); const { pathname, websiteId, renderUrl } = useNavigation();
const isAdmin = pathname.includes('/admin'); const isAdmin = pathname.includes('/admin');
const isSettings = pathname.includes('/settings'); const isSettings = pathname.includes('/settings');
const isMain = !websiteId && !isAdmin && !isSettings;
const links = [ const links = [
{
id: 'boards',
label: t(labels.boards),
path: '/boards',
icon: <LayoutDashboard />,
},
{ {
id: 'websites', id: 'websites',
label: t(labels.websites), label: t(labels.websites),
@ -42,21 +49,24 @@ export function MobileNav() {
<MobileMenuButton> <MobileMenuButton>
{({ close }) => { {({ close }) => {
return ( return (
<> <Column gap="2" display="flex" flex-direction="column" height="100vh" padding="1">
<Row padding="3" onClick={close} border="bottom"> {isMain &&
<TeamsButton /> links.map(link => {
{links.map(link => {
return ( return (
<Link key={link.id} href={renderUrl(link.path)}> <Row key={link.id} padding>
<Link href={renderUrl(link.path)} onClick={close}>
<IconLabel icon={link.icon} label={link.label} /> <IconLabel icon={link.icon} label={link.label} />
</Link> </Link>
</Row>
); );
})} })}
</Row>
{websiteId && <WebsiteNav websiteId={websiteId} onItemClick={close} />} {websiteId && <WebsiteNav websiteId={websiteId} onItemClick={close} />}
{isAdmin && <AdminNav onItemClick={close} />} {isAdmin && <AdminNav onItemClick={close} />}
{isSettings && <SettingsNav onItemClick={close} />} {isSettings && <SettingsNav onItemClick={close} />}
</> <Row onClick={close} style={{ marginTop: 'auto' }}>
<UserButton />
</Row>
</Column>
); );
}} }}
</MobileMenuButton> </MobileMenuButton>