mirror of
https://github.com/Ride-The-Lightning/RTL
synced 2024-11-09 13:10:44 +00:00
37 lines
1.8 KiB
HTML
37 lines
1.8 KiB
HTML
<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="padding-gap-x bg-primary rtl-top-toolbar">
|
|
<div>
|
|
<button class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
|
|
<mat-icon class="mr-5px">menu</mat-icon>
|
|
</button>
|
|
<button *ngIf="!smallScreen" mat-icon-button (click)="flgSidenavPinned = !flgSidenavPinned">
|
|
<svg class="top-toolbar-icon icon-pinned" viewBox="0 0 32 32">
|
|
<path fill="currentColor" *ngIf="!flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
|
|
<path fill="currentColor" *ngIf="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>
|
|
<div>
|
|
<span *ngIf="xSmallScreen">RTL</span>
|
|
<span *ngIf="!xSmallScreen">Ride The Lightning</span>
|
|
</div>
|
|
<div>
|
|
<rtl-top-menu></rtl-top-menu>
|
|
</div>
|
|
</mat-toolbar>
|
|
<mat-sidenav-container>
|
|
<mat-sidenav perfectScrollbar [opened]="true" [mode]="(flgSidenavPinned && !smallScreen) ? 'side' : 'over'" #sideNavigation class="sidenav mat-elevation-z6">
|
|
<rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)" fxFlex="100"></rtl-side-navigation>
|
|
</mat-sidenav>
|
|
<mat-sidenav-content perfectScrollbar>
|
|
<div [ngClass]="{'mt-minus-1': smallScreen, 'inner-sidenav-content': true}">
|
|
<router-outlet></router-outlet>
|
|
</div>
|
|
</mat-sidenav-content>>
|
|
</mat-sidenav-container>
|
|
<div class="rtl-spinner" *ngIf="undefined === settings.themeColor">
|
|
<mat-spinner color="accent"></mat-spinner>
|
|
<h4>Loading RTL...</h4>
|
|
</div>
|
|
</div>
|