A dynamic header

A header that always says "Dashboard" gets stale fast. Since the layout already knows the active nav item, reuse it for the header title — one source of truth.

src/app/layout.tsx

const title = NAV.find((n) => active(path, n.href))?.label ?? "Dashboard";

<header className="hd">
  <h1>{title}</h1>
</header>

Navigate around the preview — the header title tracks the route. For SEO, set the document title too with generateMetadata on each page:

src/app/products/page.tsx

export function generateMetadata() {
  return { title: "Products — Acme Admin" };
}

TIP

Need page-specific header buttons (like "+ New product")? Render them from the page itself — we'll add one to the products table next.