dburger/module/index.js

Burger icon menu button

class WBurger extends HTMLElement
{
	constructor()	{
		super();

		let shadowRoot = this.attachShadow( {
			mode: "open",
		} );

		shadowRoot.innerHTML = `
		<style>
						*,*:after,*:before {
										box-sizing: border-box;
						}
						:host {
										display:inline-flex;
										align-items: center;
										justify-content: center;
										width: 30px;
										height: 30px;
						}
						:host * {
										pointer-events: none;
						}
						:host #_burger_ span {
										background-color: black;
						}
						:host(.white) #_burger_ span {
										background-color: white;
						}
						:host(.right) #_burger_ {
										align-items: flex-end;
						}
						:host #_burger_ {
										position:relative;
										display: flex;
										flex-direction: column;
										min-width: 100%;
										min-height: 1.5rem;
										justify-content: space-around;
										align-items: flex-start;
										cursor: pointer;
						}
						:host #_burger_ span {
								position:absolute;
								pointer-events: none;
								display: block;
								width: 25px;
								height: 1px;
								transition: all .25s ease;
						}
						:host #_burger_ span:nth-child(2) {
									width: 20px;
						}
						:host #_burger_ span:nth-child(1) {
									top: 4px;
						}
						:host #_burger_ span:nth-child(3) {
									bottom: 4px;
						}
						:host(.active) #_burger_ span:nth-child(2){
								opacity: 0;
						}
						:host(.active) #_burger_ span:nth-child(1) {
						top: 50%;
								transform-origin: center center;
								transform: rotate(45deg);
						}
						:host(.active) #_burger_ span:nth-child(3) {
						bottom: 47%;
								transform-origin: center center;
								transform: rotate(-45deg);
						}

		</style>
		<span id="_burger_">
						<span></span>
						<span></span>
						<span></span>
		</span>
		`;
		this._shadow = shadowRoot;
	}
	connectedCallback ()
	{
		this._shadow.addEventListener("click",() =>	{
			this.classList.toggle( "active" );
		});
	}
}

export default () => {
	window.customElements.define("w-burger",	WBurger);
}