header.hbs

<header>
  <div class="container">

    <a href="/{{site.locale}}/" id="logo">
      <img src="/static/images/logo.svg" alt="node.js" width="180" height="75">
    </a>

    <nav>
      <ul class="list-divider-pipe">
        <li {{#equals path ''}} class="active" {{/equals}}>
          <a href="/{{site.locale}}/">{{site.home.text}}</a>
        </li>

        {{#each nav.main}}
          <li {{#startswith ../path link}}class="active"{{/startswith}}{{#startswith link 'https://foundation.nodejs.org'}} class="nav-foundation"{{/startswith}}>
            {{#startswith link 'http'}}
              <a href="{{link}}">{{text}}</a>
            {{else}}
              <a href="/{{../site.locale}}/{{link}}/">{{text}}</a>
            {{/startswith}}
          </li>
        {{/each}}
      </ul>
    </nav>

    <svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <rect id="lang-rect" width="512" height="512" x="0" y="0" fill="none" pointer-events="fill"/>
      <path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
      <path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
    </svg>

    <div class="lang-picker hidden">
      <ul id="language-items">
        {{#each locales}}
          <li
            data-lang="{{locale}}"
            title="{{languageEnglishVersion}}"
            data-language="{{language}}">
              {{language}}
          </li>
        {{/each}}
      </ul>
    </div>

  </div>
</header>
<script>
  var langPickerElement = document.querySelector('.lang-picker')
  var langElements = langPickerElement.querySelectorAll('li')
  var langPickerTogglerElement = document.querySelector('#lang-picker-toggler')
  var languageItemsSelector = document.querySelector('#language-items')
  // Get the current URL language
  var currentLang = window.location.pathname.split('/')[1] || 'en'
  // Get the current URL language selector item as a li
  var currentLangElement = null;

  Array.prototype.forEach.call(langElements, function(el) {
    if (el.getAttribute('data-lang') !== currentLang) {
      el.addEventListener('click', function(e) {
        var newLocale = (e.target && e.target.dataset && e.target.dataset.lang) || 'en';
        window.location.replace(window.location.pathname.replace(/\/[a-zA-Z-]+/, '/' + newLocale))
      })
    } else {
      currentLangElement = el
    }
  })

  // Find the container where to mark the tooltip
  var langRect = document.querySelector('#lang-picker-toggler > #lang-rect');
  // Create dynamically label for tooltip
  var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
  var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
  titleEle.appendChild(textString);
  langRect.appendChild(titleEle);

  // Remove the current selected language item, because we don't need to choose it
  // any more unless we want to switch the new language
  languageItemsSelector.removeChild(currentLangElement)

  langPickerTogglerElement.addEventListener('click', function() {
    langPickerElement.classList.toggle('hidden')
  })
</script>