mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-18 14:22:35 +00:00
68 lines
2.6 KiB
HTML
68 lines
2.6 KiB
HTML
<!-- SIDENAV HEADER -->
|
|
<div fxLayout="column" fxLayoutAlign="space-between start"
|
|
class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
|
|
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
|
<md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon>
|
|
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
|
|
</div>
|
|
|
|
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
|
<div class="title">John Doe</div>
|
|
<md-select class="account-selection" placeholder="Mail Selection"
|
|
floatPlaceholder="never"
|
|
[ngModel]="selectedAccount">
|
|
<md-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
|
{{account.value}}
|
|
</md-option>
|
|
</md-select>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / SIDENAV HEADER -->
|
|
|
|
<!-- SIDENAV CONTENT -->
|
|
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
|
|
|
|
<div class="p-24">
|
|
<button md-raised-button fxFlex
|
|
class="mat-accent compose-dialog-button"
|
|
(click)="composeDialog()"
|
|
aria-label="Compose">
|
|
COMPOSE
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
|
|
<div class="nav-subheader">FOLDERS</div>
|
|
|
|
<div class="nav-item" *ngFor="let folder of folders">
|
|
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
|
|
<md-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</md-icon>
|
|
<span>{{folder.title}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="nav-subheader">FILTERS</div>
|
|
|
|
<div class="nav-item" *ngFor="let filter of filters">
|
|
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
|
|
<md-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</md-icon>
|
|
<span>{{filter.title}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="nav-subheader">LABELS</div>
|
|
|
|
<div class="nav-item" *ngFor="let label of labels">
|
|
<a class="nav-link" md-ripple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
|
|
<md-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</md-icon>
|
|
<span>{{label.title}}</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- / SIDENAV CONTENT -->
|