mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-14 04:21:37 +00:00
102 lines
3.8 KiB
HTML
102 lines
3.8 KiB
HTML
<mat-toolbar class="p-0 mat-elevation-z1">
|
|
|
|
<mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
|
|
|
|
<div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<button mat-button class="toggle-button-navbar mat-icon-button"
|
|
fuseNavbarVertical="toggleBar" fxHide.gt-md>
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<div class="toolbar-separator" fxHide.gt-md></div>
|
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
|
|
<div class="logo ml-16">
|
|
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-8 px-mat-16">
|
|
<fuse-shortcuts></fuse-shortcuts>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
|
|
|
<button mat-button [matMenuTriggerFor]="userMenu"
|
|
class="user-button">
|
|
<div fxLayout="row" fxLayoutAlign="center center">
|
|
<img class="avatar" src="assets/images/avatars/profile.jpg">
|
|
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
|
|
<mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
|
|
</div>
|
|
</button>
|
|
|
|
<mat-menu #userMenu="matMenu" [overlapTrigger]="false">
|
|
|
|
<button mat-menu-item>
|
|
<mat-icon>account_circle</mat-icon>
|
|
<span>My Profile</span>
|
|
</button>
|
|
|
|
<button mat-menu-item class="">
|
|
<mat-icon>mail</mat-icon>
|
|
<span>Inbox</span>
|
|
</button>
|
|
|
|
<button mat-menu-item class="">
|
|
<mat-icon>exit_to_app</mat-icon>
|
|
<span>Logout</span>
|
|
</button>
|
|
|
|
</mat-menu>
|
|
|
|
<div class="toolbar-separator"></div>
|
|
|
|
<fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
|
|
|
|
<div class="toolbar-separator"></div>
|
|
|
|
<button mat-button fxHide fxShow.gt-xs
|
|
class="language-button"
|
|
[matMenuTriggerFor]="languageMenu">
|
|
<div fxLayout="row" fxLayoutAlign="center center">
|
|
<img class="flag mr-8" [src]="'assets/images/flags/'+selectedLanguage.flag+'.png'">
|
|
<span class="iso text-uppercase">{{selectedLanguage.id}}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
|
|
|
|
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
|
|
<span class="iso">{{lang.title}}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button mat-menu-item [routerLink]="'/components/multi-language'">
|
|
<div fxLayout="row" fxLayoutAlign="start center">
|
|
<span>Learn more</span>
|
|
</div>
|
|
</button>
|
|
|
|
</mat-menu>
|
|
|
|
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
|
|
|
<button mat-icon-button
|
|
class="mat-icon-button quick-panel-toggle-button"
|
|
fuseMatSidenavToggler="quick-panel"
|
|
aria-label="Toggle quick panel">
|
|
<mat-icon class="icon">format_list_bulleted</mat-icon>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</mat-toolbar>
|