feat: refactor nav IA with role-aware config, collapsible sidebar, and usability tests

Author: zeekman

frontend/e2e/navigation.spec.ts

@@ -0,0 +1,176 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Navigation IA usability tests.
+ * Covers: sidebar, bottom nav, breadcrumbs, skip link, role paths, keyboard nav.
+ */
+
+test.describe('Sidebar navigation (desktop)', () => {
+  test.use({ viewport: { width: 1280, height: 800 } });
+
+  test('renders sidebar with primary nav items', async ({ page }) => {
+    await page.goto('/');
+    const sidebar = page.getByRole('navigation', { name: 'Main navigation' }).first();
+    await expect(sidebar).toBeVisible();
+    await expect(sidebar.getByRole('link', { name: /home/i })).toBeVisible();
+    await expect(sidebar.getByRole('link', { name: /discover/i })).toBeVisible();
+    await expect(sidebar.getByRole('link', { name: /notifications/i })).toBeVisible();
+    await expect(sidebar.getByRole('link', { name: /settings/i })).toBeVisible();
+  });
+
+  test('active link has aria-current="page"', async ({ page }) => {
+    await page.goto('/discover');
+    const sidebar = page.getByRole('navigation', { name: 'Main navigation' }).first();
+    const discoverLink = sidebar.getByRole('link', { name: /discover/i });
+    await expect(discoverLink).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('sidebar collapse toggle works', async ({ page }) => {
+    await page.goto('/');
+    const collapseBtn = page.getByRole('button', { name: /collapse sidebar/i });
+    await expect(collapseBtn).toBeVisible();
+    await collapseBtn.click();
+    await expect(page.getByRole('button', { name: /expand sidebar/i })).toBeVisible();
+  });
+
+  test('settings link is present in secondary nav', async ({ page }) => {
+    await page.goto('/');
+    const sidebar = page.getByRole('navigation', { name: 'Main navigation' }).first();
+    await expect(sidebar.getByRole('link', { name: /settings/i })).toBeVisible();
+  });
+});
+
+test.describe('Mobile navigation', () => {
+  test.use({ viewport: { width: 390, height: 844 } });
+
+  test('shows mobile top bar with menu button', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByRole('button', { name: /open navigation menu/i })).toBeVisible();
+  });
+
+  test('opens mobile drawer on menu button click', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: /open navigation menu/i }).click();
+    const drawer = page.getByRole('navigation', { name: 'Main navigation' }).last();
+    await expect(drawer).toBeVisible();
+  });
+
+  test('closes mobile drawer on close button', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: /open navigation menu/i }).click();
+    await page.getByRole('button', { name: /close menu/i }).click();
+    // Drawer should be hidden (translate-x-full)
+    const drawer = page.getByRole('navigation', { name: 'Main navigation' }).last();
+    await expect(drawer).not.toBeVisible();
+  });
+
+  test('bottom nav is visible on mobile', async ({ page }) => {
+    await page.goto('/');
+    const bottomNav = page.getByRole('navigation', { name: /mobile navigation/i });
+    await expect(bottomNav).toBeVisible();
+  });
+
+  test('bottom nav has at least 4 items', async ({ page }) => {
+    await page.goto('/');
+    const bottomNav = page.getByRole('navigation', { name: /mobile navigation/i });
+    const links = bottomNav.getByRole('link');
+    await expect(links).toHaveCount(await links.count());
+    expect(await links.count()).toBeGreaterThanOrEqual(4);
+  });
+
+  test('bottom nav active item has aria-current="page"', async ({ page }) => {
+    await page.goto('/');
+    const bottomNav = page.getByRole('navigation', { name: /mobile navigation/i });
+    const homeLink = bottomNav.getByRole('link', { name: /home/i });
+    await expect(homeLink).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('mobile drawer closes on overlay click', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: /open navigation menu/i }).click();
+    // Click the overlay (outside the drawer)
+    await page.mouse.click(350, 400);
+    const drawer = page.getByRole('navigation', { name: 'Main navigation' }).last();
+    await expect(drawer).not.toBeVisible({ timeout: 3000 });
+  });
+});
+
+test.describe('Breadcrumbs', () => {
+  test('does not render on homepage', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByRole('navigation', { name: /breadcrumb/i })).not.toBeVisible();
+  });
+
+  test('renders on nested route', async ({ page }) => {
+    await page.goto('/settings');
+    const breadcrumb = page.getByRole('navigation', { name: /breadcrumb/i });
+    await expect(breadcrumb).toBeVisible();
+    await expect(breadcrumb.getByRole('link', { name: /home/i })).toBeVisible();
+    await expect(breadcrumb.getByText(/settings/i)).toBeVisible();
+  });
+
+  test('last breadcrumb has aria-current="page"', async ({ page }) => {
+    await page.goto('/settings');
+    const breadcrumb = page.getByRole('navigation', { name: /breadcrumb/i });
+    await expect(breadcrumb.getByText(/settings/i)).toHaveAttribute('aria-current', 'page');
+  });
+});
+
+test.describe('Skip to content link', () => {
+  test.use({ viewport: { width: 1280, height: 800 } });
+
+  test('skip link is focusable and points to main content', async ({ page }) => {
+    await page.goto('/');
+    // Tab to focus the skip link
+    await page.keyboard.press('Tab');
+    const skipLink = page.getByRole('link', { name: /skip to content/i });
+    await expect(skipLink).toBeFocused();
+    await expect(skipLink).toHaveAttribute('href', '#main-content');
+  });
+});
+
+test.describe('Keyboard navigation', () => {
+  test.use({ viewport: { width: 1280, height: 800 } });
+
+  test('nav links are reachable by keyboard', async ({ page }) => {
+    await page.goto('/');
+    // Tab through until we hit a nav link
+    for (let i = 0; i < 10; i++) {
+      await page.keyboard.press('Tab');
+      const focused = page.locator(':focus');
+      const tag = await focused.evaluate((el) => el.tagName.toLowerCase()).catch(() => '');
+      if (tag === 'a') {
+        const href = await focused.getAttribute('href').catch(() => '');
+        if (href && href !== '#main-content') {
+          // Successfully reached a nav link
+          expect(href).toBeTruthy();
+          return;
+        }
+      }
+    }
+  });
+});
+
+test.describe('Role-specific nav paths', () => {
+  test.use({ viewport: { width: 1280, height: 800 } });
+
+  test('dashboard route is accessible', async ({ page }) => {
+    await page.goto('/dashboard');
+    await expect(page).toHaveURL(/\/dashboard/);
+  });
+
+  test('subscriptions route is accessible', async ({ page }) => {
+    await page.goto('/subscriptions');
+    await expect(page).toHaveURL(/\/subscriptions/);
+  });
+
+  test('notifications route is accessible', async ({ page }) => {
+    await page.goto('/notifications');
+    await expect(page).toHaveURL(/\/notifications/);
+  });
+
+  test('settings route is accessible', async ({ page }) => {
+    await page.goto('/settings');
+    await expect(page).toHaveURL(/\/settings/);
+  });
+});

