diff --git a/components/nav-menu.js b/components/nav-menu.js new file mode 100644 index 0000000..80db0e4 --- /dev/null +++ b/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' + } +} \ No newline at end of file