From 24fb5258d5618afdc2a86602d0f3b3684a994bc0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:21:49 +0100
Subject: [PATCH] feat: double sidebar with icon rail + nav panel

Rail (always visible, 56px): Pulse logo, home icon, site favicons
with quick switch, add site, notifications, profile.
Panel (collapsible, 200px): context-specific nav groups.
Site favicons in rail show ring highlight for active site.
Collapse toggle hides panel, rail stays visible.
---
 components/dashboard/DashboardShell.tsx |   8 +-
 components/dashboard/Sidebar.tsx        | 569 +++++++++++-------------
 2 files changed, 258 insertions(+), 319 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index c328b8a..765bc43 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -57,7 +57,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   loading: () => (
     <div
       className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
-      style={{ width: 64 }}
+      style={{ width: 56 }}
     >
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
     </div>
@@ -340,13 +340,13 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
         </button>
         <nav className="flex items-center gap-1 text-sm font-medium">
           <BreadcrumbAppSwitcher />
-          <CaretRight className="w-3 h-3 text-neutral-600" />
+          <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
           {siteId && siteName ? (
             <>
               <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
-              <CaretRight className="w-3 h-3 text-neutral-600" />
+              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
               <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
-              <CaretRight className="w-3 h-3 text-neutral-600" />
+              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
               <span className="text-neutral-400">{pageTitle}</span>
             </>
           ) : (
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index dca4d4b..c643a2c 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,18 +1,17 @@
 'use client'
 
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useSidebar } from '@/lib/sidebar-context'
-// `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
-import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon } from '@phosphor-icons/react'
+import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon, House as HomeIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -29,8 +28,8 @@ import {
 } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 
-const EXPANDED = 256
-const COLLAPSED = 64
+const RAIL_WIDTH = 56
+const PANEL_WIDTH = 200
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 
@@ -68,24 +67,132 @@ const SETTINGS_ITEM: NavItem = {
   label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
 }
 
-// Label that fades with the sidebar — always in the DOM, never removed
-function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
+// ─── Rail ──────────────────────────────────────────────────
+
+function SidebarRail({
+  sites, currentSiteId, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings, onMobileClose, isMobile,
+}: {
+  sites: Site[]; currentSiteId: string | null
+  auth: ReturnType<typeof useAuth>; orgs: OrganizationMember[]
+  onSwitchOrganization: (orgId: string | null) => Promise<void>
+  openSettings: () => void; openOrgSettings: () => void
+  onMobileClose?: () => void; isMobile?: boolean
+}) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { user } = auth
+  const isHome = !currentSiteId
+
   return (
-    <span
-      className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
-      style={{ opacity: collapsed ? 0 : 1 }}
-    >
-      {children}
-    </span>
+    <div className="w-14 flex flex-col items-center shrink-0 border-r border-white/[0.06] py-2 gap-1">
+      {/* Pulse logo */}
+      <Link href="/" className="w-9 h-9 flex items-center justify-center shrink-0 group mb-1" onClick={isMobile ? onMobileClose : undefined}>
+        <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-7 h-7 object-contain group-hover:scale-110 transition-transform duration-200" />
+      </Link>
+
+      <div className="w-7 border-t border-white/[0.06] my-1" />
+
+      {/* Home */}
+      <div className="relative group/rail">
+        <Link
+          href="/"
+          onClick={isMobile ? onMobileClose : undefined}
+          className={`w-9 h-9 flex items-center justify-center rounded-lg transition-all duration-150 ${
+            isHome
+              ? 'bg-brand-orange/10 text-brand-orange'
+              : 'text-neutral-500 hover:text-white hover:bg-white/[0.06]'
+          }`}
+        >
+          <HomeIcon className="w-[18px] h-[18px]" weight={isHome ? 'fill' : 'regular'} />
+        </Link>
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          Your Sites
+        </span>
+      </div>
+
+      {/* Site favicons */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-1 py-1 min-h-0">
+        {sites.map((site) => {
+          const isActive = currentSiteId === site.id
+          const siteSection = pathname.replace(/^\/sites\/[^/]+/, '')
+          return (
+            <div key={site.id} className="relative group/rail shrink-0">
+              <Link
+                href={`/sites/${site.id}${siteSection || ''}`}
+                onClick={isMobile ? onMobileClose : undefined}
+                className={`w-9 h-9 flex items-center justify-center rounded-lg overflow-hidden transition-all duration-150 ${
+                  isActive
+                    ? 'ring-2 ring-brand-orange/60 ring-offset-1 ring-offset-neutral-900'
+                    : 'hover:bg-white/[0.06]'
+                }`}
+              >
+                <img
+                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+                  alt={site.name}
+                  className="w-5 h-5 rounded object-contain"
+                />
+              </Link>
+              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                {site.name}
+              </span>
+            </div>
+          )
+        })}
+
+        {/* Add new site */}
+        <div className="relative group/rail shrink-0">
+          <Link
+            href="/sites/new"
+            onClick={isMobile ? onMobileClose : undefined}
+            className="w-9 h-9 flex items-center justify-center rounded-lg text-neutral-600 hover:text-brand-orange hover:bg-white/[0.06] transition-all duration-150"
+          >
+            <PlusIcon className="w-4 h-4" />
+          </Link>
+          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+            Add new site
+          </span>
+        </div>
+      </div>
+
+      <div className="w-7 border-t border-white/[0.06] my-1" />
+
+      {/* Bottom: Notifications + Profile */}
+      <div className="flex flex-col items-center gap-1">
+        <div className="relative group/rail">
+          <NotificationCenter anchor="right" variant="sidebar" />
+          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+            Notifications
+          </span>
+        </div>
+        <div className="relative group/rail">
+          <UserMenu
+            auth={auth}
+            LinkComponent={Link}
+            orgs={orgs}
+            activeOrgId={auth.user?.org_id}
+            onSwitchOrganization={onSwitchOrganization}
+            onCreateOrganization={() => router.push('/onboarding')}
+            allowPersonalOrganization={false}
+            onOpenSettings={openSettings}
+            onOpenOrgSettings={openOrgSettings}
+            compact
+            anchor="right"
+          />
+          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+            {user?.display_name?.trim() || 'Profile'}
+          </span>
+        </div>
+      </div>
+    </div>
   )
 }
 
-// ─── Nav Item ───────────────────────────────────────────────
+// ─── Panel Nav Link ────────────────────────────────────────
 
 function NavLink({
-  item, siteId, collapsed, onClick, pendingHref, onNavigate,
+  item, siteId, onClick, pendingHref, onNavigate,
 }: {
-  item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
+  item: NavItem; siteId: string; onClick?: () => void
   pendingHref: string | null; onNavigate: (href: string) => void
 }) {
   const pathname = usePathname()
@@ -95,304 +202,146 @@ function NavLink({
   const active = matchesPathname || matchesPending
 
   return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={() => { onNavigate(href); onClick?.() }}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-        </span>
-        <Label collapsed={collapsed}>{item.label}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {item.label}
-        </span>
-      )}
-    </div>
+    <Link
+      href={href}
+      onClick={() => { onNavigate(href); onClick?.() }}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-5 h-5 flex items-center justify-center shrink-0">
+        <item.icon className="w-[16px] h-[16px]" weight={active ? 'fill' : 'regular'} />
+      </span>
+      <span className="whitespace-nowrap overflow-hidden">{item.label}</span>
+    </Link>
   )
 }
 
