add JavaScript for mobile navbar

diff --git a/src/css/header.css b/src/css/header.css
index 65ce47c..d356e7b 100644 (file)
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -80,7 +80,7 @@ body {
 }
 
 .navbar-burger span {
-  background-color: currentColor;
+  background-color: var(--color-navbar-text);
   display: block;
   height: 1px;
   left: 50%;
@@ -102,10 +102,6 @@ body {
   margin-top: 4px;
 }
 
-.navbar-burger:hover {
-  background-color: var(--color-navbar-bg-focus);
-}
-
 .navbar-burger.is-active span:nth-child(1) {
   margin-left: -5px;
   transform: rotate(45deg);

diff --git a/src/js/04-mobile-navbar.js b/src/js/04-mobile-navbar.js
new file mode 100644 (file)
index 0000000..ba5cb09
--- /dev/null
+++ b/src/js/04-mobile-navbar.js
@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var navbarToggles = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
+  if (navbarToggles.length === 0) return
+  navbarToggles.forEach(function (el) {
+    el.addEventListener('click', function (e) {
+      e.stopPropagation()
+      el.classList.toggle('is-active')
+      document.getElementById(el.dataset.target).classList.toggle('is-active')
+      document.documentElement.classList.toggle('is-clipped--navbar')
+    })
+  })
+})