pages/components/header.js

export class Header extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.addButton('=', () => {
      this.menu.pages = this.getPages()
      this.menuPanel.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.menuPanel = document.createElement('div')
    this.menuPanel.classList.add('menu')
    this.menu = document.createElement('m-nav-menu')
    this.menuPanel.appendChild(this.menu)
    this.shadowRoot.appendChild(this.menuPanel)
    this.overlay.addEventListener('click', () => {
      this.close()
    })
    this.menu.addEventListener('close', () => {
      this.close()
    })
  }

  close() {
    this.overlay.classList.add('closing')
    this.overlay.classList.remove('open')
    this.menuPanel.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;
        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)
  }

  getPages() {
    return Object.keys(localStorage).slice().sort()
  }
}