public-web/layouts/partials/menu.html

<nav
  class="bg-gray-100 dark:bg-gray-800 lg:bg-transparent dark:lg:bg-transparent fixed lg:static inset-0 z-10 overflow-y-auto transition-transform lg:container lg:mx-auto px-6 pt-12 pb-12 lg:pt-0 lg:pb-2"
  x-bind:class="menuOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'">
  <h2 class="sr-only">{{ i18n "menu_title" }}</h2>
  <button class="button block mb-6 lg:hidden absolute top-4 right-6" x-on:click="menuOpen = false">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
  </button>
  <ul class="flex gap-x-6 gap-y-4 flex-col lg:flex-row">
  {{ range site.Menus.main }}
    {{ $isActive := false }} {{/* TODO fix */}}
    <li>
      <a
        href="{{ .URL | relLangURL }}"
        class="font-bold link {{ if $isActive }}link--active{{ end }}"
        {{ if $isActive }}
        aria-current="page"
        {{ end }}
        {{ with .Params.target }}
        target="{{ . }}"
        {{ end }}
      >{{ .Name }}</a>
    </li>
  {{ end }}
  </ul>
  <span class="lg:hidden self-start -ml-2 mt-4">
    {{ partial "language-selector.html" . }}
  </span>
</nav>