Layout with Fixed Navigation
Anchors the navigation bar to the top of the viewport so it remains accessible as users scroll through long pages — reducing friction for multi-section sites.
AI Prompt
Build a documentation site layout in Next.js with Tailwind CSS using a fixed top navigation. Nav specs: `fixed top-0 left-0 right-0 z-50 h-16 bg-white/80 backdrop-blur-md border-b border-slate-200`. Use `useEffect` to add `shadow-sm` class when `window.scrollY > 10`. Nav content: logo left (SVG icon + name), search bar center (opens a `⌘K` command palette on click), links + theme toggle right. The main layout below the nav uses `pt-16` for offset. Main content uses a 3-column shell: (1) Left sidebar: collapsible section tree with indent levels, active link highlighted with `bg-indigo-50 text-indigo-700 font-medium`. Sidebar is `sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto`. (2) Center article: `prose prose-slate lg:prose-lg max-w-none`. Includes breadcrumb trail, H1, metadata row, MDX content, and a "Previous / Next" pagination footer. (3) Right "On this page" panel: `sticky top-16`, lists H2/H3 anchors with IntersectionObserver-driven active state. Mobile: both sidebars collapse — left becomes a sheet drawer, right disappears. Add a reading progress bar as a thin `h-0.5 bg-indigo-500` line inside the nav.