-// ─── Settings Button (opens unified modal instead of navigating) ─────
+// ─── Panel Settings Button ─────────────────────────────────
 
 function SettingsButton({
-  item, collapsed, onClick, settingsContext = 'site',
+  item, onClick, settingsContext = 'site',
 }: {
-  item: NavItem; collapsed: boolean; onClick?: () => void; settingsContext?: 'site' | 'workspace'
+  item: NavItem; onClick?: () => void; settingsContext?: 'site' | 'workspace'
 }) {
   const { openUnifiedSettings } = useUnifiedSettings()
 
   return (
-    <div className="relative group/nav">
-      <button
-        onClick={() => {
-          openUnifiedSettings({ context: settingsContext, tab: 'general' })
-          onClick?.()
-        }}
-        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <item.icon className="w-[18px] h-[18px]" weight="regular" />
-        </span>
-        <Label collapsed={collapsed}>{item.label}</Label>
-      </button>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {item.label}
-        </span>
-      )}
-    </div>
+    <button
+      onClick={() => { openUnifiedSettings({ context: settingsContext, tab: 'general' }); onClick?.() }}
+      className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
+    >
+      <span className="w-5 h-5 flex items-center justify-center shrink-0">
+        <item.icon className="w-[16px] h-[16px]" weight="regular" />
+      </span>
+      <span className="whitespace-nowrap overflow-hidden">{item.label}</span>
+    </button>
   )
 }
 
