/* nav.jsx — TopBar + sticky HeaderNav + MegaMenus */
/* Menus are driven by the central page registry in seo-links.js so nav
links always resolve to real pages. */
const SERVICES = (window.SUNRISE && window.SUNRISE.SERVICES) || [];
const PROPS = (window.SUNRISE && window.SUNRISE.SEGMENTS) || [];
const AREAS = (window.SUNRISE && window.SUNRISE.AREAS) || [];
const U = (slug) => (window.SUNRISE ? window.SUNRISE.url(slug) : slug + ".html");
/* Cross-page links. On the homepage __home is unset, so section links stay
in-page hashes ("#services"). On sub-pages (Projects.html) __home points
back at the homepage so the same links resolve to "home.html#services". */
const HOME = window.__home || "";
const HOME_URL = HOME || "#top";
const PROJECTS_URL = U("portfolio");
const sec = (id) => HOME + "#" + id;
// One run of the marquee content; rendered twice back-to-back so the
// translateX(-50%) loop is seamless.
function TopbarTickerRun() {
return (
520-753-1758 24/7 Emergency Roof Repair sunriseroofer@outlook.com ROC #358079 · Licensed & Insured
);
}
function TopBar() {
return (
);
}
function MobileMenu({ open, onClose }) {
const [openSec, setOpenSec] = useState(null);
// collapse any expanded section whenever the drawer closes
useEffect(() => { if (!open) setOpenSec(null); }, [open]);
// Lock background scroll on phones so the menu acts as a self-contained
// modal. On larger screens we leave it scrollable on purpose, so the page
// glides behind the glassy fly-out. iOS-safe: pin the body, then restore.
useEffect(() => {
if (!open) return;
if (!window.matchMedia("(max-width: 640px)").matches) return;
const y = window.scrollY;
const b = document.body;
Object.assign(b.style, { position: "fixed", top: "-" + y + "px", left: "0", right: "0", overflow: "hidden" });
return () => {
Object.assign(b.style, { position: "", top: "", left: "", right: "", overflow: "" });
window.scrollTo(0, y);
};
}, [open]);
const toggle = (key) => setOpenSec((cur) => (cur === key ? null : key));
// Render through a portal on so the drawer isn't trapped by the
// header's backdrop-filter (which would make it the containing block for
// this position:fixed element) or its stacking context.
return ReactDOM.createPortal(
,
document.body
);
}
function HeaderNav() {
const [solid, setSolid] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
// Homepage has the tall pinned video hero (.hero) → header stays
// transparent over it, then turns solid (light) on scroll. Every other
// page gets a solid light header immediately so the full-color logo sits
// on a light surface and reads crisply.
const pinnedHero = document.querySelector(".hero");
if (!pinnedHero) { setSolid(true); return; }
const onScroll = () => setSolid(window.scrollY > window.innerHeight * 0.88);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// close the drawer if the viewport grows back to desktop
useEffect(() => {
const mq = window.matchMedia("(min-width: 1081px)");
const onChange = (e) => { if (e.matches) setMenuOpen(false); };
mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, []);
return (