improve placement and size of expand/collapse toggle button in nav; c…

…hange title to aria-label
asciidoctor · Nov 9, 2023 · 9c88d12 · 9c88d12
1 parent 6adfb9b
commit 9c88d12
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -1,7 +1,7 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active is-loading" data-panel="menu">
   <nav class="nav-menu">
-    <button class="nav-menu-toggle" title="Toggle expand/collapse all"></button>
+    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all"></button>
     {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
     {{/with}}