refactor logic for navbar burger to align with other scripts

Author: mojavelinux

src/js/05-mobile-navbar.js

@@ -1,18 +1,20 @@
-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()
-      document.documentElement.classList.toggle('is-clipped--navbar')
-      el.classList.toggle('is-active')
-      var menu = document.getElementById(el.dataset.target)
-      if (menu.classList.toggle('is-active')) {
-        menu.style.maxHeight = ''
-        var expectedMaxHeight = window.innerHeight - Math.round(menu.getBoundingClientRect().top)
-        var actualMaxHeight = parseInt(window.getComputedStyle(menu).maxHeight)
-        if (actualMaxHeight !== expectedMaxHeight) menu.style.maxHeight = expectedMaxHeight + 'px'
-      }
-    })
-  })
-})
+;(function () {
+  'use strict'
+
+  var navbarBurger = document.querySelector('.navbar-burger')
+  if (!navbarBurger) return
+  navbarBurger.addEventListener('click', toggleNavbarMenu.bind(navbarBurger))
+
+  function toggleNavbarMenu (e) {
+    e.stopPropagation() // trap event
+    document.documentElement.classList.toggle('is-clipped--navbar')
+    this.classList.toggle('is-active')
+    var menu = document.getElementById(this.dataset.target)
+    if (menu.classList.toggle('is-active')) {
+      menu.style.maxHeight = ''
+      var expectedMaxHeight = window.innerHeight - Math.round(menu.getBoundingClientRect().top)
+      var actualMaxHeight = parseInt(window.getComputedStyle(menu).maxHeight)
+      if (actualMaxHeight !== expectedMaxHeight) menu.style.maxHeight = expectedMaxHeight + 'px'
+    }
+  }
+})()