const Nav = ({ tweaks, currentSection, navigateTo, isVisible = true, isHeroAttached = false }) => { const [open, setOpen] = React.useState(false); const [scrolled, setScrolled] = React.useState(false); const [isMobile, setIsMobile] = React.useState(() => window.innerWidth <= 768); const navItems = [ { id: "projects", label: "Projects", num: "01" }, { id: "about", label: "About", num: "02" }, { id: "skills", label: "Skills", num: "03" }, { id: "experience", label: "Experience", num: "04" }, { id: "contact", label: "Contact", num: "05" }, ]; React.useEffect(() => { setScrolled(currentSection !== "hero"); }, [currentSection]); React.useEffect(() => { const mediaQuery = window.matchMedia("(max-width: 768px)"); const syncMobile = () => { const mobile = mediaQuery.matches; setIsMobile(mobile); if (!mobile) setOpen(false); }; syncMobile(); mediaQuery.addEventListener("change", syncMobile); return () => mediaQuery.removeEventListener("change", syncMobile); }, []); const navStyle = tweaks?.navStyle || "pill"; const handleNavigate = (id) => { navigateTo(id); setOpen(false); }; const isHeroSection = currentSection === "hero"; const useHeroIntegratedStyle = isHeroSection && isHeroAttached; if (!isVisible) return null; const LogoBlock = ({ size = "desktop" }) => ( ); const HireMeBtn = () => ( ); const ResumeBtn = ({ pill }) => ( { e.currentTarget.style.background = "rgba(20,184,166,0.1)"; e.currentTarget.style.borderColor = "rgba(20,184,166,0.5)"; e.currentTarget.style.color = "var(--teal)"; e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.1), 0 0 16px rgba(20,184,166,0.2)"; }} onMouseLeave={e => { e.currentTarget.style.background = "rgba(255,255,255,0.04)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.14)"; e.currentTarget.style.color = "rgba(255,255,255,0.5)"; e.currentTarget.style.boxShadow = "inset 0 1px 0 rgba(255,255,255,0.1)"; }}> Resume ); const MobileMenuButton = ( ); const MobileMenu = ({ compact }) => open ? (

Navigation

{navItems.map((item, index) => { const isActive = currentSection === item.id; return ( ); })}
) : null; // ─── Minimal nav ──────────────────────────────────────────────────────────── if (navStyle === "minimal") { return ( ); } // ─── Pill nav (default) ────────────────────────────────────────────────────── return (
); }; Object.assign(window, { Nav });