Añadir 'components/nav-menu.js'

components/nav-menu.js

@@ -0,0 +1,47 @@
+export class NavMenu extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.language = navigator.language
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        display: flex;
+        direction: column;
+      }
+      h1 {
+        width: 100%;
+        text-align: center;
+        color: #000;
+        font-size: 18px;
+        margin: 0;
+        padding: 5px;
+      }
+    `
+    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.shadowRoot.append(this.pageList)
+  }
+
+  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'
+  }
+}