<div [perfectScrollbar] fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start">
  <div fxLayout="column" fxFlex="90" fxLayoutAlign="start stretch" class="w-100">
    <mat-select *ngIf="appConfig.nodes.length > 1" [value]="selConfigNodeIndex" (selectionChange)="onNodeSelectionChange($event.value)" class="m-2 multi-node-select">
      <mat-option *ngFor="let node of appConfig.nodes" [value]="node.index" tabindex="1">
        {{node.lnNode}} ({{node.lnImplementation}})
      </mat-option>
    </mat-select>
    <mat-divider class="w-100"></mat-divider>
    <mat-tree #tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings?.lnServerUrl">
      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
        <div (click)="onChildNavClicked(node)">
          <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
            <span *ngIf="node.iconType === 'SVG'" class="fa-icon-small mr-2"><ng-container [ngTemplateOutlet]="node.icon === 'boltzIconBlock' ? boltzIconBlock : null"></ng-container></span>
            <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-2"></fa-icon>
            <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
            <span>{{node.name}}</span>
          </div>
        </div>
      </mat-tree-node>
      <mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
        <div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
          <div fxFlex="89" fxLayoutAlign="start center">
            <span *ngIf="node.iconType === 'SVG'" class="mr-2"><ng-container [ngTemplateOutlet]="node.icon"></ng-container></span>
            <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-2"></fa-icon>
            <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
            <span>{{node.name}}</span>
          </div>
          <button fxFlex="11" mat-icon-button [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center">
            <mat-icon class="mat-icon-rtl-mirror">{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
          </button>
        </div>
        <div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
          <ng-container matTreeNodeOutlet></ng-container>
        </div>
      </mat-nested-tree-node>
    </mat-tree>
    <mat-divider class="w-100"></mat-divider>
    <mat-tree [dataSource]="navMenusShowData" [treeControl]="treeControlShowData">
      <mat-tree-node *matTreeNodeDef="let node" (click)="onShowData(node)">
        <span *ngIf="node.iconType === 'SVG'" class="fa-icon-small mr-2"><ng-container [ngTemplateOutlet]="node.icon"></ng-container></span>
        <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-2" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
        <mat-icon *ngIf="!node.iconType" class="mat-icon-36" matTooltip="{{node.name}}" matTooltipPosition="right">{{node.icon}}</mat-icon>
        <span>{{node.name}}</span>
      </mat-tree-node>
    </mat-tree>
  </div>
  <div fxLayout="column" fxLayoutAlign="end stretch" class="w-100">
    <mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="showLogout">
      <mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
        <span *ngIf="node.iconType === 'SVG'" class="mr-2"><ng-container [ngTemplateOutlet]="node.icon"></ng-container></span>
        <fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-2" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
        <span>{{node.name}}</span>
      </mat-tree-node>
    </mat-tree>
  </div>
</div>
<ng-template #boltzIconBlock>
  <svg viewBox="0 0 78 78" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Group">
        <circle id="Oval" class="boltz-icon" cx="39" cy="39" r="37.5"></circle>
        <path d="M36.4583326,43.7755404 L40.53965,35.2316544 L39.4324865,35.2316544 L46.0754873,17.6071752 C46.292579,17.0204094 46.3287609,16.5159331 46.1840331,16.0937464 C46.0393053,15.671561 45.7860319,15.3674444 45.4242131,15.1813966 C45.0623942,14.9953487 44.6535376,14.9524146 44.1976433,15.0525945 C43.7417511,15.1527743 43.3256596,15.4461573 42.9493689,15.9327433 L22.6078557,40.7701025 C22.2026186,41.2710003 22,41.7575877 22,42.2298646 C22,42.6735173 22.1592003,43.0420366 22.477601,43.3354226 C22.7960017,43.6288058 23.1940025,43.7755404 23.6716036,43.7755404 L36.4583326,43.7755404 Z" id="Path" class="boltz-icon-fill"></path>
        <path d="M44.4883879,63.7755404 L48.8604707,55.165009 L47.6744296,55.165009 L54.7906978,37.4030526 C55.0232558,36.8117097 55.0620155,36.3032983 54.9069768,35.8778185 C54.7519381,35.4523399 54.4806208,35.1458511 54.0930248,34.958352 C53.7054289,34.7708528 53.2674441,34.7275839 52.7790706,34.8285452 C52.2906992,34.9295065 51.8449641,35.2251779 51.4418653,35.7155595 L29.6511611,60.746659 C29.2170537,61.251464 29,61.7418469 29,62.2178078 C29,62.6649211 29.1705423,63.036315 29.5116268,63.3319895 C29.8527113,63.6276613 30.2790669,63.7755404 30.7906936,63.7755404 L44.4883879,63.7755404 Z" id="Path-Copy" class="boltz-icon-fill" transform="translate(42.000000, 49.275540) rotate(-180.000000) translate(-42.000000, -49.275540) "></path>
      </g>
    </g>
  </svg>
</ng-template>