<mat-tree
  [dataSource]="dataSource"
  [treeControl]="treeControl"
  class="console-app__nav-tree"
>
  <mat-tree-node
    *matTreeNodeDef="let node"
    matTreeNodeToggle
    tabindex="0"
    (click)="onClick(node)"
    (keyup.enter)="onClick(node)"
    [class.active]="router.url.includes(node.path)"
    [elementId]="getElementId(node)"
  >
    @if (node.iconName) {
    <mat-icon class="console-app__nav-icon">
      {{ node.iconName }}
    </mat-icon>
    }
    {{ node.title }}
  </mat-tree-node>
  <mat-nested-tree-node
    *matTreeNodeDef="let node; when: hasChild"
    (click)="onClick(node)"
    tabindex="0"
    (keyup.enter)="onClick(node)"
  >
    <div class="mat-tree-node" [class.active]="router.url.includes(node.path)">
      <button
        class="console-app__nav-icon_expand"
        mat-icon-button
        matTreeNodeToggle
        [attr.aria-label]="'Toggle ' + node.title"
      >
        <mat-icon>
          {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
        </mat-icon>
      </button>
      @if (node.iconName) {
      <mat-icon class="console-app__nav-icon">
        {{ node.iconName }}
      </mat-icon>
      }
      {{ node.title }}
    </div>
    <div
      [class.console-app__nav-tree_invisible]="!treeControl.isExpanded(node)"
      role="group"
    >
      <ng-container matTreeNodeOutlet></ng-container>
    </div>
  </mat-nested-tree-node>
</mat-tree>
