diff --git a/src/css/nav.css b/src/css/nav.css index aee84fa..2ac55b5 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -110,15 +110,16 @@ .nav-menu-toggle { background: transparent url(../img/octicons-24.svg#view-unfold) no-repeat center / 100% 100%; border: none; - outline: none; - width: 0.9rem; - height: 0.9rem; + float: right; + height: 1em; + margin-right: -0.5rem; opacity: 0.5; + outline: none; + padding: 0; position: sticky; - top: 0.8075rem; - margin-right: -0.5rem; - float: right; visibility: hidden; + width: 1em; + top: 0.8rem; } .nav-menu-toggle.is-active { diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 4822b37..b385ff7 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -10,6 +10,7 @@ navContainer.addEventListener('click', trapEvent) var nav = navContainer.querySelector('.nav') + var navMenuToggle = navContainer.querySelector('.nav-menu-toggle') var menuPanel = nav.querySelector('[data-panel=menu]') var navBounds = { encroachingElement: document.querySelector('footer.footer') } var currentPageItem @@ -38,18 +39,20 @@ fitNavInit({}) - menuPanel.querySelector('.nav-menu-toggle').addEventListener('click', function () { - var collapse = !this.classList.toggle('is-active') - find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) { - collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active') + if (navMenuToggle) { + navMenuToggle.addEventListener('click', function () { + var collapse = !this.classList.toggle('is-active') + find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) { + collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active') + }) + if (currentPageItem) { + if (collapse) activateCurrentPath(currentPageItem) + scrollItemToMidpoint(menuPanel, currentPageItem) + } else { + menuPanel.scrollTop = 0 + } }) - if (currentPageItem) { - if (collapse) activateCurrentPath(currentPageItem) - scrollItemToMidpoint(menuPanel, currentPageItem) - } else { - menuPanel.scrollTop = 0 - } - }) + } find(menuPanel, '.nav-item-toggle').forEach(function (btn) { btn.addEventListener('click', toggleActive.bind(btn.parentElement)) diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs index f5e65c1..fd61016 100644 --- a/src/partials/nav-menu.hbs +++ b/src/partials/nav-menu.hbs @@ -1,7 +1,7 @@ {{#with page.navigation}}