1<div id="header_nav">
2  <div class="navSlideout">
3    <i class="menuExpand" id="header_nav_expander"><span></span><span></span><span></span></i>
4  </div>
5  <nav class="slidingNav">
6    <ul>
7      {% for item in site.data.nav %}
8      <li class="navItem">
9        <a href="{{ item.href }}"{% if item.category == "external" %} target="_blank"{% endif %}>{{ item.title }}</a>
10      </li>
11      {% endfor %}
12      {% if site.searchconfig %}
13      {% include nav_search.html inputselector="search_input_react" %}
14      {% endif %}
15    </ul>
16  </nav>
17</div>
18<script>
19  var event = document.createEvent('Event');
20  event.initEvent('slide', true, true);
21  document.addEventListener('slide', function (e) {
22    document.body.classList.toggle('sliderActive');
23  }, false);
24  var headerNav = document.getElementById('header_nav');
25  var headerNavExpander = document.getElementById('header_nav_expander');
26  headerNavExpander.addEventListener('click', function(e) {
27    headerNav.classList.toggle('navSlideoutActive');
28    document.dispatchEvent(event);
29  }, false);
30</script>