<div fxLayout="column" id="rtl-container" class="rtl-container medium" [ngClass]="[settings.themeColor | lowercase, settings.themeMode | lowercase]">
  <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="bg-primary rtl-top-toolbar">
    <div>
      <button *ngIf="flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSideNavOpened ? 'Hide Navigation Menu' : 'Show Navigation Menu'" [matTooltipDisabled]="smallScreen" (click)="sideNavToggle()">
        <mat-icon class="color-white">menu</mat-icon>
      </button>
      <button *ngIf="!smallScreen && flgLoggedIn" mat-icon-button matTooltipPosition="right" [matTooltip]="flgSidenavPinned ? 'Unpin Navigation Menu' : 'Pin Navigation Menu'" (click)="flgSidenavPinned = !flgSidenavPinned">
        <svg class="icon-pinned" width="20" height="20" viewBox="0 0 24 24">
          <path *ngIf="!flgSidenavPinned" fill="currentColor" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
          <path *ngIf="flgSidenavPinned" fill="currentColor" 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>
    <div>
      <span *ngIf="smallScreen" class="font-weight-500">{{information.alias ? 'RTL - ' + information.alias : 'RTL'}}</span>
      <span *ngIf="!smallScreen" class="font-size-120 font-weight-500">{{information.alias ? 'Ride The Lightning - ' + information.alias : 'Ride The Lightning'}}</span>
    </div>
    <div>
      <rtl-top-menu />
    </div>
  </mat-toolbar>
  <mat-sidenav-container (backdropClick)="backdropClicked()">
    <mat-sidenav #sideNavigation class="sidenav mat-elevation-z6" [perfectScrollbar] [opened]="flgSideNavOpened && flgLoggedIn" [mode]="(flgSidenavPinned && !smallScreen) ? 'side' : 'over'">
      <rtl-side-navigation fxFlex="100" (ChildNavClicked)="onNavigationClicked($event)" />
    </mat-sidenav>
    <mat-sidenav-content #sideNavContent [perfectScrollbar]>
      <div class="inner-sidenav-content" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
        <router-outlet #outlet="outlet" />
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>
  <div *ngIf="!settings.themeColor" class="rtl-spinner">
    <mat-spinner color="accent" />
    <h4>Loading RTL...</h4>
  </div>
</div>
