New website layout.

package.json

@@ -78,7 +78,7 @@
     "@react-spring/web": "^9.7.3",
     "@svgr/cli": "^8.1.0",
     "@tanstack/react-query": "^5.28.6",
-    "@umami/react-zen": "^0.97.0",
+    "@umami/react-zen": "^0.108.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^2.4.3",
     "chalk": "^4.1.1",

src/app/(main)/App.tsx

@@ -3,7 +3,7 @@ import { Grid, Loading, Column } from '@umami/react-zen';
 import Script from 'next/script';
 import { usePathname } from 'next/navigation';
 import { UpdateNotice } from './UpdateNotice';
-import { Nav } from '@/app/(main)/Nav';
+import { SideNav } from '@/app/(main)/SideNav';
 import { MenuBar } from '@/app/(main)/MenuBar';
 import { Page } from '@/components/common/Page';
 import { useLoginQuery, useConfig } from '@/components/hooks';
@@ -32,7 +32,7 @@ export function App({ children }) {
 
   return (
     <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr">
-      <Nav gridColumn="1 / 2" gridRow="1 / 3" />
+      <SideNav gridColumn="1 / 2" gridRow="1 / 3" />
       <MenuBar gridColumn="2 / 3" gridRow="1 / 2" />
       <Column
         gridColumn="2 / 3"

src/app/(main)/SideNav.tsx

@@ -1,10 +1,10 @@
 import Link from 'next/link';
-import { SideNav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
+import { Sidebar, SidebarHeader, SidebarSection, SidebarItem } from '@umami/react-zen';
 import { Lucide, Icons } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import useGlobalState from '@/components/hooks/useGlobalState';
 
-export function Nav(props: any) {
+export function SideNav(props: any) {
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl, pathname } = useNavigation();
   const [isCollapsed] = useGlobalState('sidenav-collapsed');
@@ -38,20 +38,20 @@ export function Nav(props: any) {
   ].filter(n => n);
 
   return (
-    <SideNav {...props} isCollapsed={isCollapsed} variant="2" showBorder={true}>
-      <SideNavSection>
-        <SideNavHeader label="umami" icon={<Icons.Logo />} />
-      </SideNavSection>
-      <SideNavSection>
+    <Sidebar {...props} isCollapsed={isCollapsed} variant="0" showBorder={true}>
+      <SidebarSection>
+        <SidebarHeader label="umami" icon={<Icons.Logo />} />
+      </SidebarSection>
+      <SidebarSection>
         {links.map(({ href, label, icon }) => {
           return (
             <Link key={href} href={href} role="button">
-              <SideNavItem label={label} icon={icon} isSelected={pathname.startsWith(href)} />
+              <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(href)} />
             </Link>
           );
         })}
-      </SideNavSection>
-      <SideNavSection alignSelf="end">{``}</SideNavSection>
-    </SideNav>
+      </SidebarSection>
+      <SidebarSection alignSelf="end">{``}</SidebarSection>
+    </Sidebar>
   );
 }

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