improved the webcomponent

Author: Fred Heusschen

bin/demo.css

@@ -24,6 +24,14 @@ h1 {
 	letter-spacing: -6px;
 }
 
+pre {
+	font-size: 16px;
+	line-height: 24px;
+	width: 100%;
+	overflow: auto;
+	margin: 75px 0;
+}
+
 button.reset {
 	appearance: none;
 	padding: 0;
@@ -98,7 +106,7 @@ a:hover {
 .xmpl > button,
 .xmpl > m-burger {
 	--mb-cross-timeout: 0s;
-	
+
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -131,6 +139,7 @@ button.custom-button-2 {
 	--mb-bar-height: 2px;
 	--mb-bar-spacing: 12px;
 
+	border-radius: 40px;
 	background-color: rgba( 255, 255, 255, 0.7 );
 	color: #3ea7e1;
-}
+}

bin/mburger.js

@@ -0,0 +1,55 @@
+/*
+ * mburger webcomponent CSS v1.3.0
+ * mmenujs.com/mburger
+ *
+ * Copyright (c) Fred Heusschen
+ * www.frebsite.nl
+ *
+ * License: CC-BY-4.0
+ * http://creativecommons.org/licenses/by/4.0/
+ */
+export const mBurger = document.createElement('template');
+mBurger.innerHTML = `
+	<style>[__STYLES__]</style>
+	<b></b>
+	<b></b>
+	<b></b>
+	<span><slot></slot></span>`;
+customElements.define('m-burger', class extends HTMLElement {
+    constructor() {
+        super();
+        var content = mBurger.content.cloneNode(true);
+        //	Attach shadow DOM
+        this.attachShadow({ mode: 'open' }).appendChild(content);
+        this.menu = null;
+    }
+    static get observedAttributes() {
+        return ['menu'];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name == 'menu') {
+            this.menu = newValue ? document.getElementById(newValue) : null;
+            if (this.menu) {
+                let API = this.menu['mmenu'];
+                if (API) {
+                    API.bind('open:after', () => {
+                        this.setAttribute('state', 'cross');
+                    });
+                    API.bind('close:after', () => {
+                        this.removeAttribute('state');
+                    });
+                }
+            }
+        }
+    }
+    connectedCallback() {
+        this.addEventListener('click', evnt => {
+            if (this.menu && this.menu.classList.contains('mm-menu')) {
+                let API = this.menu['mmenu'];
+                if (API && API.open) {
+                    API.open();
+                }
+            }
+        });
+    }
+});