flixcooks-website/partials/header.php

<?php
// Determine current page for active nav state
$currentPage = basename($_SERVER['PHP_SELF'] ?? 'index.php');
$langParam   = isset($lang) && $lang === 'de' ? '?lang=de' : '';
$langParamAmp = isset($lang) && $lang === 'de' ? '&lang=de' : '';
?>

<!-- ── LiquidOverlayMenu ─────────────────────────────────────── -->

<!-- Fixed Logo (top-left) -->
<a class="nav-logo" href="/index.php<?php echo $langParam; ?>" aria-label="FlixCooks – Home">
  <img class="logo--light" src="/assets/logo-black.png" alt="FlixCooks">
  <img class="logo--dark"  src="/assets/logo-white.png" alt="FlixCooks">
</a>

<!-- Fixed Hamburger Button (top-right) -->
<button class="nav-trigger" id="navMenuBtn" type="button" aria-label="<?php echo isset($lang) && $lang === 'de' ? 'Menü öffnen' : 'Open menu'; ?>" aria-expanded="false" aria-controls="navOverlay">
  <span class="nav-burger-lines" aria-hidden="true">
    <span class="nav-line nav-line--top"></span>
    <span class="nav-line nav-line--mid"></span>
    <span class="nav-line nav-line--bot"></span>
  </span>
</button>

<!-- Full-screen Overlay -->
<div class="nav-overlay" id="navOverlay" aria-hidden="true" role="dialog" aria-label="Navigation">
  <div class="nav-overlay-inner">
    <nav>
      <ul class="nav-menu-list" role="list">
        <li>
          <a href="/index.php<?php echo $langParam; ?>" class="slide-hover-link" <?php echo $currentPage === 'index.php' ? 'aria-current="page"' : ''; ?>>
            <span class="slide-hover-wrapper">
              <span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Startseite' : 'Home'; ?></span>
              <span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Startseite' : 'Home'; ?></span>
            </span>
          </a>
        </li>
        <li>
          <a href="/index.php<?php echo $langParam; ?>#recipes-start" class="slide-hover-link">
            <span class="slide-hover-wrapper">
              <span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Rezepte' : 'Recipes'; ?></span>
              <span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Rezepte' : 'Recipes'; ?></span>
            </span>
          </a>
        </li>
        <li>
          <a href="/impressum.php<?php echo $langParam; ?>" class="slide-hover-link" <?php echo $currentPage === 'impressum.php' ? 'aria-current="page"' : ''; ?>>
            <span class="slide-hover-wrapper">
              <span class="slide-text-main"><?php echo isset($lang) && $lang === 'de' ? 'Impressum' : 'Imprint'; ?></span>
              <span class="slide-text-clone" aria-hidden="true"><?php echo isset($lang) && $lang === 'de' ? 'Impressum' : 'Imprint'; ?></span>
            </span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Language & Footer links inside overlay -->
    <div class="nav-overlay-footer">
      <a href="<?php echo e($langSwitchHref ?? '#'); ?>" class="underline-link">
        <?php echo isset($lang) && $lang === 'de' ? 'English' : 'Deutsch'; ?>
      </a>
      <a href="/datenschutz.php<?php echo $langParam; ?>" class="underline-link">
        <?php echo isset($lang) && $lang === 'de' ? 'Datenschutz' : 'Privacy'; ?>
      </a>
    </div>
  </div>
</div>

<script>
(function() {
  var btn     = document.getElementById('navMenuBtn');
  var overlay = document.getElementById('navOverlay');
  if (!btn || !overlay) return;

  function openMenu() {
    btn.classList.add('active');
    overlay.classList.add('open');
    overlay.setAttribute('aria-hidden', 'false');
    btn.setAttribute('aria-expanded', 'true');
    document.body.classList.add('nav-open');
  }
  function closeMenu() {
    btn.classList.remove('active');
    overlay.classList.remove('open');
    overlay.setAttribute('aria-hidden', 'true');
    btn.setAttribute('aria-expanded', 'false');
    document.body.classList.remove('nav-open');
  }

  btn.addEventListener('click', function() {
    if (btn.classList.contains('active')) {
      closeMenu();
    } else {
      openMenu();
    }
  });

  // Close on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && overlay.classList.contains('open')) {
      closeMenu();
      btn.focus();
    }
  });

  // Close on overlay link click
  overlay.querySelectorAll('a').forEach(function(link) {
    link.addEventListener('click', function() {
      closeMenu();
    });
  });
})();
</script>