Skip to content

Instantly share code, notes, and snippets.

@yubing24
Last active September 30, 2019 19:15
Show Gist options
  • Save yubing24/65b11fb65dbcd48e72e6138638d3b124 to your computer and use it in GitHub Desktop.
Save yubing24/65b11fb65dbcd48e72e6138638d3b124 to your computer and use it in GitHub Desktop.
Side Navigation with Angular 6 and Material 2
<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>
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 { }
<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>
import {Component, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
@Component({
templateUrl: 'account.component.html',
})
export class AccountComponent {
constructor (
private router: Router
) {}
}
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