yoga/docs/_includes/nav/header_nav.html

<div id="header_nav">
  <div class="navSlideout">
    <i class="menuExpand" id="header_nav_expander"><span></span><span></span><span></span></i>
  </div>
  <nav class="slidingNav">
    <ul>
      {% for item in site.data.nav %}
      <li class="navItem">
        {% if item.category == "external" %}
          <a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
        {% else %}
          <a href="{{ item.href | relative_url }}">{{ item.title }}</a>
        {% endif %}
      </li>
      {% endfor %}
      {% if site.searchconfig %}
      {% include nav_search.html inputselector="search_input_react" %}
      {% endif %}
    </ul>
  </nav>
</div>
<script>
  var event = document.createEvent('Event');
  event.initEvent('slide', true, true);
  document.addEventListener('slide', function (e) {
    document.body.classList.toggle('sliderActive');
  }, false);
  var headerNav = document.getElementById('header_nav');
  var headerNavExpander = document.getElementById('header_nav_expander');
  headerNavExpander.addEventListener('click', function(e) {
    headerNav.classList.toggle('navSlideoutActive');
    document.dispatchEvent(event);
  }, false);
</script>