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

Layout changes.

Browse source
This commit is contained in:
Mike Cao 2025-03-19 19:50:45 -07:00
parent 16f1b15dee
commit f5c4e1b46e
15 changed files with 71 additions and 1788 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
'use client';
import { Grid, Loading } from '@umami/react-zen';
import { Grid, Loading, Column } from '@umami/react-zen';
import Script from 'next/script';
import { usePathname } from 'next/navigation';
import { UpdateNotice } from './UpdateNotice';
@ -30,10 +30,17 @@ export function App({ children }) {
}
return (
<Grid height="100vh" width="100%" columns="auto 1fr">
<Nav />
<Grid rows="auto 1fr" overflow="auto">
<NavBar />
<Grid
height="100vh"
width="100%"
columns="auto 1fr"
rows="auto 1fr"
overflow="hidden"
backgroundColor="2"
>
<Nav gridColumn="1 / 2" gridRow="1 / 3" />
<NavBar gridColumn="2 / 3" gridRow="1 / 2" />
<Column alignItems="center" overflow="scroll">
<Page>
<UpdateNotice user={user} config={config} />
{children}
@ -41,7 +48,7 @@ export function App({ children }) {
<Script src={`${process.env.basePath || ''}/telemetry.js`} />
)}
</Page>
</Grid>
</Column>
</Grid>
);
}

7
src/app/(main)/Nav.tsx
View file

@ -11,8 +11,9 @@ import {
} from '@umami/react-zen';
import { Lucide, Icons } from '@/components/icons';
import { useMessages, useTeamUrl } from '@/components/hooks';
import type { SideNavProps } from '@umami/react-zen/SideNav';
export function Nav() {
export function Nav(props: SideNavProps) {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl();
const [isCollapsed, setCollapsed] = useState(false);
@ -46,7 +47,7 @@ export function Nav() {
].filter(n => n);
return (
<SideNav isCollapsed={isCollapsed} variant="3">
<SideNav {...props} isCollapsed={isCollapsed} variant="3" showBorder={false}>
<SideNavSection>
<SideNavHeader label="umami" icon={<Icons.Logo />} />
</SideNavSection>
@ -59,7 +60,7 @@ export function Nav() {
);
})}
</SideNavSection>
<SideNavSection>
<SideNavSection alignSelf="end">
<Row justifyContent="flex-start">
<Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
<Icon>

6
src/app/(main)/NavBar.tsx
View file

@ -1,4 +1,3 @@
'use client';
import { ThemeButton, Row } from '@umami/react-zen';
import { LanguageButton } from '@/components/input/LanguageButton';
import { ProfileButton } from '@/components/input/ProfileButton';
@ -6,10 +5,9 @@ import { TeamsButton } from '@/components/input/TeamsButton';
export function NavBar() {
return (
<Row justifyContent="space-between" alignItems="center" paddingX="4" paddingY="3">
<div></div>
<Row justifyContent="space-between" alignItems="center" paddingY="3">
<TeamsButton />
<Row justifyContent="flex-end">
<TeamsButton />
<ThemeButton />
<LanguageButton />
<ProfileButton />

2
src/app/layout.tsx
View file

@ -23,7 +23,7 @@ export default function ({ children }) {
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="robots" content="noindex,nofollow" />
</head>
<body suppressHydrationWarning>
<body>
<Providers>{children}</Providers>
</body>
</html>