hugo-coder/layouts/partials/header.html

<nav class="navigation">
  <section class="container">
    <a class="navigation-title" href="{{ .Site.BaseURL | relLangURL }}">
      {{ .Site.Title }}
    </a>
    {{ if or .Site.Menus.main .Site.IsMultiLingual }}
      <span id="dark-mode-toggle" class="float-right">
        <i class="fa fa-adjust fa-fw" aria-hidden="true"></i>
      </span>
      <input type="checkbox" id="menu-toggle" />
      <label class="menu-button float-right" for="menu-toggle">
        <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
      </label>
      <ul class="navigation-list">
        {{ with .Site.Menus.main}}
          {{ range sort . }}
            <li class="navigation-item">
              <a class="navigation-link" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
            </li>
          {{ end }}
        {{ end }}
        {{ if .Site.IsMultiLingual }}
          {{ $node := . }}
          {{ .Scratch.Set "separator" true }}
          {{ range (default .Site.Home.AllTranslations .Translations) }}
            {{ if ne $.Site.Language .Language }}
              {{ if $node.Scratch.Get "separator" }}
                <li class="navigation-item menu-separator">
                  <span>|</span>
                </li>
                {{ $node.Scratch.Set "separator" false }}
              {{ end }}
              <li class="navigation-item">
                <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
              </li>
            {{ end }}
          {{ end }}
        {{ end }}
        <li class="navigation-item separator">
          <span>|</span>
        </li>
      </ul>
    {{ end }}
  </section>
</nav>