Remove to move nav menu

file-group-page
bat 3 years ago
parent 8ea5ad385f
commit a24906953e

@ -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)
}
}
Loading…
Cancel
Save