@sgalinski/responsive-side-menu/src/js/header.js

A simple and extendable slide-in menu

import Settings from './settings';
import Hooks from './hooks';

/**
 * The header class represents the header section of the menu
 */
export default class Header {

	constructor() {
		this.rootElement = document.createElement('LI');
		this.rootElement.classList.add('rsm-header');
		// set header content from configuration
		this.rootElement.innerHTML = `<span class="rsm-menu-title">${Settings.get.menuTitle}</span>`;
		this.closeButton = document.createElement('BUTTON');
		this.closeButton.classList.add('rsm-close');
		this.closeButton.innerHTML = '<span class="rsm-sr">Close</span>';
		this.rootElement.appendChild(this.closeButton);
		Hooks.register('header', this._hook.bind(this));
	}

	/**
	 * Returns the header root DomElement
	 *
	 * @returns {Element|*}
	 */
	get Element () {
		return this.rootElement;
	}

	get CloseButton() {
		return this.closeButton;
	}

	_hook(_object) {
		this.rootElement.insertBefore(_object, this.rootElement.firstChild);
	}
}