New website layout.

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

@@ -1,4 +1,4 @@
-import { Column, Icon, Text, Row } from '@umami/react-zen';
+import { Icon, Text, Row, NavMenu, NavMenuItem } from '@umami/react-zen';
 import { Icons } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
@@ -91,24 +91,21 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
   const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'overview';
 
   return (
-    <Column gap="2" position="absolute" padding="4" style={{ top: 0, left: 0, bottom: 0 }}>
+    <NavMenu highlightColor="3">
       {links.map(({ id, label, icon, path }) => {
+        const isSelected = selected === id;
+
         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>
+            <NavMenuItem highlightColor="5" isSelected={isSelected}>
+              <Row alignItems="center" gap>
+                <Icon style={{ fill: 'currentcolor' }}>{icon}</Icon>
+                <Text>{label}</Text>
+              </Row>
+            </NavMenuItem>
           </Link>
         );
       })}
-    </Column>
+    </NavMenu>
   );
 }