-// ─── Home Nav Link (static href, no siteId) ───────────────
+// ─── Panel Home Nav Link ───────────────────────────────────
 
 function HomeNavLink({
-  href, icon: Icon, label, collapsed, onClick, external,
+  href, icon: Icon, label, onClick, external,
 }: {
   href: string; icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
-  label: string; collapsed: boolean; onClick?: () => void; external?: boolean
+  label: string; onClick?: () => void; external?: boolean
 }) {
   const pathname = usePathname()
   const active = !external && pathname === href
 
   return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={onClick}
-        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-        </span>
-        <Label collapsed={collapsed}>{label}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {label}
-        </span>
-      )}
+    <Link
+      href={href}
+      onClick={onClick}
+      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-5 h-5 flex items-center justify-center shrink-0">
+        <Icon className="w-[16px] h-[16px]" weight={active ? 'fill' : 'regular'} />
+      </span>
+      <span className="whitespace-nowrap overflow-hidden">{label}</span>
+    </Link>
+  )
+}
+
+// ─── Panel ─────────────────────────────────────────────────
+
+function GroupLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-5 flex items-center overflow-hidden">
+      <p className="px-2.5 text-[11px] font-semibold text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+        {children}
+      </p>
     </div>
   )
 }
 
-// ─── Home Site Link (favicon + name) ───────────────────────
-
-function HomeSiteLink({
-  site, collapsed, onClick,
+function SidebarPanel({
+  collapsed, siteId, sites, canEdit, pendingHref, onNavigate, onMobileClose, isMobile,
 }: {
-  site: Site; collapsed: boolean; onClick?: () => void
+  collapsed: boolean; siteId: string | null; sites: Site[]; canEdit: boolean
+  pendingHref: string | null; onNavigate: (href: string) => void
+  onMobileClose?: () => void; isMobile?: boolean
 }) {
-  const pathname = usePathname()
-  const href = `/sites/${site.id}`
-  const active = pathname.startsWith(href)
-
-  return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={onClick}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
-          <img
-            src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
-            alt=""
-            className="w-[18px] h-[18px] rounded object-contain"
-          />
-        </span>
-        <Label collapsed={collapsed}>{site.name}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {site.name}
-        </span>
-      )}
-    </div>
-  )
-}
-
-// ─── Sidebar Content ────────────────────────────────────────
-
-interface SidebarContentProps {
-  isMobile: boolean
-  collapsed: boolean
-  siteId: string | null
-  sites: Site[]
-  canEdit: boolean
-  pendingHref: string | null
-  onNavigate: (href: string) => void
-  onMobileClose: () => void
-  onToggle: () => void
-  auth: ReturnType<typeof useAuth>
-  orgs: OrganizationMember[]
-  onSwitchOrganization: (orgId: string | null) => Promise<void>
-  openSettings: () => void
-  openOrgSettings: () => void
-}
-
-function SidebarContent({
-  isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onToggle,
-  auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
-}: SidebarContentProps) {
-  const router = useRouter()
   const c = isMobile ? false : collapsed
-  const { user } = auth
+  const mobileClick = isMobile ? onMobileClose : undefined
 
   return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Logo — fixed layout, text fades */}
