import supportDom from '../decorators/supportDom'
@supportDom export default class Navbar {
constructor(dom) { this.dom = dom this.isMenuVisible = false this.init() } init() { const { dom } = this this.btn = dom.querySelector('[data-toggle]') this.menu = dom.querySelector('[data-menu]') this.addEvents() } hideMenu() { this.btn.classList.remove('js-active') this.menu.classList.remove('js-collapse') this.dom.classList.remove('js-collapse') this.isMenuVisible = false } showMenu() { this.btn.classList.add('js-active') this.menu.classList.add('js-collapse') this.dom.classList.add('js-collapse') this.isMenuVisible = true } toggleMenu() { return this.isMenuVisible ? this.hideMenu() : this.showMenu() } addEvents() { this.addEvent(this.btn, 'click', () => this.toggleMenu()) this.addEvent(document, 'click', ({ target }) => { const { dom } = this if ((dom === target) || dom.contains(event.target)) { return } this.hideMenu() }) }
}