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

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

49
src/app/(main)/settings/SettingsLayout.tsx
View file

@ -1,50 +1,10 @@
'use client';
import { PageBody } from '@/components/common/PageBody';
import { SideMenu } from '@/components/common/SideMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import { Settings2, UserCircle, Users } from '@/components/icons';
import { Column, Grid } from '@umami/react-zen';
import { ReactNode } from 'react';
import { SettingsNav } from './SettingsNav';
export function SettingsLayout({ children }: { children: ReactNode }) {
const { formatMessage, labels } = useMessages();
const { renderUrl, pathname } = useNavigation();
const items = [
{
label: formatMessage(labels.application),
items: [
{
id: 'preferences',
label: formatMessage(labels.preferences),
path: renderUrl('/settings/preferences'),
icon: <Settings2 />,
},
],
},
{
label: formatMessage(labels.account),
items: [
{
id: 'profile',
label: formatMessage(labels.profile),
path: renderUrl('/settings/profile'),
icon: <UserCircle />,
},
{
id: 'teams',
label: formatMessage(labels.teams),
path: renderUrl('/settings/teams'),
icon: <Users />,
},
],
},
];
const selectedKey = items
.flatMap(e => e.items)
.find(({ path }) => path && pathname.includes(path.split('?')[0]))?.id;
return (
<Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
<Column
@ -55,12 +15,7 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
backgroundColor
marginRight="2"
>
<SideMenu
items={items}
title={formatMessage(labels.settings)}
selectedKey={selectedKey}
allowMinimize={false}
/>
<SettingsNav />
</Column>
<Column gap="6" margin="2">
<PageBody>{children}</PageBody>

53
src/app/(main)/settings/SettingsNav.tsx Normal file
View file

@ -0,0 +1,53 @@
import { SideMenu } from '@/components/common/SideMenu';
import { useMessages, useNavigation } from '@/components/hooks';
import { Settings2, UserCircle, Users } from '@/components/icons';
export function SettingsNav({ onItemClick }: { onItemClick?: () => void }) {
const { formatMessage, labels } = useMessages();
const { renderUrl, pathname } = useNavigation();
const items = [
{
label: formatMessage(labels.application),
items: [
{
id: 'preferences',
label: formatMessage(labels.preferences),
path: renderUrl('/settings/preferences'),
icon: <Settings2 />,
},
],
},
{
label: formatMessage(labels.account),
items: [
{
id: 'profile',
label: formatMessage(labels.profile),
path: renderUrl('/settings/profile'),
icon: <UserCircle />,
},
{
id: 'teams',
label: formatMessage(labels.teams),
path: renderUrl('/settings/teams'),
icon: <Users />,
},
],
},
];
const selectedKey = items
.flatMap(e => e.items)
.find(({ path }) => path && pathname.includes(path.split('?')[0]))?.id;
return (
<SideMenu
items={items}
title={formatMessage(labels.settings)}
selectedKey={selectedKey}
allowMinimize={false}
onItemClick={onItemClick}
/>
);
}