Sha256: f1d477ad43db4b7311d1c4997ff68010e097e77ddd8b189d6716aad5d4b84757
Contents?: true
Size: 1.43 KB
Versions: 2
Compression:
Stored size: 1.43 KB
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 |