dburger/index.js

Burger icon menu button

window.customElements.define(
	"w-burger",
	class 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" );
				},
				false
			);
		}
	}
);