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

Updated icons.

Browse source
This commit is contained in:
Mike Cao 2025-02-18 20:46:03 -08:00
parent b53606d497
commit 1c5ef97f84
11 changed files with 74 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/app/(main)/SideNav.tsx
View file

@ -1,9 +1,7 @@
import { ReactNode } from 'react';
import Link from 'next/link';
import { Icon } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
import { Icons, Lucide } from '@/components/icons';
import { useMessages, useTeamUrl } from '@/components/hooks';
import styles from './SideNav.module.css';
export function SideNav() {
const { formatMessage, labels } = useMessages();
@ -13,69 +11,44 @@ export function SideNav() {
{
label: formatMessage(labels.boards),
href: renderTeamUrl('/boards'),
icon: <Icons.Dashboard />,
icon: <Lucide.LayoutDashboard />,
},
{
label: formatMessage(labels.dashboard),
href: renderTeamUrl('/dashboard'),
icon: <Icons.BarChart />,
icon: <Lucide.Copy />,
},
{
label: formatMessage(labels.websites),
href: renderTeamUrl('/websites'),
icon: <Icons.Globe />,
icon: <Lucide.Globe />,
},
{
label: formatMessage(labels.reports),
href: renderTeamUrl('/reports'),
icon: <Icons.Reports />,
icon: <Lucide.ChartArea />,
},
{
label: formatMessage(labels.settings),
href: renderTeamUrl('/settings'),
icon: <Icons.Gear />,
icon: <Lucide.Settings />,
},
].filter(n => n);
return (
<div className={styles.sidenav}>
<Nav>
<SideNavSection>
<SideNavHeader />
<SideNavHeader name="umami" icon={<Icons.Logo />} />
</SideNavSection>
<SideNavSection>
{links.map(props => {
return <SideNavItem key={props.href} {...props} />;
{links.map(({ href, label, icon }) => {
return (
<Link key={href} href={href}>
<SideNavItem label={label} icon={icon} />
</Link>
);
})}
</SideNavSection>
</div>
</Nav>
);
}
const SideNavHeader = () => {
return (
<div className={styles.header}>
<Icon size="sm">
<Icons.Logo />
</Icon>
<div className={styles.name}>umami</div>
</div>
);
};
const SideNavSection = ({ title, children }: { title?: string; children: ReactNode }) => {
return (
<div className={styles.section}>
{title && <div className={styles.title}>{title}</div>}
<div className={styles.items}>{children}</div>
</div>
);
};
const SideNavItem = ({ href, label, icon }: { href: string; label: string; icon: ReactNode }) => {
return (
<Link href={href} className={styles.item}>
<Icon size="sm">{icon}</Icon>
{label}
</Link>
);
};