Navigation dans la barre latérale

Pilotez la barre latérale depuis un tableau de données et mettez en évidence la route active automatiquement — côté serveur.

La barre latérale doit mettre en évidence la page sur laquelle vous vous trouvez. PRISM transmet le chemin de la requête courante à chaque layout via route.pathname — ainsi le layout connaît l'élément actif sans aucun JavaScript côté client.

Définissez la navigation comme des données, puis marquez le lien actif lors du mapping :

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

L'aperçu est maintenant sur /products — remarquez que le lien Products est mis en évidence. Toute cette logique s'est exécutée côté serveur ; le HTML est arrivé avec le bon élément déjà actif.