Añadir 'components/components/header.js'

components/components/header.js

@@ -0,0 +1,100 @@
+export class Header extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.addButton('=', () => {
+      this.menu.classList.add('open')
+      this.overlay.classList.add('open')
+    })
+    this.addDivider()
+    this.addButton('-')
+    this.addMenu()
+  }
+
+  addButton(text, onClick) {
+    const b = document.createElement('button')
+    b.innerText = text
+    this.shadowRoot.appendChild(b)
+    if (onClick) {
+      b.addEventListener('click', onClick)
+    }
+  }
+
+  addDivider() {
+    const d = document.createElement('div')
+    d.classList.add('divider')
+    this.shadowRoot.appendChild(d)
+  }
+
+  addMenu() {
+    this.overlay = document.createElement('div')
+    this.overlay.classList.add('overlay')
+    this.shadowRoot.appendChild(this.overlay)
+    this.menu = document.createElement('div')
+    this.menu.classList.add('menu')
+    const menuContent = document.createElement('m-nav-menu')
+    this.menu.appendChild(menuContent)
+    this.shadowRoot.appendChild(this.menu)
+    this.overlay.addEventListener('click', () => {
+      this.overlay.classList.add('closing')
+      this.overlay.classList.remove('open')
+      this.menu.classList.remove('open')
+      setTimeout(() => {
+        this.overlay.classList.remove('closing')
+      }, 250)
+    })
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        width: 100%;
+        background: #111;
+        color: #ddd;
+        display: flex;
+        direction: row;
+      }
+      button {
+        border: none;
+        background: inherit;
+        color: inherit;
+        font-size: 24px;
+        width: 24px;
+      }
+      div.divider {
+        flex-grow: 1;
+      }
+      div.menu {
+        position: fixed;
+        top: 0;
+        left: -90vw;
+        height: 100vh;
+        width: 90vw;
+        background-color: #fff;
+        transition: left .25s ease-in-out;
+      }
+      div.menu.open {
+        left: 0;
+      }
+      div.overlay {
+        position: fixed;
+        top: 0;
+        left: -100vw;
+        height: 100vh;
+        width: 100vw;
+        opacity: 0%;
+        transition: opacity .25s ease-in;
+        background: #777;
+      }
+      div.overlay.closing {
+        left: 0;
+      }
+      div.overlay.open {
+        left: 0;
+        opacity: 15%;
+      }
+    `
+    this.shadowRoot.append(style)
+  }
+}