watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added MobileMenuButton component.

Browse source
This commit is contained in:
Mike Cao 2025-10-14 15:43:57 -07:00
parent d9b08d9491
commit be5f0494cc
5 changed files with 36 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -78,7 +78,7 @@
"@react-spring/web": "^10.0.3",
"@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.90.2",
"@umami/react-zen": "^0.195.0",
"@umami/react-zen": "^0.196.0",
"@umami/redis-client": "^0.29.0",
"bcryptjs": "^3.0.2",
"chalk": "^5.6.2",

10
pnpm-lock.yaml generated
View file

@ -45,8 +45,8 @@ importers:
specifier: ^5.90.2
version: 5.90.2(react@19.1.1)
'@umami/react-zen':
specifier: ^0.195.0
version: 0.195.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))
specifier: ^0.196.0
version: 0.196.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))
'@umami/redis-client':
specifier: ^0.29.0
version: 0.29.0
@ -2756,8 +2756,8 @@ packages:
resolution: {integrity: sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@umami/react-zen@0.195.0':
resolution: {integrity: sha512-DI/o0AOwq6wfWEx+PgXFQ8xV0NJFP9xY1qd0+cv2Bme9Bho0U5+vxyFPkHawJyC7bfMDi3BgC7JHgTqeCqE99A==}
'@umami/react-zen@0.196.0':
resolution: {integrity: sha512-CLxrDAJOdo+0aJAclOq7naIDg+2I5wP9wXxAFhxhQVPXHV8yUHqH9Ula632cLMo51JYp0l+eEtOtuimpuKX3jg==}
'@umami/redis-client@0.29.0':
resolution: {integrity: sha512-Jaqh++jskqDB7ny75pfC02OvKp1JTS4asGDsFrRL3qy8sxL3PAl9+/mybCJe4/6vWrXDJKqpgkSfUDJq2bFjyw==}
@ -10387,7 +10387,7 @@ snapshots:
'@typescript-eslint/types': 8.45.0
eslint-visitor-keys: 4.2.1
'@umami/react-zen@0.195.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))':
'@umami/react-zen@0.196.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))':
dependencies:
'@fontsource/jetbrains-mono': 5.2.8
'@internationalized/date': 3.10.0

13
src/app/(main)/App.tsx
View file

@ -1,9 +1,10 @@
'use client';
import { Grid, Loading, Column, Row } from '@umami/react-zen';
import { Grid, Loading, Column, Row, List, ListItem } from '@umami/react-zen';
import Script from 'next/script';
import { UpdateNotice } from './UpdateNotice';
import { SideNav } from '@/app/(main)/SideNav';
import { useLoginQuery, useConfig, useNavigation } from '@/components/hooks';
import { MobileMenuButton } from '@/components/input/MobileMenuButton';
export function App({ children }) {
const { user, isLoading, error } = useLoginQuery();
@ -29,7 +30,15 @@ export function App({ children }) {
return (
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
<Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap></Row>
<Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap padding>
<MobileMenuButton>
<List>
<ListItem>Websites</ListItem>
<ListItem>Links</ListItem>
<ListItem>Pixels</ListItem>
</List>
</MobileMenuButton>
</Row>
<Column display={{ xs: 'none', lg: 'flex' }}>
<SideNav />
</Column>

2
src/components/common/PageHeader.tsx
View file

@ -37,7 +37,7 @@ export function PageHeader({
{icon}
</Icon>
)}
{title && <Heading size="4">{title}</Heading>}
{title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>}
</Row>
{description && (
<Text color="muted" truncate style={{ maxWidth: 600 }} title={description}>

18
src/components/input/MobileMenuButton.tsx Normal file
View file

@ -0,0 +1,18 @@
import { Button, Icon, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
import { Menu } from '@/components/icons';
import { ReactNode } from 'react';
export function MobileMenuButton({ children }: { children: ReactNode }) {
return (
<DialogTrigger>
<Button>
<Icon>
<Menu />
</Icon>
</Button>
<Modal position="left" offset="20px">
<Dialog variant="sheet">{children}</Dialog>
</Modal>
</DialogTrigger>
);
}