Combine WebsiteNav into SideNav when viewing a website.

Replace the separate 240px WebsiteNav sidebar with website navigation
integrated into the main SideNav. When a websiteId is active, SideNav
shows a back arrow, WebsiteSelect dropdown, and grouped nav items
instead of the main links. Extract shared useWebsiteNavItems hook used
by both SideNav and WebsiteNav (still used by MobileNav).

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

src/app/(main)/SideNav.tsx

@@ -14,15 +14,23 @@ import {
 import Link from 'next/link';
 import type { Key } from 'react';
 import { IconLabel } from '@/components/common/IconLabel';
-import { useGlobalState, useMessages, useNavigation } from '@/components/hooks';
-import { Globe, Grid2x2, LayoutDashboard, LinkIcon, PanelLeft } from '@/components/icons';
+import { useGlobalState, useMessages, useNavigation, useWebsiteNavItems } from '@/components/hooks';
+import {
+  ArrowLeft,
+  Globe,
+  Grid2x2,
+  LayoutDashboard,
+  LinkIcon,
+  PanelLeft,
+} from '@/components/icons';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { NavButton } from '@/components/input/NavButton';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 import { Logo } from '@/components/svg';
 
 export function SideNav(props: any) {
   const { formatMessage, labels } = useMessages();
-  const { pathname, renderUrl, websiteId, router } = useNavigation();
+  const { pathname, renderUrl, websiteId, teamId, router } = useNavigation();
   const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
 
   const hasNav = !!(websiteId || pathname.startsWith('/admin') || pathname.includes('/settings'));
@@ -58,6 +66,10 @@ export function SideNav(props: any) {
     router.push(id === 'user' ? '/websites' : `/teams/${id}/websites`);
   };
 
+  const handleWebsiteChange = (value: string) => {
+    router.push(renderUrl(`/websites/${value}`));
+  };
+
   return (
     <Column
       {...props}
@@ -73,8 +85,13 @@ export function SideNav(props: any) {
         transition: 'width 0.2s ease-in-out',
       }}
     >
-      <Column>
-        <Row alignItems="center" justifyContent="space-between" height="60px">
+      <Column overflowY="auto" style={{ minHeight: 0 }}>
+        <Row
+          alignItems="center"
+          justifyContent="space-between"
+          height="60px"
+          style={{ flexShrink: 0 }}
+        >
           <Row paddingX="3" alignItems="center" justifyContent="space-between" flexGrow={1}>
             {!isCollapsed && (
               <IconLabel icon={<Logo />}>
@@ -84,18 +101,120 @@ export function SideNav(props: any) {
             <PanelButton />
           </Row>
         </Row>
-        <Row marginBottom="4">
+        <Row marginBottom="4" style={{ flexShrink: 0 }}>
           <NavButton showText={!isCollapsed} onAction={handleSelect} />
         </Row>
-        <Column gap="2">
-          {links.map(({ id, path, label, icon }) => {
+        {websiteId ? (
+          <WebsiteNavSection
+            websiteId={websiteId}
+            teamId={teamId}
+            isCollapsed={isCollapsed}
+            onWebsiteChange={handleWebsiteChange}
+          />
+        ) : (
+          <Column gap="2">
+            {links.map(({ id, path, label, icon }) => {
+              return (
+                <Link key={id} href={renderUrl(path, false)} role="button">
+                  <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
+                    <Focusable>
+                      <Row
+                        alignItems="center"
+                        hover={{ backgroundColor: 'surface-sunken' }}
+                        borderRadius
+                        minHeight="40px"
+                      >
+                        <IconLabel icon={icon} label={isCollapsed ? '' : label} padding />
+                      </Row>
+                    </Focusable>
+                    <Tooltip placement="right">{label}</Tooltip>
+                  </TooltipTrigger>
+                </Link>
+              );
+            })}
+          </Column>
+        )}
+      </Column>
+      <Row alignItems="center" justifyContent="center" wrap="wrap" marginBottom="4" gap>
+        <LanguageButton />
+        <ThemeButton />
+      </Row>
+    </Column>
+  );
+}
+
+function WebsiteNavSection({
+  websiteId,
+  teamId,
+  isCollapsed,
+  onWebsiteChange,
+}: {
+  websiteId: string;
+  teamId: string;
+  isCollapsed: boolean;
+  onWebsiteChange: (value: string) => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { renderUrl } = useNavigation();
+  const { items, selectedKey } = useWebsiteNavItems(websiteId);
+
+  const renderValue = (value: any) => {
+    return (
+      <Text truncate style={{ maxWidth: 160, lineHeight: 1 }}>
+        {value?.selectedItem?.name}
+      </Text>
+    );
+  };
+
+  return (
+    <Column gap="2">
+      <Link href={renderUrl('/websites', false)} role="button">
+        <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
+          <Focusable>
+            <Row
+              alignItems="center"
+              hover={{ backgroundColor: 'surface-sunken' }}
+              borderRadius
+              minHeight="40px"
+            >
+              <IconLabel
+                icon={<ArrowLeft />}
+                label={isCollapsed ? '' : formatMessage(labels.back)}
+                padding
+              />
+            </Row>
+          </Focusable>
+          <Tooltip placement="right">{formatMessage(labels.back)}</Tooltip>
+        </TooltipTrigger>
+      </Link>
+      {!isCollapsed && (
+        <Box marginBottom="2">
+          <WebsiteSelect
+            websiteId={websiteId}
+            teamId={teamId}
+            onChange={onWebsiteChange}
+            renderValue={renderValue}
+            buttonProps={{ style: { outline: 'none' } }}
+          />
+        </Box>
+      )}
+      {items.map(({ label: sectionLabel, items: sectionItems }, index) => (
+        <Column key={`${sectionLabel}${index}`} gap="1" marginBottom="1">
+          {!isCollapsed && (
+            <Row padding>
+              <Text weight="bold">{sectionLabel}</Text>
+            </Row>
+          )}
+          {sectionItems.map(({ id, path, label, icon }) => {
+            const isSelected = selectedKey === id;
             return (
-              <Link key={id} href={renderUrl(path, false)} role="button">
+              <Link key={id} href={path} role="button">
                 <TooltipTrigger isDisabled={!isCollapsed} delay={0}>
                   <Focusable>
                     <Row
                       alignItems="center"
                       hover={{ backgroundColor: 'surface-sunken' }}
+                      backgroundColor={isSelected ? 'surface-sunken' : undefined}
                       borderRadius
                       minHeight="40px"
                     >
@@ -108,11 +227,7 @@ export function SideNav(props: any) {
             );
           })}
         </Column>
-      </Column>
-      <Row alignItems="center" justifyContent="center" wrap="wrap" marginBottom="4" gap>
-        <LanguageButton />
-        <ThemeButton />
-      </Row>
+      ))}
     </Column>
   );
 }