ui/src/nav/NavBar.component.ts

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 = `
        <style>
            nav {
                display: flex;
                flex-direction: row;
                margin-top: 50px;
                margin-bottom: 20px;
            }

            ul {
                flex: 1;
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            li {
                float: left;
            }

            li.right {
                float: right;
            }

            li:hover {
                background: #eeeeee;
            }

            li a {
                display: block;
                text-align: center;
                padding: 16px 10px;
                text-decoration: none;
                /*color: black;*/
            }

            span.appName {
                font-size: 1.2em;
                font-weight: bold;
                padding: 14px;
                padding-right: 30px;
                padding-left: 0;
            }
        </style>
        <nav>
            <span class="appName"></span>
            <ul></ul>
        </nav>
    `

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