RTL/src/app/app.component.html

<div fxLayout="column" id="rtl-container" class="rtl-container" [ngClass]="settings.theme" [class.horizontal]="settings.menu === 'Horizontal'" [class.compact]="settings.menuType === 'Compact'" [class.mini]="settings.menuType === 'Mini'">
  <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">
      <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary">
        <div fxLayoutAlign="center center">
          <button *ngIf="settings.menu === 'Vertical'" mat-icon-button (click)="sideNavToggle()">
            <mat-icon>menu</mat-icon>
          </button>
        </div>
        <div>
          <h2>Ride The Lightning <span class="font-60-percent">(Beta)</span></h2>
        </div>
        <div fxLayoutAlign="space-between center">
          <rtl-top-menu></rtl-top-menu>
        </div>
      </mat-toolbar>
      <div fxLayout="row" fxLayoutAlign="center center" class="bg-primary flex-wrap pubkey-info-top" rtlClipboard [payload]="information?.identity_pubkey" (copied)="copiedText($event)">
        <mat-icon [ngClass]="{'icon-smaller': smallScreen}">vpn_key</mat-icon>
        <div [ngClass]="{'word-break font-9px': smallScreen, 'word-break': !smallScreen}">&nbsp;{{information?.identity_pubkey}}
          <mat-spinner [diameter]="20" *ngIf="flgLoading[0]" class="inline-spinner foreground"></mat-spinner>
          <fa-icon [icon]="faCopy"></fa-icon>
          <span [hidden]="!flgCopied">Copied</span>
        </div>
      </div>
      <mat-toolbar color="primary" *ngIf="settings.menu === 'Horizontal'" class="padding-gap-x horizontal-nav">
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="center center" class="h-100">
          <rtl-horizontal-navigation></rtl-horizontal-navigation>
        </div>
      </mat-toolbar>
      <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>
<!-- <div perfectScrollbar id="rtl-container" class="rtl-container purple-white-light-theme">
  <mat-toolbar class="bg-alternate-primary toolbar-nodes">
    <div class="toolbar-node-info">Node 1</div>
    <div class="toolbar-node-info">Node 2</div>
    <span class="spacer"></span>
    <div fxLayoutAlign="space-between center">
      <rtl-top-menu></rtl-top-menu>
    </div>
  </mat-toolbar>
  <mat-sidenav-container class="container">
    <mat-sidenav #sidenav class="bg-primary mat-elevation-z24" mode="side">
      <p><button mat-raised-button class="bg-accent" (click)="sidenav.toggle()">Toggle</button></p>
    </mat-sidenav>
    <mat-sidenav-content>
      <mat-toolbar class="bg-primary toolbar">
        <span>Lightning Menu</span>
        <span class="spacer"></span>
        <p><button mat-raised-button class="btn-primary-darker" (click)="sidenav.toggle()">show public key</button></p>
      </mat-toolbar>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div> -->