| import Link from "next/link"; | |
| import { Suspense } from "react"; | |
| import { ActiveNavLinks, NavLinksView } from "./NavLinks"; | |
| // Server component: the header is part of the static shell. Only the links read the pathname, and | |
| // usePathname() suspends while dynamic routes like /videos/[id] prerender, so they get their own | |
| // Suspense boundary with an un-highlighted fallback of identical size. | |
| export function Nav() { | |
| return ( | |
| <header className="sticky top-0 z-30 border-b border-line bg-page/90 backdrop-blur"> | |
| <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-6 py-3"> | |
| <Link href="/" className="flex items-baseline gap-2"> | |
| <span className="text-base font-semibold">Video RAG</span> | |
| <span className="text-xs text-muted">Visual Mentor</span> | |
| </Link> | |
| <Suspense fallback={<NavLinksView path={null} />}> | |
| <ActiveNavLinks /> | |
| </Suspense> | |
| </div> | |
| </header> | |
| ); | |
| } | |