import supportDom from '../decorators/supportDom'
@supportDom export default class Sidebar {
constructor(dom) { this.btn = dom this.sidebar = document.querySelector(`[data-sidebar="${dom.dataset.sidebarOpener}"]`) this.isVisible = false this.init() } init() { this.addBackdrop() this.addEvents() } addBackdrop() { if (this.backdrop) { return } const backdrop = document.createElement('div') backdrop.className = 'backdrop' document.body.appendChild(backdrop) this.backdrop = backdrop } showBackdrop() { this.backdrop.classList.add('opened') } hideBackdrop() { this.backdrop.classList.remove('opened') } show() { this.showBackdrop() this.sidebar.classList.add('opened') this.isVisible = true } hide() { this.hideBackdrop() this.sidebar.classList.remove('opened') this.isVisible = false } addEvents() { this.addEvent(this.btn, 'click', () => this.show()) this.addEvent(this.backdrop, 'click', () => this.hide()) } destroy() { this.backdrop.remove() }
}