From c8e6d05dc0b359e52fdbcee8fa3e587eb7749fb5 Mon Sep 17 00:00:00 2001 From: bat Date: Thu, 16 Mar 2023 06:57:43 +0000 Subject: [PATCH] Actualizar 'components/nav-menu.js' --- components/nav-menu.js | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/components/nav-menu.js b/components/nav-menu.js index 80db0e4..e5fead0 100644 --- a/components/nav-menu.js +++ b/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) + } } \ No newline at end of file