From 1a7c71ba14b4c10c75a039105c6da83483b63b30 Mon Sep 17 00:00:00 2001
From: Ashkan Daie <ashkandaie@users.noreply.github.com>
Date: Mon, 7 Aug 2017 15:32:33 -0700
Subject: [PATCH] feat(navigation-drawer): ability to override toolbar content
 (#778)

closes #774
---
 src/platform/core/layout/layout.module.ts     |  9 +++--
 .../navigation-drawer.component.html          | 39 ++++++++++---------
 .../navigation-drawer.component.ts            | 20 +++++++++-
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/platform/core/layout/layout.module.ts b/src/platform/core/layout/layout.module.ts
index 092e60a2fd..f9212809d8 100644
--- a/src/platform/core/layout/layout.module.ts
+++ b/src/platform/core/layout/layout.module.ts
@@ -13,12 +13,14 @@ import {
 } from './layout-nav-list/layout-nav-list.directives';
 import { TdLayoutCardOverComponent } from './layout-card-over/layout-card-over.component';
 import { TdLayoutManageListComponent } from './layout-manage-list/layout-manage-list.component';
-import { 
+import {
   TdLayoutManageListToggleDirective, TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective,
 } from './layout-manage-list/layout-manage-list.directives';
 import { TdLayoutFooterComponent } from './layout-footer/layout-footer.component';
 
-import { TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective } from './navigation-drawer/navigation-drawer.component';
+import {
+  TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective, TdNavigationDrawerToolbarDirective,
+} from './navigation-drawer/navigation-drawer.component';
 
 const TD_LAYOUTS: Type<any>[] = [
   TdLayoutComponent,
@@ -44,13 +46,14 @@ const TD_LAYOUTS: Type<any>[] = [
 
   TdNavigationDrawerComponent,
   TdNavigationDrawerMenuDirective,
+  TdNavigationDrawerToolbarDirective,
 ];
 
 export { TdLayoutComponent, TdLayoutToggleDirective, TdLayoutCloseDirective, TdLayoutOpenDirective,
          TdLayoutNavComponent, TdLayoutNavListComponent, TdLayoutNavListToggleDirective, TdLayoutNavListCloseDirective, TdLayoutNavListOpenDirective,
          TdLayoutCardOverComponent, TdLayoutManageListComponent, TdLayoutManageListToggleDirective,
          TdLayoutManageListCloseDirective, TdLayoutManageListOpenDirective,
-         TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective };
+         TdLayoutFooterComponent, TdNavigationDrawerComponent, TdNavigationDrawerMenuDirective, TdNavigationDrawerToolbarDirective };
 
 @NgModule({
   imports: [
diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html
index 911c5a753a..20560080c6 100644
--- a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html
+++ b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html
@@ -1,22 +1,25 @@
 <md-toolbar [color]="color" [style.background-image]="backgroundImage" [class.td-toolbar-background]="!!isBackgroundAvailable">
   <div layout="column" flex>
-    <span *ngIf="icon || logo || sidenavTitle"
-          [class.cursor-pointer]="routerEnabled"
-          (click)="handleNavigationClick()"
-          layout="row"
-          layout-align="start center">
-      <md-icon *ngIf="icon">{{icon}}</md-icon>
-      <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
-      <span *ngIf="sidenavTitle" class="md-subhead">{{sidenavTitle}}</span>
-    </span>
-    <div class="md-body-2" *ngIf="email && name">{{name}}</div>
-    <div class="md-body-1" layout="row" href *ngIf="email || name" (click)="toggleMenu()">
-      <span flex>{{email || name}}</span>
-      <button md-icon-button class="md-icon-button-mini" *ngIf="isMenuAvailable">
-        <md-icon *ngIf="!menuToggled">arrow_drop_down</md-icon>
-        <md-icon *ngIf="menuToggled">arrow_drop_up</md-icon>
-      </button>
-    </div>
+    <ng-content select="[td-navigation-drawer-toolbar]"></ng-content>
+    <ng-container *ngIf="!isCustomToolbar">
+      <span *ngIf="icon || logo || sidenavTitle"
+            [class.cursor-pointer]="routerEnabled"
+            (click)="handleNavigationClick()"
+            layout="row"
+            layout-align="start center">
+        <md-icon *ngIf="icon">{{icon}}</md-icon>
+        <md-icon *ngIf="logo && !icon" class="md-icon-logo" [svgIcon]="logo"></md-icon>
+        <span *ngIf="sidenavTitle" class="md-subhead">{{sidenavTitle}}</span>
+      </span>
+      <div class="md-body-2" *ngIf="email && name">{{name}}</div>
+      <div class="md-body-1" layout="row" href *ngIf="email || name" (click)="toggleMenu()">
+        <span flex>{{email || name}}</span>
+        <button md-icon-button class="md-icon-button-mini" *ngIf="isMenuAvailable">
+          <md-icon *ngIf="!menuToggled">arrow_drop_down</md-icon>
+          <md-icon *ngIf="menuToggled">arrow_drop_up</md-icon>
+        </button>
+      </div>
+    </ng-container>
   </div>
 </md-toolbar>
 <div [@tdCollapse]="menuToggled">
@@ -24,4 +27,4 @@
 </div>
 <div [@tdCollapse]="!menuToggled">
   <ng-content select="[td-navigation-drawer-menu]"></ng-content>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts
index 819cf5e7f7..50eb00956b 100644
--- a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts
+++ b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts
@@ -17,6 +17,13 @@ export class TdNavigationDrawerMenuDirective {
 
 }
 
+@Directive({
+  selector: '[td-navigation-drawer-toolbar]',
+})
+export class TdNavigationDrawerToolbarDirective {
+
+}
+
 @Component({
   selector: 'td-navigation-drawer',
   styleUrls: ['./navigation-drawer.component.scss' ],
@@ -35,11 +42,20 @@ export class TdNavigationDrawerComponent implements OnInit, OnDestroy {
 
   @ContentChildren(TdNavigationDrawerMenuDirective) _drawerMenu: QueryList<TdNavigationDrawerMenuDirective>;
 
+  @ContentChildren(TdNavigationDrawerToolbarDirective) _toolbar: QueryList<TdNavigationDrawerToolbarDirective>;
+
   /**
-   * Checks if there is a [TdNavigationDrawerMenuDirective] as content.
+   * Checks if there is a [TdNavigationDrawerMenuDirective] has content.
    */
   get isMenuAvailable(): boolean {
-    return this._drawerMenu.length > 0;
+    return this._drawerMenu ? this._drawerMenu.length > 0 : false;
+  }
+
+  /**
+   * Checks if there is a [TdNavigationDrawerToolbarDirective] has content.
+   */
+  get isCustomToolbar(): boolean {
+    return this._toolbar ? this._toolbar.length > 0 : false;
   }
 
   /**