From 62df9b3521e64a0eca708e4d27a7f2ab674d6b3f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:27:15 +0100
Subject: [PATCH] Revert "feat: double sidebar with icon rail + nav panel"

This reverts commit 24fb5258d5618afdc2a86602d0f3b3684a994bc0.
---
 components/dashboard/DashboardShell.tsx |   8 +-
 components/dashboard/Sidebar.tsx        | 571 +++++++++++++-----------
 2 files changed, 320 insertions(+), 259 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 765bc43..c328b8a 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: 56 }}
+      style={{ width: 64 }}
     >
       <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.5 h-3.5 text-neutral-600" weight="bold" />
+          <CaretRight className="w-3 h-3 text-neutral-600" />
           {siteId && siteName ? (
             <>
               <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
-              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
+              <CaretRight className="w-3 h-3 text-neutral-600" />
               <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
-              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
+              <CaretRight className="w-3 h-3 text-neutral-600" />
               <span className="text-neutral-400">{pageTitle}</span>
             </>
           ) : (
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index c643a2c..dca4d4b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,17 +1,18 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useRef, 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, House as HomeIcon } from '@phosphor-icons/react'
+import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -28,8 +29,8 @@ import {
 } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 
-const RAIL_WIDTH = 56
-const PANEL_WIDTH = 200
+const EXPANDED = 256
+const COLLAPSED = 64
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 
@@ -67,132 +68,24 @@ const SETTINGS_ITEM: NavItem = {
   label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
 }
 
-// ─── 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
-
+// Label that fades with the sidebar — always in the DOM, never removed
+function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
   return (
-    <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>
+    <span
+      className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
+      style={{ opacity: collapsed ? 0 : 1 }}
+    >
+      {children}
+    </span>
   )
 }
 
-// ─── Panel Nav Link ────────────────────────────────────────
+// ─── Nav Item ───────────────────────────────────────────────
 
 function NavLink({
-  item, siteId, onClick, pendingHref, onNavigate,
+  item, siteId, collapsed, onClick, pendingHref, onNavigate,
 }: {
-  item: NavItem; siteId: string; onClick?: () => void
+  item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
   pendingHref: string | null; onNavigate: (href: string) => void
 }) {
   const pathname = usePathname()
@@ -202,146 +95,304 @@ function NavLink({
   const active = matchesPathname || matchesPending
 
   return (
-    <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>
+    <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>
   )
 }
 
-// ─── Panel Settings Button ─────────────────────────────────
+// ─── Settings Button (opens unified modal instead of navigating) ─────
 
 function SettingsButton({
-  item, onClick, settingsContext = 'site',
+  item, collapsed, onClick, settingsContext = 'site',
 }: {
-  item: NavItem; onClick?: () => void; settingsContext?: 'site' | 'workspace'
+  item: NavItem; collapsed: boolean; onClick?: () => void; settingsContext?: 'site' | 'workspace'
 }) {
   const { openUnifiedSettings } = useUnifiedSettings()
 
   return (
-    <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>
+    <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>
   )
 }
 
-// ─── Panel Home Nav Link ───────────────────────────────────
+// ─── Home Nav Link (static href, no siteId) ───────────────
 
 function HomeNavLink({
-  href, icon: Icon, label, onClick, external,
+  href, icon: Icon, label, collapsed, onClick, external,
 }: {
   href: string; icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
-  label: string; onClick?: () => void; external?: boolean
+  label: string; collapsed: boolean; onClick?: () => void; external?: boolean
 }) {
   const pathname = usePathname()
   const active = !external && pathname === href
 
   return (
-    <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 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>
+      )}
     </div>
   )
 }
 
-function SidebarPanel({
-  collapsed, siteId, sites, canEdit, pendingHref, onNavigate, onMobileClose, isMobile,
+// ─── Home Site Link (favicon + name) ───────────────────────
+
+function HomeSiteLink({
+  site, collapsed, onClick,
 }: {
-  collapsed: boolean; siteId: string | null; sites: Site[]; canEdit: boolean
-  pendingHref: string | null; onNavigate: (href: string) => void
-  onMobileClose?: () => void; isMobile?: boolean
+  site: Site; collapsed: boolean; onClick?: () => void
 }) {
-  const c = isMobile ? false : collapsed
-  const mobileClick = isMobile ? onMobileClose : undefined
+  const pathname = usePathname()
+  const href = `/sites/${site.id}`
+  const active = pathname.startsWith(href)
 
   return (
-    <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 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
+
+  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>
+              )}
+              <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>
-            ))
-          ) : (
-            /* 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>
-            </>
-          )}
+            </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,
@@ -384,38 +435,37 @@ 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 */}
+      {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        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)' }}
+        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)' }}
       >
-        <SidebarRail {...railProps} />
-        <SidebarPanel {...panelProps} collapsed={collapsed} />
+        <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' })}
+        />
       </aside>
 
       {/* Mobile overlay */}
@@ -428,12 +478,11 @@ export default function Sidebar({
             onClick={handleMobileClose}
           />
           <aside
-            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 ${
+            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 ${
               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>
@@ -441,10 +490,22 @@ export default function Sidebar({
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
-            <div className="flex h-[calc(100%-49px)]">
-              <SidebarRail {...railProps} onMobileClose={handleMobileClose} isMobile />
-              <SidebarPanel {...panelProps} collapsed={false} onMobileClose={handleMobileClose} isMobile />
-            </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' })}
+            />
           </aside>
         </>
       )}