ananke/layouts/partials/site-navigation.html

<nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-white no-underline white-90 dib">
      {{ with .Site.Params.site_logo }}
        <img src="{{ relURL . }}" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
      {{ else }}
        {{ .Site.Title }}
      {{ end }}
    </a>
    <div class="flex-l items-center">
      {{ partial "i18nlist.html" . }}
      {{ if .Site.Menus.main }}
        <nav>
          <div class="menu-btn">
            <div class="dib">☰ Menu</div>
          </div>
          <div class="nav-links">
            {{ range .Site.Menus.main }}
            <a class="link hover-white white-90 no-underline f5 f4-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }} " href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
              {{ .Name }}
            </a>
            {{ end }}
          </div>
        </nav>

        <script>
          var navLinks = document.querySelector('.nav-links');
          document.querySelector('.menu-btn').addEventListener('click', function() {
            if (navLinks.style.display === 'none') {
              navLinks.style.display = 'flex';
            } else {
              navLinks.style.display = 'none';
            }
          });
       
          // Adjust menu when window is resized
          window.addEventListener('resize', function() {
            if (window.innerWidth > 600) {
              navLinks.style.display = 'flex';
            } else {
              navLinks.style.display = 'none';
            }
          });
        </script>

      {{ end }}
      {{ partialCached "social-follow.html" . }}
    </div>
  </div>
</nav>