turn the nav-toggle-label into a button

stephengold · Jul 14, 2020 · 5dd997f · 5dd997f
1 parent 8950d94
commit 5dd997f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
@@ -17,7 +17,8 @@
 }
 
 .nav-toggle-label {
-  padding: 0.5rem;
+  background-color: var(--toolbar-background);
+  border: none;
 }
 
 .nav-toggle {

diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -5,8 +5,10 @@
 
   var navContainer = document.querySelector('.nav-container')
   var navToggle = document.querySelector('.nav-toggle')
+  var navToggleLabel = document.querySelector('.nav-toggle-label')
 
   navToggle.addEventListener('click', showNav)
+  navToggleLabel.addEventListener('click', showNav)
   // NOTE don't let click events propagate outside of nav container
   navContainer.addEventListener('click', concealEvent)
 

diff --git a/src/partials/nav-toggle.hbs b/src/partials/nav-toggle.hbs
@@ -1,2 +1,2 @@
-<span class="nav-toggle-label">Project links</span>
+<button class="nav-toggle-label">Project links</span>
 <button class="nav-toggle"></button>