feat: static header + collapsible sidebar navigation

Replace floating pill header with static variant for authenticated views. Add collapsible sidebar with site picker, grouped navigation (Analytics/Infrastructure), and mobile overlay drawer. Remove horizontal SiteNav tab bar.
2026-03-18 15:30:17 +01:00
parent 9f7987fe07
commit 80ae8311dc
7 changed files with 474 additions and 31 deletions
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -2,7 +2,7 @@

 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
-import { Header, type CipheraApp } from '@ciphera-net/ui'
+import { Header, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
@@ -15,6 +15,7 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
 import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
+import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'

 const ORG_SWITCH_KEY = 'pulse_switching_org'

@@ -46,6 +47,19 @@ const CIPHERA_APPS: CipheraApp[] = [
  },
 ]

+function MobileSidebarToggle() {
+  const { openMobile } = useSidebar()
+  return (
+    <button
+      onClick={openMobile}
+      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+      aria-label="Open navigation"
+    >
+      <MenuIcon className="w-5 h-5" />
+    </button>
+  )
+}
+
 function LayoutInner({ children }: { children: React.ReactNode }) {
  const auth = useAuth()
  const router = useRouter()
@@ -91,23 +105,22 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
    router.push('/onboarding')
  }

-  const showOfflineBar = Boolean(auth.user && !isOnline);
-  const barHeightRem = 2.5;
-  const headerHeightRem = 6;
-  const mainTopPaddingRem = barHeightRem + headerHeightRem;
+  const isAuthenticated = !!auth.user
+  const showOfflineBar = Boolean(auth.user && !isOnline)

  if (isSwitchingOrg) {
    return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
  }

  return (
-    <>
+    <div className="flex flex-col min-h-screen">
      {auth.user && <OfflineBanner isOnline={isOnline} />}
      <Header
        auth={auth}
        LinkComponent={Link}
        logoSrc="/pulse_icon_no_margins.png"
        appName="Pulse"
+        variant={isAuthenticated ? 'static' : 'floating'}
        orgs={orgs}
        activeOrgId={auth.user?.org_id}
        onSwitchOrganization={handleSwitchOrganization}
@@ -116,11 +129,12 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
        showFaq={false}
        showSecurity={false}
        showPricing={true}
-        topOffset={showOfflineBar ? `${barHeightRem}rem` : undefined}
+        topOffset={!isAuthenticated && showOfflineBar ? '2.5rem' : undefined}
        rightSideActions={auth.user ? <NotificationCenter /> : null}
        apps={CIPHERA_APPS}
        currentAppId="pulse"
        onOpenSettings={openSettings}
+        leftActions={isAuthenticated ? <MobileSidebarToggle /> : undefined}
        customNavItems={
          <>
            {!auth.user && (
@@ -134,26 +148,40 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
          </>
        }
      />
-      <main
-        className={`flex-1 pb-8 ${showOfflineBar ? '' : 'pt-24'}`}
-        style={showOfflineBar ? { paddingTop: `${mainTopPaddingRem}rem` } : undefined}
-      >
-        {children}
-      </main>
-      <Footer
-        LinkComponent={Link}
-        appName="Pulse"
-        isAuthenticated={!!auth.user}
-      />
+      {isAuthenticated ? (
+        // Authenticated: sidebar layout — children include DashboardShell
+        <>{children}</>
+      ) : (
+        // Public: standard content with footer
+        <>
+          <main className="flex-1 pb-8 pt-24">
+            {children}
+          </main>
+          <Footer
+            LinkComponent={Link}
+            appName="Pulse"
+            isAuthenticated={false}
+          />
+        </>
+      )}
+      {isAuthenticated && (
+        <Footer
+          LinkComponent={Link}
+          appName="Pulse"
+          isAuthenticated={true}
+        />
+      )}
      <SettingsModalWrapper />
-    </>
+    </div>
  )
 }

 export default function LayoutContent({ children }: { children: React.ReactNode }) {
  return (
    <SettingsModalProvider>
-      <LayoutInner>{children}</LayoutInner>
+      <SidebarProvider>
+        <LayoutInner>{children}</LayoutInner>
+      </SidebarProvider>
    </SettingsModalProvider>
  )
 }
--- a/app/sites/[id]/SiteLayoutShell.tsx
+++ b/app/sites/[id]/SiteLayoutShell.tsx
@@ -1,6 +1,6 @@
 'use client'

-import SiteNav from '@/components/dashboard/SiteNav'
+import DashboardShell from '@/components/dashboard/DashboardShell'

 export default function SiteLayoutShell({
  siteId,
@@ -10,11 +10,8 @@ export default function SiteLayoutShell({
  children: React.ReactNode
 }) {
  return (
-    <>
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pt-8">
-        <SiteNav siteId={siteId} />
-      </div>
+    <DashboardShell siteId={siteId}>
      {children}
-    </>
+    </DashboardShell>
  )
 }
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import Sidebar from './Sidebar'
+import { useSidebar } from '@/lib/sidebar-context'
+
+export default function DashboardShell({
+  siteId,
+  children,
+}: {
+  siteId: string
+  children: React.ReactNode
+}) {
+  const { mobileOpen, closeMobile } = useSidebar()
+
+  return (
+    <div className="flex flex-1 min-h-0">
+      <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
+      <main className="flex-1 min-w-0 overflow-auto pb-8">
+        {children}
+      </main>
+    </div>
+  )
+}
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -0,0 +1,364 @@
+'use client'
+
+import { useState, useEffect, useRef } 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 {
+  LayoutDashboardIcon,
+  PathIcon,
+  FunnelIcon,
+  CursorClickIcon,
+  SearchIcon,
+  CloudUploadIcon,
+  HeartbeatIcon,
+  SettingsIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
+  ChevronUpDownIcon,
+  PlusIcon,
+  XIcon,
+  MenuIcon,
+} from '@ciphera-net/ui'
+
+const SIDEBAR_COLLAPSED_KEY = 'pulse_sidebar_collapsed'
+
+interface NavItem {
+  label: string
+  href: (siteId: string) => string
+  icon: React.ComponentType<{ className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }>
+  matchPrefix?: boolean
+}
+
+interface NavGroup {
+  label: string
+  items: NavItem[]
+}
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: 'Analytics',
+    items: [
+      { label: 'Dashboard', href: (id) => `/sites/${id}`, icon: LayoutDashboardIcon },
+      { label: 'Journeys', href: (id) => `/sites/${id}/journeys`, icon: PathIcon, matchPrefix: true },
+      { label: 'Funnels', href: (id) => `/sites/${id}/funnels`, icon: FunnelIcon, matchPrefix: true },
+      { label: 'Behavior', href: (id) => `/sites/${id}/behavior`, icon: CursorClickIcon, matchPrefix: true },
+      { label: 'Search', href: (id) => `/sites/${id}/search`, icon: SearchIcon, matchPrefix: true },
+    ],
+  },
+  {
+    label: 'Infrastructure',
+    items: [
+      { label: 'CDN', href: (id) => `/sites/${id}/cdn`, icon: CloudUploadIcon, matchPrefix: true },
+      { label: 'Uptime', href: (id) => `/sites/${id}/uptime`, icon: HeartbeatIcon, matchPrefix: true },
+    ],
+  },
+]
+
+const SETTINGS_ITEM: NavItem = {
+  label: 'Settings',
+  href: (id) => `/sites/${id}/settings`,
+  icon: SettingsIcon,
+  matchPrefix: true,
+}
+
+function SitePicker({
+  sites,
+  currentSiteId,
+  collapsed,
+}: {
+  sites: Site[]
+  currentSiteId: string
+  collapsed: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const ref = useRef<HTMLDivElement>(null)
+  const pathname = usePathname()
+  const router = useRouter()
+
+  const currentSite = sites.find((s) => s.id === currentSiteId)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+        setSearch('')
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const filtered = sites.filter(
+    (s) =>
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.domain.toLowerCase().includes(search.toLowerCase())
+  )
+
+  const switchSite = (siteId: string) => {
+    // Preserve current page type
+    const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
+    router.push(`/sites/${siteId}${currentPageType}`)
+    setOpen(false)
+    setSearch('')
+  }
+
+  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
+
+  return (
+    <div className="relative px-3 mb-2" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors ${
+          collapsed ? 'justify-center' : ''
+        }`}
+        title={collapsed ? currentSite?.name || 'Select site' : undefined}
+      >
+        <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
+          {initial}
+        </span>
+        {!collapsed && (
+          <>
+            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
+          </>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+          <div className="p-2">
+            <input
+              type="text"
+              placeholder="Search sites..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-neutral-900 dark:text-white placeholder:text-neutral-400"
+              autoFocus
+            />
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {filtered.map((site) => (
+              <button
+                key={site.id}
+                onClick={() => switchSite(site.id)}
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors text-left ${
+                  site.id === currentSiteId
+                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
+                    : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                }`}
+              >
+                <span className="w-5 h-5 rounded bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-[10px] font-bold shrink-0">
+                  {site.name.charAt(0).toUpperCase()}
+                </span>
+                <span className="flex flex-col min-w-0">
+                  <span className="truncate">{site.name}</span>
+                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
+                </span>
+              </button>
+            ))}
+            {filtered.length === 0 && (
+              <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>
+            )}
+          </div>
+          <div className="border-t border-neutral-200 dark:border-neutral-700 p-2">
+            <Link
+              href="/sites/new"
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add new site
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function NavItemLink({
+  item,
+  siteId,
+  collapsed,
+  onClick,
+}: {
+  item: NavItem
+  siteId: string
+  collapsed: boolean
+  onClick?: () => void
+}) {
+  const pathname = usePathname()
+  const href = item.href(siteId)
+  const isActive = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      title={collapsed ? item.label : undefined}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors ${
+        collapsed ? 'justify-center' : ''
+      } ${
+        isActive
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+      }`}
+    >
+      <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
+      {!collapsed && <span>{item.label}</span>}
+    </Link>
+  )
+}
+
+export default function Sidebar({
+  siteId,
+  mobileOpen,
+  onMobileClose,
+}: {
+  siteId: string
+  mobileOpen: boolean
+  onMobileClose: () => void
+}) {
+  const { user } = useAuth()
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true'
+  })
+  const [sites, setSites] = useState<Site[]>([])
+  const pathname = usePathname()
+
+  // Close mobile drawer on navigation
+  useEffect(() => {
+    onMobileClose()
+  }, [pathname, onMobileClose])
+
+  useEffect(() => {
+    listSites()
+      .then(setSites)
+      .catch(() => {})
+  }, [])
+
+  const toggleCollapsed = () => {
+    const next = !collapsed
+    setCollapsed(next)
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next))
+  }
+
+  const sidebarContent = (isMobile: boolean) => {
+    const isCollapsed = isMobile ? false : collapsed
+
+    return (
+      <div className="flex flex-col h-full">
+        {/* Site Picker */}
+        <div className="pt-4 pb-2">
+          <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
+        </div>
+
+        {/* Nav Groups */}
+        <nav className="flex-1 overflow-y-auto px-3 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              {!isCollapsed && (
+                <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                  {group.label}
+                </p>
+              )}
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavItemLink
+                    key={item.label}
+                    item={item}
+                    siteId={siteId}
+                    collapsed={isCollapsed}
+                    onClick={isMobile ? () => onMobileClose() : undefined}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* Bottom: Settings + Collapse toggle */}
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-1">
+          {canEdit && (
+            <NavItemLink
+              item={SETTINGS_ITEM}
+              siteId={siteId}
+              collapsed={isCollapsed}
+              onClick={isMobile ? () => onMobileClose() : undefined}
+            />
+          )}
+          {!isMobile && (
+            <button
+              onClick={toggleCollapsed}
+              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors w-full"
+              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            >
+              {collapsed ? (
+                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0 mx-auto" />
+              ) : (
+                <>
+                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
+                  <span>Collapse</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* Mobile hamburger trigger — rendered in the header via leftActions */}
+
+      {/* Desktop sidebar */}
+      <aside
+        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
+          collapsed ? 'w-16' : 'w-60'
+        }`}
+      >
+        {sidebarContent(false)}
+      </aside>
+
+      {/* Mobile overlay drawer */}
+      {mobileOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/30 lg:hidden"
+            onClick={() => onMobileClose()}
+          />
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl lg:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
+              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
+              <button
+                onClick={() => onMobileClose()}
+                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </div>
+            {sidebarContent(true)}
+          </aside>
+        </>
+      )}
+    </>
+  )
+}
+
+export function SidebarMobileToggle({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+      aria-label="Open navigation"
+    >
+      <MenuIcon className="w-5 h-5" />
+    </button>
+  )
+}
--- a/lib/sidebar-context.tsx
+++ b/lib/sidebar-context.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { createContext, useCallback, useContext, useState } from 'react'
+
+interface SidebarContextValue {
+  mobileOpen: boolean
+  openMobile: () => void
+  closeMobile: () => void
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  mobileOpen: false,
+  openMobile: () => {},
+  closeMobile: () => {},
+})
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const openMobile = useCallback(() => setMobileOpen(true), [])
+  const closeMobile = useCallback(() => setMobileOpen(false), [])
+
+  return (
+    <SidebarContext.Provider value={{ mobileOpen, openMobile, closeMobile }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export function useSidebar() {
+  return useContext(SidebarContext)
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
      "name": "pulse-frontend",
      "version": "0.15.0-alpha",
      "dependencies": {
-        "@ciphera-net/ui": "^0.2.8",
+        "@ciphera-net/ui": "^0.2.10",
        "@ducanh2912/next-pwa": "^10.2.9",
        "@phosphor-icons/react": "^2.1.10",
        "@simplewebauthn/browser": "^13.2.2",
@@ -1668,9 +1668,9 @@
      }
    },
    "node_modules/@ciphera-net/ui": {
-      "version": "0.2.8",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.8/3a78342207ee2351625b9469ec6030033df183cc",
-      "integrity": "sha512-I6B7fE2YXjJaipmcVS60q2pzhsy/NKM4sfvHIv4awi6mcrXjGag8FznW0sI1SbsplFWpoT5iSMtWIi/lZdFhbA==",
+      "version": "0.2.10",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.10/aeae8c3cb25cc9b5193bfba47ce2e444ac82f1d7",
+      "integrity": "sha512-yWHitk43epGjtwUxGVrKwGYZb+VtJhauy7fgmqYfDC8tq33eVlH+yOdi44J/OiWDl8ONSlt8i5Xptz3k79UuXQ==",
      "dependencies": {
        "@phosphor-icons/react": "^2.1.10",
        "class-variance-authority": "^0.7.1",
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "test:watch": "vitest"
  },
  "dependencies": {
-    "@ciphera-net/ui": "^0.2.8",
+    "@ciphera-net/ui": "^0.2.10",
    "@ducanh2912/next-pwa": "^10.2.9",
    "@phosphor-icons/react": "^2.1.10",
    "@simplewebauthn/browser": "^13.2.2",