"use client";
import { motion, useScroll, useSpring } from "framer-motion";
import { useEffect, useState } from "react";
import { InstagramIcon, MailIcon, MenuIcon, CloseIcon } from "@/components/icons";
import { studio } from "@/lib/content";
const SECTIONS = [
{ id: "work", label: "Work" },
{ id: "konnex", label: "Konnex" },
{ id: "about", label: "About" },
{ id: "recognition", label: "Recognition" },
{ id: "journal", label: "Instagram" },
{ id: "contact", label: "Contact" },
];
/**
* Anchor navigation that works even inside sandboxed preview iframes:
* - Releases any scroll lock a modal may have left behind.
* - Scrolls FIRST (computed offset, independent of scroll-margin/padding).
* - Only touches history in a try/catch, because sandboxed iframes throw a
* SecurityError on `history.replaceState` โ which previously aborted the
* whole handler before scrolling happened.
*/
const HEADER_OFFSET = 96; // matches scroll-margin-top: 6rem
export function navigateToSection(id: string, onNavigate?: () => void) {
document.body.style.overflow = "";
document.documentElement.style.overflow = "";
// Let React start unmounting a possible open slideshow. Errors in onNavigate
// must not block scrolling, so guard it too.
try {
onNavigate?.();
} catch {
/* never let history/hydration issues block navigation */
}
const performScroll = () => {
const target = document.getElementById(id);
if (target) {
// scrollIntoView works no matter which element is the actual scroll
// container (window or a wrapping container in a preview iframe).
// scroll-margin-top: 6rem keeps the section clear of the fixed header.
try {
target.scrollIntoView({ behavior: "smooth", block: "start" });
} catch {
const scrollTop = window.scrollY ?? document.documentElement.scrollTop ?? 0;
const top =
target.getBoundingClientRect().top + scrollTop - HEADER_OFFSET;
window.scrollTo(0, Math.max(top, 0));
}
} else {
try {
window.scrollTo({ top: 0, behavior: "smooth" });
} catch {
window.scrollTo(0, 0);
}
}
try {
window.history.replaceState(null, "", target ? `#${id}` : "#top");
} catch {
/* sandboxed iframes disallow history changes โ ignore */
}
};
// Wait two frames so React has committed the unmount of a closed slideshow
// and the page is definitely scrollable before we move.
requestAnimationFrame(() => requestAnimationFrame(performScroll));
}
export default function Nav({ onNavigate }: { onNavigate?: () => void }) {
const { scrollYProgress } = useScroll();
const progress = useSpring(scrollYProgress, { stiffness: 120, damping: 24, mass: 0.3 });
const [active, setActive] = useState("work");
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
const visible = entries
.filter((e) => e.isIntersecting)
.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
if (visible[0]) setActive(visible[0].target.id);
},
{ rootMargin: "-45% 0px -45% 0px", threshold: [0.01, 0.25, 0.6] },
);
SECTIONS.forEach(({ id }) => {
const el = document.getElementById(id);
if (el) observer.observe(el);
});
return () => observer.disconnect();
}, []);
return (
<>
);
}