Keys pipe, some workin on the mail app..

src/app/app.module.ts

@@ -19,7 +19,7 @@ import { UIPageLayoutsModule } from './main/ui/page-layouts/page-layouts.module'
 import { FuseLayoutModule } from './core/components/layout/layout.module';
 import { PerfectScrollbarConfigInterface, PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { AngularFireModule } from 'angularfire2';
-import { environment } from "environments/environment";
+import { environment } from 'environments/environment';
 import { AngularFireDatabaseModule } from 'angularfire2/database';
 import { MailListComponent } from './main/apps/mail/mail-list/mail-list.component';
 import { MailDetailsComponent } from './main/apps/mail/mail-details/mail-details.component';

src/app/core/modules/shared.module.ts

@@ -8,11 +8,13 @@ import {
     FuseMdSidenavTogglerDirective
 } from '../directives/md-sidenav-helper/md-sidenav-helper.directive';
 import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
+import {KeysPipe} from '../pipes/keys';
 
 @NgModule({
     declarations: [
         FuseMdSidenavHelperDirective,
-        FuseMdSidenavTogglerDirective
+        FuseMdSidenavTogglerDirective,
+        KeysPipe
     ],
     imports     : [
         FlexLayoutModule,
@@ -28,7 +30,8 @@ import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
         FormsModule,
         FuseMdSidenavHelperDirective,
         FuseMdSidenavTogglerDirective,
-        PerfectScrollbarModule
+        PerfectScrollbarModule,
+        KeysPipe
     ]
 })
 

src/app/core/pipes/keys.ts

@@ -0,0 +1,15 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'keys'})
+export class KeysPipe implements PipeTransform
+{
+    transform(value: any, args: string[]): any
+    {
+        let keys: any[] = [];
+        for ( let key in value )
+        {
+            keys.push({key: key, value: value[key]});
+        }
+        return keys;
+    }
+}

src/app/main/apps/mail/mail.component.html

@@ -9,21 +9,7 @@
         <!-- SIDENAV -->
         <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="carded-left-sidenav" md-is-locked-open="gt-md">
-
+            <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
-            <!-- SIDENAV HEADER -->
-            <div class="header">
-                <span>Sidenav header</span>
-            </div>
-            <!-- / SIDENAV HEADER -->
-
-            <!-- SIDENAV CONTENT -->
-            <div class="content" perfect-scrollbar>
-
-                Sidenav
-
-            </div>
-            <!-- / SIDENAV CONTENT -->
-
         </md-sidenav>
         <!-- / SIDENAV -->
 
@@ -31,8 +17,22 @@
         <div class="center">
 
             <!-- CONTENT HEADER -->
-            <div class="header">
+            <div class="header" fxLayout="row" fxLayoutAlign="start center">
-                <h2>Left sidenav with content scroll</h2>
+
+                <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
+
+                    <button md-button class="mat-icon-button sidenav-toggle"
+                            fuseMdSidenavToggler="carded-left-sidenav"
+                            fxHide.gt-md aria-label="Toggle Sidenav">
+                        <md-icon>menu</md-icon>
+                    </button>
+
+                    <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
+                        <md-icon>search</md-icon>
+                        <input fxFlex type="text" placeholder="Search for an e-mail or contact">
+                    </div>
+                </div>
+
             </div>
             <!-- / CONTENT HEADER -->
 
@@ -41,11 +41,6 @@
 
                 <!-- CONTENT TOOLBAR -->
                 <div class="toolbar">
-                    <button md-button class="mat-icon-button sidenav-toggle"
-                            fuseMdSidenavToggler="carded-left-sidenav"
-                            fxHide.gt-md>
-                        <md-icon>menu</md-icon>
-                    </button>
 
                     <span>Content toolbar</span>
                 </div>
@@ -69,4 +64,4 @@
 
     </md-sidenav-container>
 
-</div>
+</div>

src/app/main/apps/mail/mail.component.scss

@@ -1,5 +1,43 @@
+@import "src/app/core/scss/fuse";
+
 :host, #mail {
     width: 100%;
     height: 100%;
+
+    .center {
+
+        .header {
+            padding: 0 !important;
+
+            .search-wrapper {
+                @include mat-elevation(7);
+
+                .sidenav-toggle {
+                    margin: 0;
+                    width: 56px;
+                    height: 56px;
+                    background: #FFF;
+                    border-radius: 0;
+                    border-right: 1px solid rgba(0, 0, 0, .12);
+                }
+
+                .search {
+                    width: 100%;
+                    height: 56px;
+                    line-height: 56px;
+                    padding: 18px;
+                    background: #FFFFFF;
+
+                    input {
+                        height: 56px;
+                        padding-left: 16px;
+                        color: rgba(0, 0, 0, 0.54);
+                        border: none;
+                        outline: none;
+                    }
+                }
+            }
+        }
+    }
 }
 

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -1,3 +1,38 @@
+<!-- SIDENAV HEADER -->
+<div class="header" fxLayout="column" fxLayoutAlign="space-between start">
+    <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
+        <md-icon class="logo-icon">mail</md-icon>
+        <span class="logo-text">Mailbox</span>
+    </div>
+
+    <div class="account" fxLayout="column">
+        <div class="title">John Doe</div>
+        <md-select class="account-selection" placeholder="Mail Selection"
+                   floatPlaceholder="never"
+                   [ngModel]="selectedAccount">
+            <md-option *ngFor="let account of (accounts | keys)" [value]="account.key">
+                {{account.value}}
+            </md-option>
+        </md-select>
+    </div>
+
+</div>
+<!-- / SIDENAV HEADER -->
+
+<!-- SIDENAV CONTENT -->
+<div class="content" perfect-scrollbar>
+
+    Sidenav
+
+</div>
+<!-- / SIDENAV CONTENT -->
+
+<!-- SIDENAV HEADER -->
+<div class="header" layout="column" layout-align="space-between start">
+
+</div>
+<!-- / SIDENAV HEADER -->
+
 <p>
-  main sidenav
+    main sidenav
 </p>

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss

@@ -0,0 +1,21 @@
+:host {
+    .header {
+
+        .logo {
+
+            .logo-icon {
+                margin: 0 16px 0 0;
+            }
+
+            .logo-text {
+                font-size: 24px;
+            }
+        }
+
+        .account {
+            width: 100%;
+            .account-selection {
+            }
+        }
+    }
+}

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts

@@ -7,8 +7,17 @@ import {Component, OnInit} from '@angular/core';
 })
 export class MainSidenavComponent implements OnInit
 {
+    accounts: object;
+    selectedAccount: string;
+
     constructor()
     {
+        // Data
+        this.accounts = {
+            'creapond'    : 'johndoe@creapond.com',
+            'withinpixels': 'johndoe@withinpixels.com'
+        };
+        this.selectedAccount = 'creapond';
     }
 
     ngOnInit()