"use client"; import { useState } from "react"; import { Box, Flex, HStack, Stack, Button, Menu, Portal } from "@chakra-ui/react"; import { useScroll, useMotionValueEvent } from "framer-motion"; /** * NOIRA-achtige header: bovenaan staan logo en menu als twee losse glass-pills * met een gat ertussen. Bij scrollen sluit het gat (gap → 0) en worden de * binnenranden recht, zodat de twee pills tegen elkaar aan één balk vormen. De * pills behouden hun eigen breedte (logo links, menu rechts). * * Menu-items: elk item is { label, href }. Een item met een `items`-array * ([{ label, href }, ...]) rendert als dropdown (desktop via , mobiel als * ingesprongen sublinks). De parent-href blijft klikbaar/opgenomen als eerste * sub-item. * * position "fixed" (de header is geen directe child van de scroll-container). * is ambient NavLink (active-state via _currentPage, match="prefix"). * MotionBox is ambient via @obelisk/blocks. */ export default function SiteNav({ items = [], logo = "Obelisk", home = "/", ctaHref = "/contact/", ctaLabel = "Aan de slag", ...props }) { const [scrolled, setScrolled] = useState( () => (typeof window !== "undefined" ? window.scrollY > 8 : false), ); const { scrollY } = useScroll(); useMotionValueEvent(scrollY, "change", (y) => { setScrolled(y > 8); }); // Gedeelde glass-pill-stijl. const pill = (extra = {}) => ({ bg: "whiteAlpha.300", backdropFilter: scrolled ? "blur(14px) saturate(1.4)" : "blur(6px)", boxShadow: scrolled ? "sm" : "lg", borderRadius: "l3", px: "6", py: "4", ...extra, }); return ( {/* Gap sluit bij scroll; binnenranden worden recht zodat de pills tegen elkaar aan als één balk ogen. Pills houden hun eigen breedte. */} {/* Logo-eilandje */}

{logo} Menu } > Home {items.map((item) => ( item.items && item.items.length ? ( {item.label} {item.items.map((sub) => ( {sub.label} ))} ) : ( {item.label} ) ))} {/* Menu-eilandje (desktop) */} {items.map((item) => ( item.items && item.items.length ? ( {item.items.map((sub) => ( {sub.label} ))} ) : ( ) ))} ); } export function Preview() { return ( ); }

Bed & French Alps