Skip to content

Instantly share code, notes, and snippets.

@yubing24

yubing24/account.component.html

Created August 9, 2018 05:51
Show Gist options
  • Save yubing24/138c09ac7baecadada939c14ff8b846c to your computer and use it in GitHub Desktop.
Save yubing24/138c09ac7baecadada939c14ff8b846c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yubing24 created this gist Aug 9, 2018.
    65 changes: 65 additions & 0 deletions account.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    <mat-toolbar color="accent">
    <button mat-icon-button matTooltip="Application Menu" (click)="sidenav.toggle()">
    <mat-icon>settings</mat-icon>
    </button>
    Account Settings
    <span style="flex: 1 1 auto;"></span>
    <div>
    <button mat-icon-button matTooltip="Switch Apps">
    <mat-icon>apps</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Notifications">
    <mat-icon>notifications</mat-icon>
    </button>
    <button mat-icon-button matTooltip="My Account" [matMenuTriggerFor]="accountMenu">
    <mat-icon>account_circle</mat-icon>
    </button>
    <mat-menu #accountMenu [overlapTrigger]="false" yPosition="below">
    <button mat-menu-item routerLink="#">
    <mat-icon>person</mat-icon><span>My Account</span>
    </button>
    <button mat-menu-item>
    <mat-icon>help</mat-icon><span>Help</span>
    </button>
    <mat-divider></mat-divider>
    <button mat-menu-item>
    <mat-icon>exit_to_app</mat-icon>Logout
    </button>
    </mat-menu>
    </div>
    </mat-toolbar>
    <mat-sidenav-container style="height: calc(100% - 64px); margin: 0;">
    <mat-sidenav #sidenav mode="side" [class.mat-elevation-z4]="true" style="width: 240px">
    <mat-nav-list dense>
    <mat-list-item routerLink="#"><mat-icon>dashboard</mat-icon>Dashboard</mat-list-item>
    <mat-list-item routerLink="#"><mat-icon>check_box</mat-icon>General</mat-list-item>
    <mat-list-item routerLink="#"><mat-icon>person</mat-icon>Profile</mat-list-item>
    <mat-list-item routerLink="#"><mat-icon>notification_important</mat-icon>Notification</mat-list-item>
    <mat-expansion-panel [class.mat-elevation-z0]="true" dense>
    <mat-expansion-panel-header>
    Preference
    </mat-expansion-panel-header>
    <mat-nav-list dense>
    <a mat-list-item routerLink="#"><mat-icon>attach_money</mat-icon>Billing</a>
    <a mat-list-item routerLink="#"><mat-icon>notification_important</mat-icon>Notification</a>
    </mat-nav-list>
    </mat-expansion-panel>
    <mat-expansion-panel [class.mat-elevation-z0]="true" dense>
    <mat-expansion-panel-header>
    Privacy
    </mat-expansion-panel-header>
    <mat-nav-list dense>
    <a mat-list-item routerLink="#"><mat-icon>person_add</mat-icon>Partnership Request</a>
    <a mat-list-item routerLink="#"><mat-icon>visibility</mat-icon>Profile Visibility</a>
    </mat-nav-list>
    </mat-expansion-panel>
    </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
    <router-outlet>
    <div class="container mat-body-1">
    Account Component
    </div>
    </router-outlet>
    </mat-sidenav-content>
    </mat-sidenav-container>