Updated icons.

src/app/(main)/SideNav.module.css

@@ -4,7 +4,7 @@
   width: 200px;
   height: 100vh;
   background-color: var(--layer-color-1);
-  border-right: 1px solid var(--layer-color-2);
+  border-right: 1px solid var(--border-color);
 }
 
 .header {

src/app/(main)/SideNav.tsx

@@ -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>
-  );
-};

src/app/(main)/teams/[teamId]/layout.tsx

@@ -1,13 +1,13 @@
 import { TeamProvider } from './TeamProvider';
 import { Metadata } from 'next';
-import TeamSettingsLayout from './settings/TeamSettingsLayout';
+import { TeamSettingsLayout } from './settings/TeamSettingsLayout';
 
 export default async function ({
   children,
   params,
 }: {
   children: any;
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   const { teamId } = await params;