// ---------------------------------------------------------------------------
// ScrollHeader — pre-built responsive header for single-page scroll sites
// ---------------------------------------------------------------------------
// PRE-INSTALLED in every single-page React project. App.tsx imports:
// import ScrollHeader from "@/components/ScrollHeader"
//
// ---------------------------------------------------------------------------
import { useState, useEffect } from "react";
interface NavLink {
href: string;
label: string;
}
interface ScrollHeaderProps {
brand: string;
links: NavLink[];
ctaLabel?: string;
ctaHref?: string;
}
export default function ScrollHeader({ brand, links, ctaLabel, ctaHref }: ScrollHeaderProps) {
const [open, setOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const handleClick = (href: string) => {
setOpen(false);
const id = href.replace("#", "");
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({ behavior: "smooth" });
}
};
return (
{/* Mobile nav overlay */}
{open && (
)}
);
}