Method constructor

packages/playground/src/components/NavMenu.ts:92–136

(options: NavMenuOptions = {})

    };

    constructor(options: NavMenuOptions = {}) {
        this.root = parseHtml(html`
            <div class="at-nav-menu">
                <button type="button" class="at-nav-menu-trigger" aria-haspopup="true" aria-expanded="false" aria-label="Open playground menu"></button>
            </div>
        `);
        this.trigger = this.root.querySelector<HTMLButtonElement>('.at-nav-menu-trigger')!;
        this.trigger.appendChild(renderIcon(Icons.Menu));

        this.popover = parseHtml(html`<nav class="at-nav-menu-popover" role="menu"></nav>`);

        const items = options.items ?? DEMOS;
        const includeIndex = options.includeIndex ?? true;
        const here = window.location.pathname;

        if (includeIndex) {
            const indexLink = parseHtml(
                html`<a class="at-nav-menu-item" href="/" role="menuitem">Labs index</a>`
            );
            if (here === '/' || here === '/index.html') {
                indexLink.classList.add('active');
            }
            this.popover.appendChild(indexLink);
            this.popover.appendChild(parseHtml(html`<div class="at-nav-menu-divider"></div>`));
        }

        for (const item of items) {
            const link = parseHtml(
                html`<a class="at-nav-menu-item" href="${item.href}" role="menuitem">${item.title}</a>`
            );
            if (here === item.href || here === `${item.href}index.html`) {
                link.classList.add('active');
            }
            this.popover.appendChild(link);
        }

        this.trigger.addEventListener('click', e => {
            e.stopPropagation();
            if (this.isOpen) {
                this.close();
            } else {
                this.open();
            }
        });
    }

    private open(): void {
        if (!this.popover.parentElement) {