Side Navigation with Angular 6 and Material 2

account-minimal.component.html

<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>

account-routing.module.ts

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 { }

account.component.html

<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>

account.component.ts

import {Component, ViewChild} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  templateUrl: 'account.component.html',
})
export class AccountComponent {
    constructor (
        private router: Router
    ) {}
}

account.module.ts

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 {
}