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

New menu layout.

Browse source
This commit is contained in:
Mike Cao 2025-05-14 13:31:07 -07:00
parent 0cfee43814
commit 1c22c18de5
17 changed files with 103 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
View file

@ -1,6 +1,7 @@
import { Tabs, TabList, Tab, Icon, Text, Row } from '@umami/react-zen';
import { Column, Icon, Text, Row } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { useMessages, useNavigation } from '@/components/hooks';
import Link from 'next/link';
export function WebsiteTabs({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
@ -31,6 +32,54 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
icon: <Icons.Clock />,
path: '/realtime',
},
{
id: 'insights',
label: formatMessage(labels.insights),
icon: <Icons.Lightbulb />,
path: '/insights',
},
{
id: 'goals',
label: formatMessage(labels.goals),
icon: <Icons.Target />,
path: '/goals',
},
{
id: 'funnel',
label: formatMessage(labels.funnel),
icon: <Icons.Funnel />,
path: '/funnels',
},
{
id: 'journeys',
label: formatMessage(labels.journey),
icon: <Icons.Path />,
path: '/goals',
},
{
id: 'retention',
label: formatMessage(labels.retention),
icon: <Icons.Magnet />,
path: '/funnels',
},
{
id: 'utm',
label: formatMessage(labels.utm),
icon: <Icons.Tag />,
path: '/utm',
},
{
id: 'revenue',
label: formatMessage(labels.revenue),
icon: <Icons.Money />,
path: '/revenue',
},
{
id: 'attribution',
label: formatMessage(labels.attribution),
icon: <Icons.Network />,
path: '/attribution',
},
{
id: 'reports',
label: formatMessage(labels.reports),
@ -39,24 +88,29 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
},
];
const selectedKey = links
const selected = links
? links.find(({ path }) => path && pathname.endsWith(path))?.id
: 'overview';
return (
<Tabs selectedKey={selectedKey}>
<TabList items={links}>
{({ id, label, icon, path }) => {
return (
<Tab id={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
<Row gap="3" alignItems="center">
<Icon fillColor="currentColor">{icon}</Icon>
<Text>{label}</Text>
</Row>
</Tab>
);
}}
</TabList>
</Tabs>
<Column gap="2" position="absolute" padding="4" style={{ top: 0, left: 0, bottom: 0 }}>
{links.map(({ id, label, icon, path }) => {
return (
<Link key={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
<Row
alignItems="center"
padding
gap
hoverBackgroundColor="3"
borderRadius
width="160px"
>
<Icon fillColor="currentColor">{icon}</Icon>
<Text weight={selected === id ? 'bold' : undefined}>{label}</Text>
</Row>
</Link>
);
})}
</Column>
);
}