Responsive navbar met hamburger-menu

Het probleem

Op kleine schermen stonden alle navigatie-items naast elkaar in een rij. Er was geen hamburger-menu om de navigatie in te klappen. Dat maakte de header onoverzichtelijk op mobiel en tablets.

Wat is er veranderd?

De header maakt nu gebruik van Bootstrap 5.3's responsive navbar-component:

• Hamburger-icoon — Op schermen smaller dan 992 px verschijnt een ☰-knop rechtsboven. De navigatielinks en de Contact-knop zijn verborgen totdat je op de knop klikt.
• data-bs-theme="dark" — Toegevoegd aan het <nav>-element zodat Bootstrap de juiste kleurmodus toepast op de donkere header-achtergrond.
• Mobiele linkstijlen — De border-bottom die op desktop als actieve indicator dient, is op mobiel vervangen door een accentkleur. Links hebben meer padding voor betere touch-targets.

Technische details

De wijzigingen zijn minimaal:

• templates/partials/main_header.html.twig — data-bs-theme="dark" attribuut toegevoegd aan het nav-element.
• assets/styles/app.css — Binnen de @media (max-width: 991.98px) media-query zijn stijlen toegevoegd voor .site-nav-link en .site-nav-link.is-active die border-bottom verwijderen en de padding vergroten.

De bestaande Bootstrap 5.3-structuur (navbar-expand-lg, navbar-toggler, collapse navbar-collapse) was al aanwezig in de markup en zorgt voor het inklapgedrag.