Class NavMenu

packages/playground/src/components/NavMenu.ts:72–171

}

export class NavMenu implements Mountable {
    readonly root: HTMLElement;
    private trigger: HTMLButtonElement;
    private popover: HTMLElement;
    private popper: PopperInstance | null = null;
    private isOpen = false;

    private outsideClick = (e: MouseEvent) => {
        if (!this.root.contains(e.target as Node) && !this.popover.contains(e.target as Node)) {
            this.close();
        }
    };
    private onKey = (e: KeyboardEvent) => {
        if (e.key === 'Escape' && this.isOpen) {
            e.preventDefault();
            this.close();
            this.trigger.focus();
        }
    };

    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();