NavMobileFirst Navigation

---
/**
 * NavMobileFirst
 * Mobile-first nav met hamburger menu. Opent als volledig scherm overlay.
 */
interface Props {
  logo: string;
  links: { label: string; href: string; active?: boolean }[];
  cta?: { label: string; href: string };
}
const { logo, links, cta } = Astro.props;
---
<header class="nmf" id="nmf">
  <nav class="nmf-inner">
    <a href="/" class="nmf-logo">{logo}</a>
    <div class="nmf-actions">
      {cta && <a href={cta.href} class="nmf-cta">{cta.label}</a>}
      <button class="nmf-burger" id="nmf-burger" aria-label="Menu openen" aria-expanded="false">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <line x1="3" y1="6" x2="19" y2="6" class="nmf-line top"/>
          <line x1="3" y1="11" x2="19" y2="11" class="nmf-line mid"/>
          <line x1="3" y1="16" x2="19" y2="16" class="nmf-line bot"/>
        </svg>
      </button>
    </div>
  </nav>
  <div class="nmf-overlay" id="nmf-overlay">
    <ul class="nmf-menu">
      {links.map(l => (
        <li><a href={l.href} class={`nmf-menu-link${l.active ? ' nmf-menu-link--active' : ''}`}>{l.label}</a></li>
      ))}
    </ul>
  </div>
</header>
<script>
  const burger = document.getElementById('nmf-burger');
  const overlay = document.getElementById('nmf-overlay');
  const header = document.getElementById('nmf');
  burger?.addEventListener('click', () => {
    const open = overlay?.classList.toggle('nmf-overlay--open');
    burger.setAttribute('aria-expanded', String(open));
    header?.classList.toggle('nmf--open', open);
  });
</script>
<style>
  .nmf { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 100; }
  .nmf-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .nmf-logo { font-weight: 800; font-size: 1.0625rem; color: #0a0a0a; text-decoration: none; letter-spacing: -0.02em; }
  .nmf-actions { display: flex; align-items: center; gap: 1rem; }
  .nmf-cta { font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1.25rem; background: var(--color-accent,#6366f1); color: #fff; border-radius: 0.5rem; text-decoration: none; }
  .nmf-burger { background: none; border: none; cursor: pointer; display: flex; color: #0a0a0a; padding: 0.25rem; }
  .nmf-overlay { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 1.5rem; }
  .nmf-overlay--open { display: block; }
  .nmf-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .nmf-menu-link { display: block; font-size: 1.0625rem; font-weight: 500; color: #374151; text-decoration: none; padding: 0.875rem 1rem; border-radius: 0.5rem; transition: all 0.15s; }
  .nmf-menu-link:hover, .nmf-menu-link--active { color: var(--color-accent,#6366f1); background: rgba(99,102,241,0.07); }
</style>