larpaso-website/src/components/Nav.astro

---
import { site } from '../lib/content';

const nav = site.nav;
---

<header class="nav">
  <div class="container nav-inner">
    <a href="/" class="nav-logo">
      <img src={nav.logo} alt={nav.logoAlt} width="320" height="60" class="nav-logo-img" />
    </a>

    <button
      type="button"
      class="nav-toggle"
      id="nav-toggle"
      aria-expanded="false"
      aria-controls="nav-links"
      aria-label="Menü öffnen"
    >
      <span></span>
      <span></span>
      <span></span>
    </button>

    <nav class="nav-links" id="nav-links" aria-label="Hauptnavigation">
      <ul>
        {nav.links.map((item) => (
          <li>
            <a href={`#${item.anchor}`}>{item.label}</a>
          </li>
        ))}
      </ul>
      <a class="btn btn-primary nav-cta" href="#kontakt">{nav.ctaLabel}</a>
    </nav>
  </div>
</header>

<style>
  .nav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
  }

  .nav-logo-img {
    height: 3.5rem;
    width: auto;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .nav-links ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
  }

  .nav-links ul a {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    text-decoration: none;
  }

  .nav-links ul a:hover {
    color: var(--color-primary);
  }

  .nav-cta {
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-5);
  }

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
  }

  @media (max-width: 900px) {
    .nav-toggle {
      display: flex;
    }

    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--color-bg);
      border-bottom: 1px solid var(--color-border);
      box-shadow: var(--shadow-md);
    }

    .nav-links {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-4);
      padding: var(--space-4) var(--container-padding) var(--space-5);
    }

    .nav-links ul {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      width: 100%;
    }

    .nav-links li {
      width: 100%;
      padding-block: var(--space-3);
      border-bottom: 1px solid var(--color-border);
    }

    .nav-links.is-open {
      display: flex;
    }
  }
</style>

<script>
  const toggle = document.getElementById('nav-toggle');
  const links = document.getElementById('nav-links');

  function setOpen(open) {
    links?.classList.toggle('is-open', open);
    toggle?.setAttribute('aria-expanded', String(open));
    toggle?.setAttribute('aria-label', open ? 'Menü schließen' : 'Menü öffnen');
  }

  toggle?.addEventListener('click', () => {
    setOpen(!links?.classList.contains('is-open'));
  });

  links?.addEventListener('click', (event) => {
    const target = event.target;
    if (target instanceof HTMLElement && target.tagName === 'A') {
      setOpen(false);
    }
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') setOpen(false);
  });
</script>