Add filtered navigation to share pages

- Update share API to return websiteId and parameters
- Create ShareNav component that filters nav items based on parameters
- Update SharePage to include navigation sidebar and route to correct page
- Support all website pages: overview, events, sessions, realtime, compare,
  breakdown, goals, funnels, journeys, retention, utm, revenue, attribution

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/api/share/[slug]/route.ts

@@ -12,7 +12,11 @@ export async function GET(_request: Request, { params }: { params: Promise<{ slu
     return notFound();
   }
 
-  const data = { shareId: share.id };
+  const data = {
+    shareId: share.id,
+    websiteId: share.entityId,
+    parameters: share.parameters,
+  };
   const token = createToken(data, secret());
 
   return json({ ...data, token });

src/app/share/[...shareId]/ShareNav.tsx

@@ -0,0 +1,143 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { SideMenu } from '@/components/common/SideMenu';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { AlignEndHorizontal, Clock, Eye, Sheet, Tag, User } from '@/components/icons';
+import { Funnel, Lightning, Magnet, Money, Network, Path, Target } from '@/components/svg';
+
+export function ShareNav({
+  shareId,
+  parameters,
+  onItemClick,
+}: {
+  shareId: string;
+  parameters: Record<string, boolean>;
+  onItemClick?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
+
+  const renderPath = (path: string) => `/share/${shareId}${path}`;
+
+  const allItems = [
+    {
+      section: 'traffic',
+      label: formatMessage(labels.traffic),
+      items: [
+        {
+          id: 'overview',
+          label: formatMessage(labels.overview),
+          icon: <Eye />,
+          path: renderPath(''),
+        },
+        {
+          id: 'events',
+          label: formatMessage(labels.events),
+          icon: <Lightning />,
+          path: renderPath('/events'),
+        },
+        {
+          id: 'sessions',
+          label: formatMessage(labels.sessions),
+          icon: <User />,
+          path: renderPath('/sessions'),
+        },
+        {
+          id: 'realtime',
+          label: formatMessage(labels.realtime),
+          icon: <Clock />,
+          path: renderPath('/realtime'),
+        },
+        {
+          id: 'compare',
+          label: formatMessage(labels.compare),
+          icon: <AlignEndHorizontal />,
+          path: renderPath('/compare'),
+        },
+        {
+          id: 'breakdown',
+          label: formatMessage(labels.breakdown),
+          icon: <Sheet />,
+          path: renderPath('/breakdown'),
+        },
+      ],
+    },
+    {
+      section: 'behavior',
+      label: formatMessage(labels.behavior),
+      items: [
+        {
+          id: 'goals',
+          label: formatMessage(labels.goals),
+          icon: <Target />,
+          path: renderPath('/goals'),
+        },
+        {
+          id: 'funnels',
+          label: formatMessage(labels.funnels),
+          icon: <Funnel />,
+          path: renderPath('/funnels'),
+        },
+        {
+          id: 'journeys',
+          label: formatMessage(labels.journeys),
+          icon: <Path />,
+          path: renderPath('/journeys'),
+        },
+        {
+          id: 'retention',
+          label: formatMessage(labels.retention),
+          icon: <Magnet />,
+          path: renderPath('/retention'),
+        },
+      ],
+    },
+    {
+      section: 'growth',
+      label: formatMessage(labels.growth),
+      items: [
+        {
+          id: 'utm',
+          label: formatMessage(labels.utm),
+          icon: <Tag />,
+          path: renderPath('/utm'),
+        },
+        {
+          id: 'revenue',
+          label: formatMessage(labels.revenue),
+          icon: <Money />,
+          path: renderPath('/revenue'),
+        },
+        {
+          id: 'attribution',
+          label: formatMessage(labels.attribution),
+          icon: <Network />,
+          path: renderPath('/attribution'),
+        },
+      ],
+    },
+  ];
+
+  // Filter items based on parameters
+  const items = allItems
+    .map(section => ({
+      label: section.label,
+      items: section.items.filter(item => parameters[item.id] !== false),
+    }))
+    .filter(section => section.items.length > 0);
+
+  const selectedKey = items
+    .flatMap(e => e.items)
+    .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
+
+  return (
+    <Column padding="3" position="sticky" top="0" gap>
+      <SideMenu
+        items={items}
+        selectedKey={selectedKey}
+        allowMinimize={false}
+        onItemClick={onItemClick}
+      />
+    </Column>
+  );
+}

src/app/share/[...shareId]/SharePage.tsx

@@ -1,6 +1,18 @@
 'use client';
-import { Column, useTheme } from '@umami/react-zen';
+import { Column, Grid, useTheme } from '@umami/react-zen';
 import { useEffect } from 'react';
+import { AttributionPage } from '@/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage';
+import { BreakdownPage } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage';
+import { FunnelsPage } from '@/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage';
+import { GoalsPage } from '@/app/(main)/websites/[websiteId]/(reports)/goals/GoalsPage';
+import { JourneysPage } from '@/app/(main)/websites/[websiteId]/(reports)/journeys/JourneysPage';
+import { RetentionPage } from '@/app/(main)/websites/[websiteId]/(reports)/retention/RetentionPage';
+import { RevenuePage } from '@/app/(main)/websites/[websiteId]/(reports)/revenue/RevenuePage';
+import { UTMPage } from '@/app/(main)/websites/[websiteId]/(reports)/utm/UTMPage';
+import { ComparePage } from '@/app/(main)/websites/[websiteId]/compare/ComparePage';
+import { EventsPage } from '@/app/(main)/websites/[websiteId]/events/EventsPage';
+import { RealtimePage } from '@/app/(main)/websites/[websiteId]/realtime/RealtimePage';
+import { SessionsPage } from '@/app/(main)/websites/[websiteId]/sessions/SessionsPage';
 import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
 import { WebsitePage } from '@/app/(main)/websites/[websiteId]/WebsitePage';
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
@@ -8,8 +20,26 @@ import { PageBody } from '@/components/common/PageBody';
 import { useShareTokenQuery } from '@/components/hooks';
 import { Footer } from './Footer';
 import { Header } from './Header';
+import { ShareNav } from './ShareNav';
 
-export function SharePage({ shareId }) {
+const PAGE_COMPONENTS: Record<string, React.ComponentType<{ websiteId: string }>> = {
+  '': WebsitePage,
+  overview: WebsitePage,
+  events: EventsPage,
+  sessions: SessionsPage,
+  realtime: RealtimePage,
+  compare: ComparePage,
+  breakdown: BreakdownPage,
+  goals: GoalsPage,
+  funnels: FunnelsPage,
+  journeys: JourneysPage,
+  retention: RetentionPage,
+  utm: UTMPage,
+  revenue: RevenuePage,
+  attribution: AttributionPage,
+};
+
+export function SharePage({ shareId, path = '' }: { shareId: string; path?: string }) {
   const { shareToken, isLoading } = useShareTokenQuery(shareId);
   const { setTheme } = useTheme();
 
@@ -26,16 +56,42 @@ export function SharePage({ shareId }) {
     return null;
   }
 
+  const { websiteId, parameters = {} } = shareToken;
+
+  // Check if the requested path is allowed
+  const pageKey = path || '';
+  const isAllowed = pageKey === '' || pageKey === 'overview' || parameters[pageKey] !== false;
+
+  if (!isAllowed) {
+    return null;
+  }
+
+  const PageComponent = PAGE_COMPONENTS[pageKey] || WebsitePage;
+
   return (
     <Column backgroundColor="2">
-      <PageBody gap>
       <Header />
-        <WebsiteProvider websiteId={shareToken.websiteId}>
+      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
+        <Column
+          display={{ xs: 'none', lg: 'flex' }}
+          width="240px"
+          height="100%"
+          border="right"
+          backgroundColor
+          marginRight="2"
+        >
+          <ShareNav shareId={shareId} parameters={parameters} />
+        </Column>
+        <PageBody gap>
+          <WebsiteProvider websiteId={websiteId}>
             <WebsiteHeader showActions={false} />
-          <WebsitePage websiteId={shareToken.websiteId} />
+            <Column>
+              <PageComponent websiteId={websiteId} />
+            </Column>
           </WebsiteProvider>
-        <Footer />
         </PageBody>
+      </Grid>
+      <Footer />
     </Column>
   );
 }

src/app/share/[...shareId]/page.tsx

@@ -2,6 +2,7 @@ import { SharePage } from './SharePage';
 
 export default async function ({ params }: { params: Promise<{ shareId: string[] }> }) {
   const { shareId } = await params;
+  const [slug, ...path] = shareId;
 
-  return <SharePage shareId={shareId[0]} />;
+  return <SharePage shareId={slug} path={path.join('/')} />;
 }