Sidebar Active Navigation State

Introduced in v0.1.11

The dashboard sidebar now provides a clear visual indicator for the currently active page. This is a foundational wayfinding affordance — users always know which section of the app they are in.

How it works

The dashboard/layout.tsx component uses the Next.js usePathname() hook to read the current route on every render. Each nav link's href is compared against the active pathname. When they match, an active style set is applied to that link.

Active link styles

bg-muted          — subtle background fill to distinguish the active item
text-foreground   — full-contrast text (versus muted for inactive links)
font-semibold     — increased font weight for emphasis
border-l-2        — left border acting as a colour accent bar
border-primary    — the border uses the app's primary brand colour

Inactive links retain text-muted-foreground so the active item stands out without visual noise.

Implementation reference

// src/app/dashboard/layout.tsx (simplified)
'use client';
import { usePathname } from 'next/navigation';
import Link from 'next/link';

const navLinks = [
  { href: '/dashboard', label: 'Overview' },
  { href: '/dashboard/deposits', label: 'Deposits' },
  // …
];

export default function DashboardLayout({ children }) {
  const pathname = usePathname();

  return (
    <aside>
      <nav>
        {navLinks.map(({ href, label }) => {
          const isActive = pathname === href;
          return (
            <Link
              key={href}
              href={href}
              className={
                isActive
                  ? 'bg-muted text-foreground font-semibold border-l-2 border-primary'
                  : 'text-muted-foreground'
              }
            >
              {label}
            </Link>
          );
        })}
      </nav>
      <main>{children}</main>
    </aside>
  );
}

Why this matters

Without an active state indicator, every sidebar link looks the same regardless of which route is loaded. Users navigating between sections — Deposits, Disputes, Compliance, Settings — had no persistent visual anchor to confirm which page they were on. This is especially disorienting after a page refresh or when arriving via a direct link.

The fix addresses the single most basic wayfinding requirement for any multi-page sidebar layout.