<button nxPlainButton (click)="menu.toggle()" aria-label="open menu">
    <nx-icon name="bars" aria-hidden="true"></nx-icon>
</button>

<nx-menu #menu>
    <nx-tree [dataSource]="_dataSource" [treeControl]="_treeControl">
        <nx-tree-node *nxTreeNodeDef="let node; when: _isLink" nxMenuItem="l">
            <a
                nxMenuLink
                nxTreeNodeActionItem
                routerLink="./"
                [queryParams]="node.query"
            >
                {{node.label}}
            </a>
        </nx-tree-node>
        <nx-tree-node *nxTreeNodeDef="let node; when: _hasChild">
            <button
                nxMenuButton
                nxTreeNodeToggle
                nxTreeNodeActionItem
                [nxMenuItem]="node.icon ? 's' : 'l'"
                expandable
                [expanded]="_treeControl.isExpanded(node)"
                [menuButtonType]="node.level === 0 ? 'root' : 'nested'"
                type="button"
            >
                @if (node.icon) {
                <nx-icon nxMenuButtonIcon [name]="node.icon" size="s"></nx-icon>
                } {{node.label}}
            </button>
        </nx-tree-node>
    </nx-tree>

    <button nxButton (click)="menu.toggle()" class="close-menu" type="button">
        close menu
    </button>
</nx-menu>
