"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { loanLinks, site } from "@/content/site";
export function SiteHeader() {
const pathname = usePathname();
return ;
}
function HeaderContents({ pathname }: { pathname: string }) {
const [mobileOpen, setMobileOpen] = useState(false);
const [loanOpen, setLoanOpen] = useState(false);
const header = useRef(null);
const mobileButton = useRef(null);
const loanButton = useRef(null);
const loanPanel = useRef(null);
useEffect(() => {
const updateScrollState = () => {
if (header.current)
header.current.dataset.scrolled = String(window.scrollY > 0);
};
updateScrollState();
window.addEventListener("scroll", updateScrollState, { passive: true });
return () => window.removeEventListener("scroll", updateScrollState);
}, []);
useEffect(() => {
const breakpoint = window.matchMedia("(min-width: 922px)");
const reset = (event: MediaQueryListEvent) => {
const nav = document.getElementById("site-navigation"),
active = document.activeElement;
setMobileOpen(false);
setLoanOpen(false);
if (!event.matches && nav?.contains(active))
mobileButton.current?.focus();
else if (event.matches && loanPanel.current?.contains(active))
loanButton.current?.focus();
else if (event.matches && active === mobileButton.current)
nav?.querySelector("a")?.focus();
};
breakpoint.addEventListener("change", reset);
return () => breakpoint.removeEventListener("change", reset);
}, []);
function close() {
setMobileOpen(false);
setLoanOpen(false);
}
return (
{
if (event.key !== "Escape") return;
if (loanOpen) {
setLoanOpen(false);
loanButton.current?.focus();
} else if (mobileOpen) {
setMobileOpen(false);
mobileButton.current?.focus();
}
}}
>
);
}