Handle links in sandbox

nav-menu.js

@@ -0,0 +1,96 @@
+export class NavMenu extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.language = navigator.language
+    this.pages = []
+    this.handleLinks = false
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        display: flex;
+        flex-direction: column;
+        color: #000;
+        max-height: 100dvh;
+      }
+      h1 {
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+        margin: 0;
+        padding: 5px;
+      }
+      .page-list {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding-bottom: 50px;
+      }
+      a {
+        display: block;
+        margin: 8px 10px;
+      }
+    `
+    this.shadowRoot.append(style)
+    this.header = document.createElement('h1')
+    this.header.innerText = this.pagesText
+    this.shadowRoot.append(this.header)
+    this.pageList = document.createElement('div')
+    this.pageList.classList.add('page-list')
+    this.shadowRoot.append(this.pageList)
+    this.renderPageList()
+    this.shadowRoot.addEventListener('click', e => {
+      if (this.handleLinks) {
+        e.preventDefault()
+      }
+      if (e.target.classList.contains('page')) {
+        this.dispatchEvent(new CustomEvent(
+          'close-menu', {bubbles: true}
+        ))
+      }
+      if (this.handleLinks) {
+        location.hash = `#${e.target.innerText}`
+      }
+    })
+  }
+
+  get language() {
+    return this._language
+  }
+
+  set language(language) {
+    this._language = language
+  }
+
+  get langEs() {
+    return /^es\b/.test(this.language)
+  }
+
+  get pagesText() {
+    return this.langEs ? 'Páginas' : 'Pages'
+  }
+
+  set pages(pages) {
+    this._pages = pages
+    if (this.pageList) {
+      this.renderPageList()
+    }
+  }
+
+  get pages() {
+    return this._pages
+  }
+
+  renderPageList() {
+    const els = this.pages.map(page => {
+      const el = document.createElement('a')
+      el.href = `#${page.replace(/^#/, '%23')}`
+      el.innerText = page
+      el.classList.add('page')
+      return el
+    })
+    this.pageList.replaceChildren(...els)
+  }
+}