<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 of navigationItems }}
      {{ if item.divider }}
        <li class="mi-nav--divider" aria-hidden="true"></li>
      {{ else }}
        <li class="mi-nav--item">
          <a
            class="mi-nav--link {{ if item.slight }}mi-nav--link_slight{{ /if }}"
            href="{{ if language.urlPrefix }}/{{ language.urlPrefix }}{{ /if }}{{ item.link }}"
          >{{ item.text[language.slug] }}</a>
        </li>
      {{ /if }}
    {{ /for }}
  </ul>

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