frontend/src/app/layout.tsx

@@ -3,7 +3,6 @@ import './globals.css';
 import { ThemeProvider } from '@/contexts/ThemeContext';
 import { NoFlashScript } from '@/components/NoFlashScript';
 import { ToastProvider } from '@/components/ErrorToast';
-import NavLayout from '@/components/navigation/NavLayout';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
 
 export const metadata: Metadata = {
@@ -25,7 +24,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <ThemeProvider>
           <ToastProvider>
-            {children}
+            <ErrorBoundary>
+              {children}
+            </ErrorBoundary>
           </ToastProvider>
         </ThemeProvider>
       </body>

frontend/src/components/navigation/BottomNav.tsx

@@ -1,25 +1,53 @@
 'use client';
+
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import {
+  Home, Compass, Star, LayoutDashboard, Bell, Settings,
+} from 'lucide-react';
+import { getBottomNav, isNavActive, type NavRole, type NavItem } from './nav-config';
+
+const ICONS: Record<string, React.ComponentType<{ size?: number; 'aria-hidden'?: boolean | 'true' | 'false' }>> = {
+  Home, Compass, Star, LayoutDashboard, Bell, Settings,
+};
+
+interface BottomNavProps {
+  role?: NavRole;
+}
 
-const navItems = [
-  { href: '/', label: 'Home', icon: '🏠' },
-  { href: '/creators', label: 'Creators', icon: '👥' },
-  { href: '/subscribe', label: 'Subscribe', icon: '⭐' },
-  { href: '/dashboard', label: 'Dashboard', icon: '📊' },
-];
+function BottomNavItem({ item, pathname }: { item: NavItem; pathname: string }) {
+  const active = isNavActive(item.href, pathname, item.exact);
+  const Icon = ICONS[item.icon];
+
+  return (
+    <Link
+      href={item.href}
+      aria-current={active ? 'page' : undefined}
+      aria-label={item.label}
+      className={`flex flex-col items-center justify-center gap-0.5 flex-1 min-h-[56px] min-w-[44px] px-1 py-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-inset ${
+        active
+          ? 'text-sky-600 dark:text-sky-400'
+          : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'
+      }`}
+    >
+      {Icon && <Icon size={22} aria-hidden="true" />}
+      <span>{item.label}</span>
+    </Link>
+  );
+}
 
-export default function BottomNav() {
+export default function BottomNav({ role = 'fan' }: BottomNavProps) {
   const pathname = usePathname();
+  const items = getBottomNav(role);
 
   return (
-    <nav style={{ position: 'fixed', bottom: 0, left: 0, right: 0, backgroundColor: 'white', borderTop: '1px solid #e5e7eb', zIndex: 50 }} className="lg:hidden">
-      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-        {navItems.map(item => (
-          <Link key={item.href} href={item.href} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '0.5rem 0.75rem', minHeight: '56px', minWidth: '44px', justifyContent: 'center', color: pathname === item.href ? '#0ea5e9' : '#6b7280' }}>
-            <span style={{ fontSize: '1.5rem' }}>{item.icon}</span>
-            <span style={{ fontSize: '0.75rem', marginTop: '0.25rem' }}>{item.label}</span>
-          </Link>
+    <nav
+      className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 safe-area-inset-bottom"
+      aria-label="Mobile navigation"
+    >
+      <div className="flex items-stretch">
+        {items.map((item) => (
+          <BottomNavItem key={item.href} item={item} pathname={pathname} />
         ))}
       </div>
     </nav>

frontend/src/components/navigation/Breadcrumbs.tsx

@@ -1,28 +1,80 @@
 'use client';
+
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { ChevronRight } from 'lucide-react';
+
+/** Human-readable overrides for path segments */
+const SEGMENT_LABELS: Record<string, string> = {
+  dashboard: 'Dashboard',
+  creators: 'Creators',
+  creator: 'Creator',
+  discover: 'Discover',
+  subscriptions: 'Subscriptions',
+  subscribe: 'Subscribe',
+  notifications: 'Notifications',
+  settings: 'Settings',
+  profile: 'Profile',
+  earnings: 'Earnings',
+  content: 'Content',
+  plans: 'Plans',
+  subscribers: 'Subscribers',
+  checkout: 'Checkout',
+  onboarding: 'Onboarding',
+};
+
+function toLabel(segment: string): string {
+  return SEGMENT_LABELS[segment.toLowerCase()] ?? segment.charAt(0).toUpperCase() + segment.slice(1);
+}
 
 export default function Breadcrumbs() {
   const pathname = usePathname();
   const segments = pathname.split('/').filter(Boolean);
 
+  // Don't render on the homepage
+  if (segments.length === 0) return null;
+
+  const crumbs = segments.map((seg: string, i: number) => ({
+    href: '/' + segments.slice(0, i + 1).join('/'),
+    label: toLabel(seg),
+    isLast: i === segments.length - 1,
+  }));
+
   return (
-    <nav style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem', marginBottom: '1rem' }} aria-label="Breadcrumb">
-      <Link href="/" style={{ color: '#0ea5e9', minHeight: '44px', display: 'flex', alignItems: 'center' }}>Home</Link>
-      {segments.map((segment, i) => {
-        const href = '/' + segments.slice(0, i + 1).join('/');
-        const label = segment.charAt(0).toUpperCase() + segment.slice(1);
-        return (
-          <span key={href} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-            <span style={{ color: '#9ca3af' }}>/</span>
-            {i === segments.length - 1 ? (
-              <span style={{ color: '#171717', minHeight: '44px', display: 'flex', alignItems: 'center' }}>{label}</span>
+    <nav
+      aria-label="Breadcrumb"
+      className="mb-4 flex items-center gap-1 text-sm"
+    >
+      <ol className="flex items-center gap-1 flex-wrap">
+        <li>
+          <Link
+            href="/"
+            className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors min-h-[44px] inline-flex items-center"
+          >
+            Home
+          </Link>
+        </li>
+        {crumbs.map((crumb: { href: string; label: string; isLast: boolean }) => (
+          <li key={crumb.href} className="flex items-center gap-1">
+            <ChevronRight size={14} className="text-slate-400 dark:text-slate-600 shrink-0" aria-hidden="true" />
+            {crumb.isLast ? (
+              <span
+                className="text-slate-900 dark:text-slate-100 font-medium min-h-[44px] inline-flex items-center"
+                aria-current="page"
+              >
+                {crumb.label}
+              </span>
             ) : (
-              <Link href={href} style={{ color: '#0ea5e9', minHeight: '44px', display: 'flex', alignItems: 'center' }}>{label}</Link>
+              <Link
+                href={crumb.href}
+                className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors min-h-[44px] inline-flex items-center"
+              >
+                {crumb.label}
+              </Link>
             )}
-          </span>
-        );
-      })}
+          </li>
+        ))}
+      </ol>
     </nav>
   );
 }