jalil.arfaoui.net/src/components/header.astro

---
import Logo from "../components/logo.astro";
import { getLocaleFromUrl, t } from "../utils/i18n";

const currentLang = getLocaleFromUrl(Astro.url);

// Menu localisé
const menus = {
  fr: [
    { name: 'Code', url: '/code' },
    { name: 'Théâtre', url: '/theatre' },
    { name: 'Photo', url: '/photo' },
    { name: 'À propos', url: '/a-propos' }
  ],
  en: [
    { name: 'Code', url: '/en/code' },
    { name: 'Acting', url: '/en/acting' },
    { name: 'Photo', url: '/en/photo' },
    { name: 'About', url: '/en/about' }
  ],
  ar: [
    { name: 'برمجة', url: '/ar/برمجة' },
    { name: 'مسرح', url: '/ar/مسرح' },
    { name: 'صور', url: '/ar/تصوير' },
    { name: 'نبذة عني', url: '/ar/نبذة-عني' }
  ]
};

const currentMenus = menus[currentLang] || menus.fr;
---

<!-- Hidden checkbox to control mobile menu state (CSS-only) -->
<input type="checkbox" id="menuToggle" class="hidden peer" aria-hidden="true" />

<!-- This is an invisible div with relative position so that it takes up the height of the menu (because menu is absolute/fixed) -->
<div class="relative w-full h-20 opacity-0 pointer-events-none"></div>
<header id="header" class="absolute top-0 z-50 w-full h-20">
  <div
    class="flex items-center justify-between h-full max-w-5xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
  >
    <Logo />
    <nav
      class="relative z-30 flex flex-row-reverse justify-start w-full text-sm sm:justify-end text-neutral-500 dark:text-neutral-400 sm:flex-row"
    >
      <!-- Hamburger button (open) -->
      <label
        for="menuToggle"
        aria-label={t('ui', 'openMenu', currentLang)}
        class="flex flex-col items-end justify-center w-6 h-6 ml-4 cursor-pointer sm:hidden"
      >
        <svg
          class="w-8 h-8 dark:text-neutral-200"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke="currentColor"><path d="M4 8h16M4 16h16"></path></svg
        >
      </label>
      <!-- Desktop menu -->
      <div id="menu" class="hidden sm:flex sm:flex-row sm:h-auto sm:w-auto sm:text-sm">
        {
          currentMenus.map((menu) => (
            <a
              href={menu.url}
              class="relative flex items-center justify-center px-3 font-medium tracking-wide text-center duration-200 ease-out hover:text-neutral-900 dark:hover:text-white"
            >
              {menu.name}
            </a>
          ))
        }
      </div>
    </nav>
  </div>
</header>

<!-- Mobile fullscreen menu (sibling of checkbox, outside header) -->
<div
  id="mobileMenu"
  class="mobile-menu fixed top-0 left-0 z-[100] flex-col items-center justify-center bg-white dark:bg-neutral-950"
>
  <!-- Close button -->
  <label
    for="menuToggle"
    aria-label={t('ui', 'closeMenu', currentLang)}
    class="absolute top-6 right-6 w-8 h-8 cursor-pointer"
  >
    <svg
      class="w-8 h-8 text-neutral-600 dark:text-neutral-200"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"></path></svg
    >
  </label>
  {
    currentMenus.map((menu) => (
      <a
        href={menu.url}
        class="flex items-center justify-center px-3 py-4 text-2xl font-medium tracking-wide text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white duration-200 ease-out"
      >
        {menu.name}
      </a>
    ))
  }
</div>

<style>
  /* Mobile menu: hidden by default, shown when checkbox is checked */
  .mobile-menu {
    display: none;
    overflow: hidden;
    width: 100dvw;
    height: 100dvh;
  }

  #menuToggle:checked ~ .mobile-menu {
    display: flex;
  }

  /* Hide menu on desktop regardless of checkbox state */
  @media (min-width: 640px) {
    .mobile-menu {
      display: none !important;
    }
  }
</style>
<style is:global>
  /* Block page scroll when mobile menu is open */
  html:has(#menuToggle:checked) body {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }
</style>