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 }) } }