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

separate Admin/Settings Nav and add to MobileNav

Browse source
This commit is contained in:
Francis Cao 2025-10-29 11:32:52 -07:00
parent ef55b63a3b
commit 72fba187db
5 changed files with 121 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/app/(main)/admin/AdminLayout.tsx
View file

@ -1,50 +1,17 @@
'use client';
import { ReactNode } from 'react';
import { Grid, Column } from '@umami/react-zen';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { User, Users, Globe } from '@/components/icons';
import { SideMenu } from '@/components/common/SideMenu';
import { PageBody } from '@/components/common/PageBody';
import { useLoginQuery } from '@/components/hooks';
import { Column, Grid } from '@umami/react-zen';
import { ReactNode } from 'react';
import { AdminNav } from './AdminNav';
export function AdminLayout({ children }: { children: ReactNode }) {
const { user } = useLoginQuery();
const { formatMessage, labels } = useMessages();
const { pathname } = useNavigation();
if (!user.isAdmin || process.env.cloudMode) {
return null;
}
const items = [
{
label: formatMessage(labels.manage),
items: [
{
id: 'users',
label: formatMessage(labels.users),
path: '/admin/users',
icon: <User />,
},
{
id: 'websites',
label: formatMessage(labels.websites),
path: '/admin/websites',
icon: <Globe />,
},
{
id: 'teams',
label: formatMessage(labels.teams),
path: '/admin/teams',
icon: <Users />,
},
],
},
];
const selectedKey = items
.flatMap(e => e.items)
?.find(({ path }) => path && pathname.startsWith(path))?.id;
return (
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Column
@ -55,12 +22,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
backgroundColor
marginRight="2"
>
<SideMenu
items={items}
title={formatMessage(labels.admin)}
selectedKey={selectedKey}
allowMinimize={false}
/>
<AdminNav />
</Column>
<Column gap="6" margin="2">
<PageBody>{children}</PageBody>

48
src/app/(main)/admin/AdminNav.tsx Normal file
View file

@ -0,0 +1,48 @@
import { SideMenu } from '@/components/common/SideMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import { Globe, User, Users } from '@/components/icons';
export function AdminNav({ onItemClick }: { onItemClick?: () => void }) {
const { formatMessage, labels } = useMessages();
const { pathname } = useNavigation();
const items = [
{
label: formatMessage(labels.manage),
items: [
{
id: 'users',
label: formatMessage(labels.users),
path: '/admin/users',
icon: <User />,
},
{
id: 'websites',
label: formatMessage(labels.websites),
path: '/admin/websites',
icon: <Globe />,
},
{
id: 'teams',
label: formatMessage(labels.teams),
path: '/admin/teams',
icon: <Users />,
},
],
},
];
const selectedKey = items
.flatMap(e => e.items)
?.find(({ path }) => path && pathname.startsWith(path))?.id;
return (
<SideMenu
items={items}
title={formatMessage(labels.admin)}
selectedKey={selectedKey}
allowMinimize={false}
onItemClick={onItemClick}
/>
);
}