-      <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
-        <span className="w-9 h-9 flex items-center justify-center shrink-0">
-          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
-        </span>
-        <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
-          Pulse
-        </span>
-      </Link>
-
-      {/* Nav Groups */}
-      {siteId ? (
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-          {NAV_GROUPS.map((group) => (
-            <div key={group.label}>
-              {c ? (
-                <div className="mx-3 my-2 border-t border-white/[0.04]" />
-              ) : (
-                <div className="h-5 flex items-center overflow-hidden">
-                  <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                    {group.label}
-                  </p>
+    <div
+      className="overflow-hidden shrink-0 transition-all duration-200"
+      style={{ width: c ? 0 : PANEL_WIDTH }}
+    >
+      <div className="h-full flex flex-col overflow-hidden" style={{ width: PANEL_WIDTH }}>
+        {/* Panel nav content */}
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 py-3 space-y-4">
+          {siteId ? (
+            /* Site context: Analytics + Infrastructure */
+            NAV_GROUPS.map((group) => (
+              <div key={group.label}>
+                <GroupLabel>{group.label}</GroupLabel>
+                <div className="space-y-0.5">
+                  {group.items.map((item) => (
+                    <NavLink key={item.label} item={item} siteId={siteId} onClick={mobileClick} pendingHref={pendingHref} onNavigate={onNavigate} />
+                  ))}
+                  {group.label === 'Infrastructure' && canEdit && (
+                    <SettingsButton item={SETTINGS_ITEM} onClick={mobileClick} />
+                  )}
                 </div>
-              )}
-              <div className="space-y-0.5">
-                {group.items.map((item) => (
-                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
-                ))}
-                {group.label === 'Infrastructure' && canEdit && (
-                  <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-                )}
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            /* Home context: Workspace + Resources */
+            <>
+              <div>
+                <GroupLabel>Workspace</GroupLabel>
+                <div className="space-y-0.5">
+                  <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" onClick={mobileClick} />
+                  <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" onClick={mobileClick} />
+                  <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} onClick={mobileClick} settingsContext="workspace" />
+                </div>
+              </div>
+              <div>
+                <GroupLabel>Resources</GroupLabel>
+                <div className="space-y-0.5">
+                  <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" onClick={mobileClick} external />
+                </div>
+              </div>
+            </>
+          )}
         </nav>
-      ) : (
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-          {/* Your Sites */}
-          <div>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  Your Sites
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              {sites.map((site) => (
-                <HomeSiteLink key={site.id} site={site} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-              ))}
-              <HomeNavLink href="/sites/new" icon={PlusIcon} label="Add New Site" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-            </div>
-          </div>
-
-          {/* Workspace */}
-          <div>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  Workspace
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-              <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-              <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} collapsed={c} onClick={isMobile ? onMobileClose : undefined} settingsContext="workspace" />
-            </div>
-          </div>
-
-          {/* Resources */}
-          <div>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  Resources
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" collapsed={c} onClick={isMobile ? onMobileClose : undefined} external />
-            </div>
-          </div>
-        </nav>
-      )}
-
-      {/* Bottom — utility items */}
-      <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
-        {/* Notifications, Profile — same layout as nav items */}
-        <div className="space-y-0.5 mb-1">
-          <div className="relative group/notif">
-            <NotificationCenter anchor="right" variant="sidebar">
-              <Label collapsed={c}>Notifications</Label>
-            </NotificationCenter>
-            {c && (
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/notif:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                Notifications
-              </span>
-            )}
-          </div>
-          <div className="relative group/user">
-            <UserMenu
-              auth={auth}
-              LinkComponent={Link}
-              orgs={orgs}
-              activeOrgId={auth.user?.org_id}
-              onSwitchOrganization={onSwitchOrganization}
-              onCreateOrganization={() => router.push('/onboarding')}
-              allowPersonalOrganization={false}
-              onOpenSettings={openSettings}
-              onOpenOrgSettings={openOrgSettings}
-              compact
-              anchor="right"
-            >
-              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
-            </UserMenu>
-            {c && (
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/user:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                {user?.display_name?.trim() || 'Profile'}
-              </span>
-            )}
-          </div>
-        </div>
       </div>
     </div>
   )
 }
 
-// ─── Main Sidebar ───────────────────────────────────────────
+// ─── Main Sidebar ──────────────────────────────────────────
 
 export default function Sidebar({
   siteId, mobileOpen, onMobileClose, onMobileOpen,
@@ -435,37 +384,38 @@ export default function Sidebar({
 
   const handleMobileClose = useCallback(() => {
     setMobileClosing(true)
-    setTimeout(() => {
-      setMobileClosing(false)
-      onMobileClose()
-    }, 200)
+    setTimeout(() => { setMobileClosing(false); onMobileClose() }, 200)
   }, [onMobileClose])
 
   const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
+  const railProps = {
+    sites,
+    currentSiteId: siteId,
+    auth,
+    orgs,
+    onSwitchOrganization: handleSwitchOrganization,
+    openSettings: () => openUnifiedSettings({ context: 'account', tab: 'profile' }),
+    openOrgSettings: () => openUnifiedSettings({ context: 'workspace', tab: 'general' }),
+  }
+
+  const panelProps = {
+    siteId,
+    sites,
+    canEdit,
+    pendingHref,
+    onNavigate: handleNavigate,
+  }
+
   return (
     <>
-      {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
+      {/* Desktop */}
       <aside
-        className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
-        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+        className="hidden md:flex shrink-0 bg-transparent overflow-hidden relative z-10"
+        style={{ width: collapsed ? RAIL_WIDTH : RAIL_WIDTH + PANEL_WIDTH, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
-        <SidebarContent
-          isMobile={false}
-          collapsed={collapsed}
-          siteId={siteId}
-          sites={sites}
-          canEdit={canEdit}
-          pendingHref={pendingHref}
-          onNavigate={handleNavigate}
-          onMobileClose={onMobileClose}
-          onToggle={toggle}
-          auth={auth}
-          orgs={orgs}
-          onSwitchOrganization={handleSwitchOrganization}
-          openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
-          openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
-        />
+        <SidebarRail {...railProps} />
+        <SidebarPanel {...panelProps} collapsed={collapsed} />
       </aside>
 
       {/* Mobile overlay */}
@@ -478,11 +428,12 @@ export default function Sidebar({
             onClick={handleMobileClose}
           />
           <aside
-            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
+            className={`fixed inset-y-0 left-0 z-50 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
               mobileClosing
                 ? 'animate-out slide-out-to-left duration-200 fill-mode-forwards'
                 : 'animate-in slide-in-from-left duration-200'
             }`}
+            style={{ width: RAIL_WIDTH + PANEL_WIDTH }}
           >
             <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
               <span className="text-sm font-semibold text-white">Navigation</span>
@@ -490,22 +441,10 @@ export default function Sidebar({
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
-            <SidebarContent
-              isMobile={true}
-              collapsed={collapsed}
-              siteId={siteId}
-              sites={sites}
-              canEdit={canEdit}
-              pendingHref={pendingHref}
-              onNavigate={handleNavigate}
-              onMobileClose={handleMobileClose}
-              onToggle={toggle}
-              auth={auth}
-              orgs={orgs}
-              onSwitchOrganization={handleSwitchOrganization}
-              openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
-              openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
-            />
+            <div className="flex h-[calc(100%-49px)]">
+              <SidebarRail {...railProps} onMobileClose={handleMobileClose} isMobile />
+              <SidebarPanel {...panelProps} collapsed={false} onMobileClose={handleMobileClose} isMobile />
+            </div>
           </aside>
         </>
       )}