RTL/src/app/app.component.html

<div fxLayout="column" id="rtl-container" class="rtl-container" [ngClass]="[settings.theme, settings.fontSize]" [class.horizontal]="settings.menu === 'Horizontal'" [class.compact]="settings.menuType === 'Compact'" [class.mini]="settings.menuType === 'Mini'">
  <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary">
    <div fxLayoutAlign="center center">
      <button *ngIf="settings.menu === 'Vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
        <mat-icon>menu</mat-icon>
      </button>
      <button *ngIf="settings.fontSize === 'small-font' && settings.menu === 'Vertical' && settings.menuType !== 'Mini' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
        <svg class="top-toolbar-icon icon-pinned" viewBox="0 0 42 42">
          <path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
          <path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
        </svg>
      </button>
      <button *ngIf="settings.fontSize === 'regular-font' && settings.menu === 'Vertical' && settings.menuType !== 'Mini' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
        <svg class="top-toolbar-icon icon-pinned" viewBox="0 0 32 32">
          <path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
          <path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
        </svg>
      </button>
      <button *ngIf="settings.fontSize === 'large-font' && settings.menu === 'Vertical' && settings.menuType !== 'Mini' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
        <svg class="top-toolbar-icon icon-pinned" viewBox="0 0 24 24">
          <path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
          <path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
        </svg>
      </button>
      <div *ngIf="appConfig.nodes.length > 1" fxLayout="row" fxLayoutAlign="space-between center" [ngClass]="{'ml-1': settings.fontSize !== 'large-font', 'ml-2': settings.fontSize === 'large-font'}">
        <div *ngFor="let node of appConfig.nodes" tabindex="1" fxFlex="100">
          <button [ngClass]="{'selected-node':node.index === selNode.index, 'app-config-nodes': true}" (click)="onSelectionChange(node)" fxLayoutAlign="center center" mat-button type="button">{{node.lnNode}} ({{node.lnImplementation}})</button>
        </div>
      </div>
    </div>
    <div fxLayoutAlign="space-between center">
      <rtl-top-menu></rtl-top-menu>
    </div>
  </mat-toolbar>
  <mat-toolbar color="primary" *ngIf="settings.menu === 'Horizontal'" class="padding-gap-x horizontal-nav">
    <rtl-horizontal-navigation fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="h-100"></rtl-horizontal-navigation>
  </mat-toolbar>
  <mat-sidenav-container>
      <mat-sidenav perfectScrollbar *ngIf="settings.menu === 'Vertical'" [opened]="settings.flgSidenavOpened" [mode]="(settings.flgSidenavPinned) ? 'side' : 'over'"
      #sideNavigation class="sidenav mat-elevation-z6 overflow-auto">
      <rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)"></rtl-side-navigation>
    </mat-sidenav>
    <mat-sidenav-content perfectScrollbar class="overflow-auto">
      <div [ngClass]="{'mt-minus-1': smallScreen, 'inner-sidenav-content': true}">
        <router-outlet></router-outlet>
      </div>
      <div fxLayout="row" fxLayoutAlign="center center" class="bg-primary settings-icon" (click)="settingSidenav.toggle()">
        <mat-icon class="animate-settings">settings</mat-icon>
      </div>
    </mat-sidenav-content>
    <mat-sidenav #settingSidenav position="end" class="settings mat-elevation-z6" mode="side">
      <rtl-settings-nav (done)="settingSidenav.toggle()"></rtl-settings-nav>
    </mat-sidenav>  
  </mat-sidenav-container>
  <div class="rtl-spinner" *ngIf="undefined === settings.theme">
    <mat-spinner color="accent"></mat-spinner>
    <h4>Loading RTL...</h4>
  </div>
</div>