Created
August 9, 2018 05:51
-
-
Save yubing24/138c09ac7baecadada939c14ff8b846c to your computer and use it in GitHub Desktop.
Angular Material Side Navigation with Expandable Menus
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
It helped
Thanks, looks good.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very good