RTL/src/app/shared/components/navigation/side-navigation/side-navigation.component.html

<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start" [perfectScrollbar]>
  <div fxLayout="column" fxFlex="90" fxLayoutAlign="start stretch" class="w-100">
    <mat-select *ngIf="appConfig.nodes.length > 1" class="m-2 multi-node-select" [value]="selConfigNodeIndex" (selectionChange)="onNodeSelectionChange($event.value)">
      <perfect-scrollbar>
        <mat-option *ngFor="let node of appConfig.nodes" tabindex="1" [value]="node.index">
          {{node.lnNode}} ({{node.lnImplementation}})
        </mat-option>
      </perfect-scrollbar>
    </mat-select>
    <mat-divider class="w-100" />
    <mat-tree *ngIf="selNode.Settings?.lnServerUrl" #tree [dataSource]="navMenus" [treeControl]="treeControlNested">
      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
        <div tabindex="2" (click)="onChildNavClicked(node)">
          <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
            <span *ngIf="node.iconType === 'SVG'" class="fa-icon-small mr-2" fxLayout="row" fxFlex="100" fxLayoutAlign="start center"><ng-container [ngTemplateOutlet]="node.icon === 'boltzIconBlock' ? boltzIconBlock : null" /></span>
            <fa-icon *ngIf="node.iconType === 'FA'" class="fa-icon-small mr-2" [icon]="node.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 *matTreeNodeDef="let node; when: hasChild" fxLayout="column" matTreeNodeToggle>
        <div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
          <div fxFlex="80" fxLayoutAlign="start center">
            <span *ngIf="node.iconType === 'SVG'" class="mr-2"><ng-container [ngTemplateOutlet]="node.icon" /></span>
            <fa-icon *ngIf="node.iconType === 'FA'" class="fa-icon-small mr-2" [icon]="node.icon" />
            <mat-icon *ngIf="!node.iconType" class="mat-icon-36">{{node.icon}}</mat-icon>
            <span>{{node.name}}</span>
          </div>
          <button fxFlex="20" class="btn-icon-small" mat-icon-button fxLayoutAlign="end center" [attr.aria-label]="'toggle ' + node.name">
            <mat-icon>{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
          </button>
        </div>
        <div class="mat-nested-tree-node-child" [class.tree-children-invisible]="!treeControlNested.isExpanded(node)">
          <ng-container matTreeNodeOutlet />
        </div>
      </mat-nested-tree-node>
    </mat-tree>
    <mat-divider class="w-100" />
    <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" /></span>
        <fa-icon *ngIf="node.iconType === 'FA'" class="fa-icon-small mr-2" matTooltipPosition="right" [icon]="node.icon" matTooltip="{{node.name}}" />
        <mat-icon *ngIf="!node.iconType" class="mat-icon-36" matTooltipPosition="right" matTooltip="{{node.name}}">{{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 *ngIf="showLogout" [dataSource]="navMenusLogout" [treeControl]="treeControlLogout">
      <mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
        <span *ngIf="node.iconType === 'SVG'" class="mr-2"><ng-container [ngTemplateOutlet]="node.icon" /></span>
        <fa-icon *ngIf="node.iconType === 'FA'" class="fa-icon-small mr-2" matTooltipPosition="right" [icon]="node.icon" matTooltip="{{node.name}}" />
        <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" />
        <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 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) " />
      </g>
    </g>
  </svg>
</ng-template>