Contents

{% if site.navigation_header %}
<nav class="nav  nav--header">
  <button class="button  button--nav" aria-label="Nav toggle">
    {% include icon.html id="nav" %}
  </button>
  <ul class="list  list--nav">
    {% for item in site.navigation_header %}
      <li class="item  item--nav{% if item[1] == page.url %}  item--current{% endif %}">
        <a href="{{ item[1] }}" title="Page - {{ item[0] }}">{{ item[0] }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>
{% else %}
  {% include nav-default.html %}
{% endif %}
<script type="text/javascript">
const applyToggle = (list, button, breakpoint) => {
  const navList = document.querySelector(list)
  if (document.body.clientWidth < breakpoint) {
    const navHeight = navList.clientHeight
    const navButton = document.querySelector(button)
    navList.style.maxHeight = '0px'

    navButton.onclick = () => {
      if (navList.style.maxHeight == '0px') {
        navList.style.maxHeight = `${navHeight}px`
      } else {
        navList.style.maxHeight = '0px'
      }
    }
  }
}

applyToggle('.list--nav', '.button', 640)
</script>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
alembic-jekyll-theme-2.0.3	_includes/nav-header.html