New website layout.

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

@@ -1,7 +1,6 @@
 import { Column, Row, Heading } from '@umami/react-zen';
 import { Favicon } from '@/components/common/Favicon';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
-import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
 import { useWebsite } from '@/components/hooks/useWebsite';
 import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
@@ -35,7 +34,6 @@ export function WebsiteHeader({
         </Row>
       </Row>
       <FilterBar websiteId={websiteId} />
-      <WebsiteTabs websiteId={websiteId} />
     </Column>
   );
 }

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

@@ -1,13 +1,20 @@
 'use client';
 import { ReactNode } from 'react';
+import { Grid, Column, Box } from '@umami/react-zen';
 import { WebsiteProvider } from './WebsiteProvider';
 import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
+import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
 
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
       <WebsiteHeader websiteId={websiteId} />
-      {children}
+      <Grid columns="170px 1140px" justifyContent="center" gap>
+        <Box position="sticky" top="20px" alignSelf="flex-start">
+          <WebsiteTabs websiteId={websiteId} />
+        </Box>
+        <Column>{children}</Column>
+      </Grid>
     </WebsiteProvider>
   );
 }

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