Sidebar navigation

Drive the sidebar from a data array and highlight the active route automatically — server-side.

The sidebar should highlight the page you're on. PRISM passes the current request path to every layout as route.pathname — so the layout knows the active item with no client-side JavaScript at all.

Define the nav as data, then mark the active link while mapping it:

src/app/layout.tsx

const NAV = [
  { label: "Dashboard", href: "/" },
  { label: "Products",  href: "/products" },
  { label: "Orders",    href: "/orders" },
  { label: "Customers", href: "/customers" },
];

const active = (path, href) =>
  href === "/" ? path === "/" : path.startsWith(href);

// inside Layout({ children, route }):
const path = route?.pathname ?? "/";
<nav className="nav">
  {NAV.map((n) => (
    <a key={n.href} href={n.href}
       className={active(path, n.href) ? "on" : ""}>{n.label}</a>
  ))}
</nav>

NOTE

The preview is on /products now — notice the Products link is highlighted. That whole decision happened on the server; the HTML arrived with the right item already active.