Documentation Page
A docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.
DOM + CSS1 dep1 file · 4 KB TSX
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
import { Search, Hash } from "lucide-react";
const SECTIONS = ["Getting Started", "Installation", "Configuration", "API Reference", "Deployment"];
const TOC = ["Overview", "Quick start", "Next steps"];
function Topbar() {
return (
<div className="flex items-center gap-4 border-b border-white/10 px-6 py-3">
<span className="font-sans font-bold">Nova Docs</span>
<div className="ml-auto flex w-full max-w-sm items-center gap-2 rounded-lg border border-white/5 px-3 py-2">
<Search className="h-4 w-4 text-neutral-400" />
<span className="text-sm text-neutral-400">Search docs…</span>
</div>
</div>
);
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this page template
The three-column shape exists because docs readers arrive in two different modes — browsing (they need the section sidebar) and scanning one long article (they need the in-page TOC) — and this layout serves both without making either compete for space with the article body, which stays the widest column throughout. The docTitle prop doing double duty as both the h1 and the active-sidebar-item matcher is the non-obvious detail: it keeps the 'you are here' state trivially in sync with the page content instead of needing a second source of truth. The grid gracefully drops from three columns to two when showToc is off, rather than leaving a dead gap, by swapping the whole grid-template-columns string on that one boolean. Caveat: the sidebar and TOC here are static link lists with no scroll-spy — the TOC won't highlight the section currently in view without adding an IntersectionObserver, which is a reasonable next step but out of scope for a starting template.
