"use client"; import * as React from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; type NavItem = { href: string; label: string }; type Resource = { href: string; title: string; desc: string; icon: React.ReactNode; }; const NAV: NavItem[] = [ { href: "/", label: "Home" }, { href: "/features", label: "Features" }, { href: "/pricing", label: "Pricing" }, { href: "/about", label: "About" }, ]; const RESOURCES: Resource[] = [ { href: "/docs", title: "Docs", desc: "Guides, API, tutorials, and examples.", icon: ( ), }, { href: "/templates", title: "Templates", desc: "Production-ready starters for common use cases.", icon: ( ), }, { href: "/community", title: "Community", desc: "Join discussions and find support.", icon: ( ), }, { href: "/changelog", title: "Changelog", desc: "What shipped and when, with details.", icon: ( ), }, ]; export function PromoteHeader() { const [pathname, setPathname] = React.useState("/"); const [open, setOpen] = React.useState(false); const [isDark, setIsDark] = React.useState(false); // Safely get pathname from Next.js hook let pathnameFromHook = null; try { pathnameFromHook = usePathname(); } catch (error) { // Hook not available outside Next.js router context pathnameFromHook = null; } const activePath = pathnameFromHook ?? pathname; React.useEffect(() => { // Safely get pathname on client side if (typeof window !== "undefined") { setPathname(window.location.pathname); } }, []); React.useEffect(() => { // Initialize theme from localStorage or system const stored = typeof window !== "undefined" ? localStorage.getItem("theme") : null; const systemDark = typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)")?.matches; const dark = stored ? stored === "dark" : !!systemDark; document.documentElement.classList.toggle("dark", dark); setIsDark(dark); }, []); const toggleTheme = () => { const next = !isDark; setIsDark(next); document.documentElement.classList.toggle("dark", next); localStorage.setItem("theme", next ? "dark" : "light"); }; const isActive = (href: string) => href === "/" ? activePath === "/" : activePath?.startsWith(href); const primaryBtn = "inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-semibold " + "bg-zinc-900 text-white hover:bg-zinc-900/90 " + "dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-100/90 " + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950/20 dark:focus-visible:ring-white/20"; const secondaryBtn = "inline-flex h-9 items-center justify-center rounded-md px-3 text-sm font-medium " + "text-zinc-800 dark:text-zinc-200 " + "border border-zinc-950/20 dark:border-white/20 " + "hover:bg-zinc-950/[.03] dark:hover:bg-white/5 " + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950/20 dark:focus-visible:ring-white/20"; const desktopLink = (active: boolean) => [ "rounded-md px-3 py-1.5 text-sm font-medium transition-colors", "outline-none ring-0 focus-visible:ring-2 focus-visible:ring-offset-0", "hover:bg-zinc-950/[.03] dark:hover:bg-white/5", active ? "text-zinc-950 dark:text-zinc-50 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 bg-zinc-950/[.03] dark:bg-white/5" : "text-zinc-600 dark:text-zinc-400", ].join(" "); return ( <> {/* Skip to content */} Skip to content {/* Announcement bar (optional) */}

New Explore our updated templates—faster starters and better docs. Browse templates

{/* Header */}

{/* subtle gradient line */}

{/* Left: burger + brand + desktop nav */}

{/* Mobile burger */} {/* Brand */} Ruixen

Ruixen {/* Desktop Nav */}

{NAV.map((item) => ( {item.label} ))} {/* Resources hover panel */}

{r.icon}

{r.title}

{r.desc}

Looking for examples? Try the{" "} Templates {" "} section or jump straight into the{" "} Docs .

{/* Right: search + theme + CTAs (desktop) */}

{/* search */}

/

{/* theme toggle */} {/* actions */} Sign In Get Started

{/* Right (mobile): quick CTA */}

Start

{/* Mobile drawer */}

{/* overlay */}

setOpen(false)} /> {/* panel */}

{/* header in drawer */}

setOpen(false)} className="flex items-center gap-2" > Ruixen

Ruixen

{/* search */}

{/* nav list */}

{NAV.map((item) => ( setOpen(false)} className={[ "block rounded-md px-2.5 py-2 text-sm font-medium", "hover:bg-zinc-950/[.03] dark:hover:bg-white/5", isActive(item.href) ? "text-zinc-950 dark:text-zinc-50 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 bg-zinc-950/[.03] dark:bg-white/5" : "text-zinc-700 dark:text-zinc-300", ].join(" ")} > {item.label} ))}

{/* quick links */}

Quick Links

{RESOURCES.slice(0, 4).map((r) => ( setOpen(false)} className="flex items-start gap-2 rounded-lg border border-zinc-950/20 p-2 text-sm hover:bg-zinc-950/[.03] dark:border-white/20 dark:hover:bg-white/5" > {r.icon} {r.title} ))}

{/* actions */}

setOpen(false)} className={secondaryBtn} > Sign In setOpen(false)} className={primaryBtn} > Get Started

{/* footer row in drawer */}

setOpen(false)} className="rounded-md border border-zinc-950/20 px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-950/[.03] dark:border-white/20 dark:text-zinc-300 dark:hover:bg-white/5" > Contact sales

); }

Promote Header

Installation

Usage