mobile-menu.js

export default class MobileMenu {
  constructor(el) {
    this.el = el

    this.setVariables()
    this.setUpListeners()
  }

  setVariables() {
    this.toggle = this.el.querySelector('[data-mobile-menu="toggle"]')
    this.overlay = this.el.querySelector('[data-mobile-menu="overlay"]')
    this.toggled = false

    // named event handler for adding/removing
    this.onMenuDismiss = this.menuDismiss.bind(this)
  }

  setUpListeners() {
    this.toggle.addEventListener('click', this.toggleMenu.bind(this))
  }

  menuDismiss(e) {
    if (this.toggled === true && !this.overlay.contains(e.target)) {
      this.closeMenu()
    }
  }

  toggleMenu() {
    this[(this.toggled === true) ? 'closeMenu' : 'openMenu']()
  }

  openMenu() {
    this.overlay.setAttribute('aria-expanded', 'true')
    this.toggle.classList.add('-active')
    this.overlay.classList.add('-active')
    this.toggled = true

    // 5ms delay before binding prevents event bubbling from triggering close immediately after opening
    window.setTimeout(function() {
      document.body.addEventListener('click', this.onMenuDismiss)
    }.bind(this), 5)
  }

  closeMenu() {
    this.overlay.setAttribute('aria-expanded', 'false')
    this.toggle.classList.remove('-active')
    this.overlay.classList.remove('-active')
    this.toggled = false

    document.body.removeEventListener('click', this.onMenuDismiss)
  }
}