import {ExComponent} from '../ExComponent.js'
import {Attribute, Component, Element, Renders} from '../decorators.js'
export interface NavBarItem {
title: string,
name: string,
href?: string,
right?: boolean,
}
@Component('ex-nav')
export class NavBarComponent extends ExComponent {
protected static html = `
`
@Renders()
public items: NavBarItem[] = []
@Attribute()
public appName = ''
@Element('span.appName')
protected appNameEl!: HTMLSpanElement
@Element('ul')
protected list!: HTMLUListElement
render() {
super.render()
this.appNameEl.hidden = !this.appName
this.appNameEl.innerText = this.appName || ''
this.list.childNodes.forEach(x => x.remove())
for ( const item of this.items ) {
const li = document.createElement('li')
const a = document.createElement('a')
li.appendChild(a)
a.setAttribute('href', item.href ?? '#')
a.innerText = item.title
a.addEventListener('click', () => this.dispatchItemClick(item.name))
if ( item.right ) {
li.classList.add('right')
}
this.list.append(li)
}
}
dispatchItemClick(name: string) {
return this.dispatchCustom('onItemClick', { name })
}
}