74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import {
|
|
SideNav,
|
|
SideNavHeader,
|
|
SideNavSection,
|
|
SideNavItem,
|
|
Button,
|
|
Icon,
|
|
Row,
|
|
} from '@umami/react-zen';
|
|
import { Lucide, Icons } from '@/components/icons';
|
|
import { useMessages, useTeamUrl } from '@/components/hooks';
|
|
|
|
export function Nav() {
|
|
const { formatMessage, labels } = useMessages();
|
|
const { renderTeamUrl } = useTeamUrl();
|
|
const [isCollapsed, setCollapsed] = useState(false);
|
|
|
|
const links = [
|
|
{
|
|
label: formatMessage(labels.boards),
|
|
href: renderTeamUrl('/boards'),
|
|
icon: <Lucide.LayoutDashboard />,
|
|
},
|
|
{
|
|
label: formatMessage(labels.dashboard),
|
|
href: renderTeamUrl('/dashboard'),
|
|
icon: <Lucide.Copy />,
|
|
},
|
|
{
|
|
label: formatMessage(labels.websites),
|
|
href: renderTeamUrl('/websites'),
|
|
icon: <Lucide.Globe />,
|
|
},
|
|
{
|
|
label: formatMessage(labels.reports),
|
|
href: renderTeamUrl('/reports'),
|
|
icon: <Lucide.ChartArea />,
|
|
},
|
|
{
|
|
label: formatMessage(labels.settings),
|
|
href: renderTeamUrl('/settings'),
|
|
icon: <Lucide.Settings />,
|
|
},
|
|
].filter(n => n);
|
|
|
|
return (
|
|
<SideNav isCollapsed={isCollapsed} variant="3">
|
|
<SideNavSection>
|
|
<SideNavHeader label="umami" icon={<Icons.Logo />} />
|
|
</SideNavSection>
|
|
<SideNavSection>
|
|
{links.map(({ href, label, icon }) => {
|
|
return (
|
|
<Link key={href} href={href}>
|
|
<SideNavItem label={label} icon={icon} />
|
|
</Link>
|
|
);
|
|
})}
|
|
</SideNavSection>
|
|
<SideNavSection>
|
|
<Row justifyContent="flex-start">
|
|
<Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
|
|
<Icon>
|
|
<Lucide.PanelLeft />
|
|
</Icon>
|
|
</Button>
|
|
</Row>
|
|
</SideNavSection>
|
|
</SideNav>
|
|
);
|
|
}
|