diff --git a/components/nav-menu.js b/components/nav-menu.js deleted file mode 100644 index 3562d41..0000000 --- a/components/nav-menu.js +++ /dev/null @@ -1,89 +0,0 @@ -export class NavMenu extends HTMLElement { - constructor() { - super() - this.attachShadow({mode: 'open'}) - this.language = navigator.language - this.pages = [] - } - - 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 (e.target.classList.contains('page')) { - this.dispatchEvent(new CustomEvent( - 'close-menu', {bubbles: true} - )) - } - }) - } - - 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) - } -} \ No newline at end of file