<nav class="mi-nav" id="nav">
  <button
    type="button"
    class="mi-nav--toggle"
    onclick="document.getElementById('nav').classList.toggle('mi-nav_open')"
  >_menu</button>

  <ul class="mi-nav--list">
    {% for item in navigationItems %}
      {% if item.divider %}
        <li class="mi-nav--divider" aria-hidden="true"></li>
      {% else %}
        <li class="mi-nav--item">
          <a
            class="mi-nav--link"
            href="{% if language.urlPrefix %}/{{ language.urlPrefix }}{% endif %}{{ item.link }}"
          >{{ item.text[language.slug] }}</a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>

  <ul class="mi-nav--top">
    {% for item in socialLinks %}
      <li class="mi-nav--top-item">
        <a
          class="mi-nav--top-item-link mi-nav--top-item-link_icon-only"
          href="{{ item.link }}"
        >
          <img
            src="{{ item.icon }}"
            alt="{{ item.text }}"
            class="mi-nav--top-item-icon"
            inline
          />
        </a>
      </li>
    {% endfor %}
    <li class="mi-nav--top-item">
      <a
        href="{% if otherLang.urlPrefix %}/{{ otherLang.urlPrefix }}{% endif %}{{ baseURL }}"
        class="mi-nav--top-item-link"
      >{{ otherLang.slug }}</a>
    </li>
  </ul>
</nav>
