haiku-atelier-2024/web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig

<header id="en-tete">
  {# Bouton (dés)activant le menu mobile #}
  <section class="logo">
    <button
      id="bouton-menu-mobile"
      type="button"
    >
      <figure>
        <picture>
          <img
            alt="Haiku Atelier's Logo"
            decoding="async"
            height="25.6"
            loading="eager"
            src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
            width="80"
          />
        </picture>
      </figure>
    </button>
  </section>

  {# TODO: Utiliser un Menu WordPress #}
  {# TODO: Utiliser des <span> À L'INTÉRIEUR de <li> #}
  <nav
    class="menu-navigation"
    id="menu-navigation-en-tete"
  >
    <ul>
      <li
        class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
      >
        <span>
          <a
            class="lien-menu"
            href="{{ pages.home.lien }}"
          >
            {{ pages.home.nom }}
          </a>
        </span>
      </li>
      <li
        class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
      >
        <span>
          <a
            class="lien-menu"
            href="{{ pages.about.lien }}"
          >
            {{ pages.about.nom }}
          </a>
        </span>
      </li>

      <li
        class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
      >
        <span>
          <a
            class="lien-menu"
            href="{{ pages.shop.lien }}"
          >
            {{ pages.shop.nom }}
          </a>
        </span>
      </li>
      <li
        class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
      >
        <span>
          <a
            class="lien-menu"
            href="{{ pages.contact.lien }}"
          >
            {{ pages.contact.nom }}
          </a>
        </span>
      </li>
    </ul>
  </nav>

  {# Bouton « Panier » avec l'indicateur de quantité de Produits #}
  <section
    class="compte-panier"
    hidden
  >
    <a
      class="lien-bouton"
      data-contient-articles="{{ articles_presents }}"
      href="{{ pages.cart.lien }}"
      rel="cart"
    >
      cart ({{ quantite_articles }})
    </a>
  </section>

  {# Menu mobile #}
  <div
    aria-hidden="true"
    aria-labelledby="menu-mobile"
    class="menu-modale"
    id="menu-mobile"
  >
    <div
      class="menu-modale__fond"
      data-a11y-dialog-hide
    ></div>

    <div class="menu-modale__conteneur">
      <nav
        class="menu-navigation"
        id="menu-navigation-mobile"
      >
        <ul>
          <li
            class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
          >
            <span>
              <a
                class="lien-menu"
                href="{{ pages.home.lien }}"
              >
                {{ pages.home.nom }}
              </a>
            </span>
          </li>

          <li
            class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
          >
            <span>
              <a
                class="lien-menu"
                href="{{ pages.about.lien }}"
              >
                {{ pages.about.nom }}
              </a>
            </span>
          </li>

          <li
            class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
          >
            <span>
              <a
                class="lien-menu"
                href="{{ pages.shop.lien }}"
              >
                {{ pages.shop.nom }}
              </a>
            </span>
          </li>

          <li
            class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
          >
            <span>
              <a
                class="lien-menu"
                href="{{ pages.contact.lien }}"
              >
                {{ pages.contact.nom }}
              </a>
            </span>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>