From 894088dece1233030ec8ea4d0fc6b66060aaa787 Mon Sep 17 00:00:00 2001
From: Dan Allen <dan@opendevise.com>
Date: Sat, 18 Nov 2017 17:09:47 -0700
Subject: [PATCH] add JavaScript for mobile navbar

---
 src/css/header.css         |  6 +-----
 src/js/04-mobile-navbar.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 src/js/04-mobile-navbar.js

diff --git a/src/css/header.css b/src/css/header.css
index 65ce47c..d356e7b 100644
--- 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
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')
+    })
+  })
+})
-- 
2.11.0