xecut-site/src/_includes/parts/menu.njk

<header class="menu">
  <div class="topbar">
    <div class="logo">
      <a href="{{ '/' | locale_url }}">
        {{ translations[page.lang]['title'] }}
      </a>
    </div>

    <button
      class="main-menu-button"
      id="mainMenuButton"
      aria-label="{{ translations[page.lang]['menu']['title'] }}"
      title="{{ translations[page.lang]['menu']['title'] }}"
    >
      <span class="main-menu-button-part"></span>
      <span class="main-menu-button-part"></span>
      <span class="main-menu-button-part"></span>
    </button>
  </div>


  <nav class="navbar">
    <ul class="nav-links">
      <li class="{% if indexPage === true %} active {% endif %}">
        <a href="{{ '/' | locale_url }}" >
          {{ translations[page.lang]['menu']['home'] }}
        </a>
      </li>
    {% set items = config.menu %}
    {%- for item in items %}
      {% set isCurrent = page.url.startsWith('/' ~ page.lang ~ '/' ~ item) %}
      {% set label = translations[page.lang]['menu'][item] %}
      {% set href = ('/' ~ item ~ '/') | locale_url %}

      <li class="{% if isCurrent %} active {% endif %}">
        <a href="{{ href }}" >
          {{ label }}
        </a>
      </li>

    {%- endfor %}
    </ul>

    <ul class="nav-langs">
    {% set langs = config.langs %}
    {%- for lang in langs %}
      <li class="lang-separator" aria-hidden>|</li>
      <li>
        {% if monolingual %}
          {% set lang_href = '/' | locale_url(lang) %}
        {% else %}
          {% set lang_href = page.url | locale_url(lang) %}
        {% endif %}
        <a
          class="{% if lang === page.lang %} active {% endif %}"
          href="{{ lang_href }}"
        >
          {{ lang }}
        </a>
      </li>
    {%- endfor %}
    </ul>
  </nav>
</header>

<script>
  const toggleMainMenu = () =>
    document
      .querySelector('.menu .navbar')
      .classList.toggle('active')

  document
    .querySelector('#mainMenuButton')
    .addEventListener('click', toggleMainMenu)
</script>