Contents

{% if site.navigation_header %}
<nav class="nav  nav--header">
  <ul class="list  list--nav">
    {% for item in site.navigation_header %}

      {% if item[1] contains '://' %}
      {% assign url = item[1] %}
      {% else %}
      {% assign url = item[1] | relative_url %}
      {% endif %}

      <li class="item  item--nav{% if item[1] == page.url %}  item--current{% endif %}">
        <a href="{{ url }}">{{ item[0] }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>
{% else %}
  {% include nav-default.html %}
{% endif %}

<template id="buttontoggle">
  <button class="button  button--nav" aria-label="Menu toggle">
    {% include icon.html id="nav" title="Menu" %}
  </button>
</template>

<script type="text/javascript">

const nav = document.querySelector('.nav')
const buttonTemplate = document.querySelector('#buttontoggle')
const button = document.importNode(buttonTemplate.content, true)
nav.appendChild(button)

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

2 entries across 2 versions & 1 rubygems

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