Forked from yubing24/account-minimal.component.html
Created
September 30, 2019 19:15
-
-
Save m00zi/f0a1e0ec8a68a49ee9804ae0bf797f5a to your computer and use it in GitHub Desktop.
Side Navigation with Angular 6 and Material 2
This file contains 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 | |
</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-sidenav> | |
<mat-sidenav-content> | |
</mat-sidenav-content> | |
</mat-sidenav-container> |
This file contains 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
import {NgModule} from '@angular/core'; | |
import {RouterModule, Routes} from '@angular/router'; | |
import {AccountComponent} from './account.component'; | |
const accountRoutes: Routes = [ | |
{ | |
path: '', component: AccountComponent | |
} | |
]; | |
@NgModule({ | |
imports: [ | |
RouterModule.forChild(accountRoutes) | |
], | |
}) | |
export class AccountRoutingModule { } |
This file contains 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> |
This file contains 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
import {Component, ViewChild} from '@angular/core'; | |
import {Router} from '@angular/router'; | |
@Component({ | |
templateUrl: 'account.component.html', | |
}) | |
export class AccountComponent { | |
constructor ( | |
private router: Router | |
) {} | |
} |
This file contains 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
import {NgModule} from '@angular/core'; | |
import {CommonModule} from '@angular/common'; | |
import {RouterModule} from '@angular/router'; | |
import {AccountComponent} from './account.component'; | |
import {AccountRoutingModule} from './account-routing.module'; | |
import { | |
MatButtonModule, | |
MatExpansionModule, | |
MatIconModule, | |
MatListModule, | |
MatMenuModule, | |
MatSidenavModule, | |
MatToolbarModule, | |
MatTooltipModule | |
} from '@angular/material'; | |
import {WidgetModule} from '../widget/widget.module'; | |
@NgModule({ | |
imports: [ | |
CommonModule, | |
RouterModule, | |
MatButtonModule, | |
MatExpansionModule, | |
MatIconModule, | |
MatListModule, | |
MatMenuModule, | |
MatSidenavModule, | |
MatToolbarModule, | |
MatTooltipModule, | |
AccountRoutingModule, | |
], | |
declarations: [ | |
AccountComponent | |
], | |
}) | |
export class AccountModule { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment