arts-ticule/templates/base/header.html.twig

<header class="bg-amber-100 relative z-50">
  <nav
    aria-label="Global"
    class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
  >
    <a href="{{ path('home') }}" class="-m-1.5 p-1.5">
      <span class="sr-only">Arts-ticule</span>
      <img src="images/logo.png" alt="" class="h-8 w-auto" />
    </a>
    <div class="flex lg:hidden">
      <button
        type="button"
        command="show-modal"
        commandfor="mobile-menu"
        class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
      >
        <span class="sr-only">Ouvrir menu</span>
        <svg
          viewbox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          data-slot="icon"
          aria-hidden="true"
          class="size-6"
        >
          <path
            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>
    <div class="hidden lg:flex lg:gap-x-12 items-center">
      <a
        href="{{ path('home') }}"
        class="text-sm/6 font-semibold text-gray-900"
      >
        Accueil
      </a>
      <a
        href="{{ path('show') }}"
        class="text-sm/6 font-semibold text-gray-900"
      >
        Spectacles jeune public
      </a>
      <a
        href="{{ path('project') }}"
        class="text-sm/6 font-semibold text-gray-900"
      >
        Projets artistiques
      </a>
      <a
        href="{{ path('manualproject') }}"
        class="text-sm/6 font-semibold text-gray-900"
      >
        Projets manuels et créatifs
      </a>
      <a
        href="{{ path('about') }}"
        class="text-sm/6 font-semibold text-gray-900"
      >
        Me connaître
      </a>
      <a
        href="{{ path('contact') }}"
        class="text-sm/6 font-semibold text-gray-900"
      >
        Me contacter
      </a>
    </div>
  </nav>
  <el-dialog>
    <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
      <div tabindex="0" class="fixed inset-0 focus:outline-none">
        <el-dialog-panel
          class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
        >
          <div class="flex items-center justify-between">
            <a href="{{ path('home') }}" class="-m-1.5 p-1.5">
              <span class="sr-only">Arts-ticule</span>
              <img src="/images/logo.png" alt="" class="h-8 w-auto" />
            </a>
            <button
              type="button"
              command="close"
              commandfor="mobile-menu"
              class="-m-2.5 rounded-md p-2.5 text-gray-700"
            >
              <span class="sr-only">Fermer menu</span>
              <svg
                viewbox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.5"
                data-slot="icon"
                aria-hidden="true"
                class="size-6"
              >
                <path
                  d="M6 18 18 6M6 6l12 12"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>
          <div class="mt-6 flow-root">
            <div class="-my-6 divide-y divide-gray-500/10">
              <div class="space-y-2 py-6">
                <a
                  href="{{ path('home') }}"
                  class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                >
                  Accueil
                </a>
                <a
                  href="{{ path('show') }}"
                  class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                >
                  Spectacles jeune public
                </a>
                <a
                  href="{{ path('project') }}"
                  class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                >
                  Projets artistiques
                </a>
                <a
                  href="{{ path('manualproject') }}"
                  class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                >
                  Projets manuels et créatifs
                </a>
                <a
                  href="{{ path('about') }}"
                  class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
                >
                  Me connaître
                </a>
                <a
                  href="{{ path('contact') }}"
                  class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50 bg-amber-300"
                >
                  Me contacter
                </a>
              </div>
            </div>
          </div>
        </el-dialog-panel>
      </div>
    </dialog>
  </el-dialog>
</header>