/* ============ NAVIGATION ============ */
const NAV_MAP = {
Home: "hero", About: "about", Rooms: "rooms", Cafe: "cafe",
Gallery: "gallery", Experiences: "experiences", Reviews: "reviews", Contact: "contact"
};
function ThemeToggle({ theme, onToggle }) {
const dark = theme === "dark";
return (
);
}
function Nav({ theme, onToggle }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const [active, setActive] = useState("hero");
const S = window.SITE;
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
const ids = Object.values(NAV_MAP);
const onScroll = () => {
const pos = window.scrollY + window.innerHeight * 0.35;
let current = ids[0];
for (const id of ids) {
const el = document.getElementById(id);
if (el && el.offsetTop <= pos) current = id;
}
setActive(current);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const go = (id) => (e) => {
e.preventDefault();
setOpen(false);
const el = document.getElementById(id);
if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: "smooth" });
};
return (
);
}
Object.assign(window, { Nav });