Actualizar 'components/nav-menu.js'

components/nav-menu.js

@@ -3,6 +3,7 @@ export class NavMenu extends HTMLElement {
     super()
     this.attachShadow({mode: 'open'})
     this.language = navigator.language
+    this.pages = []
   }
 
   connectedCallback() {
@@ -10,16 +11,19 @@ export class NavMenu extends HTMLElement {
     style.textContent = `
       :host {
         display: flex;
-        direction: column;
+        flex-direction: column;
+        color: #000;
       }
       h1 {
         width: 100%;
         text-align: center;
-        color: #000;
         font-size: 18px;
         margin: 0;
         padding: 5px;
       }
+      a {
+        display: block;
+      }
     `
     this.shadowRoot.append(style)
     this.header = document.createElement('h1')
@@ -27,6 +31,7 @@ export class NavMenu extends HTMLElement {
     this.shadowRoot.append(this.header)
     this.pageList = document.createElement('div')
     this.shadowRoot.append(this.pageList)
+    this.renderPageList()
   }
 
   get language() {
@@ -44,4 +49,26 @@ export class NavMenu extends HTMLElement {
   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}`
+      el.innerText = page
+      el.classList.add('page')
+      return el
+    })
+    this.pageList.replaceChildren(...els)
+  }
 }