Layout Service created,

Starting the build navigation,
Some Components added for tests.

package.json

@@ -12,19 +12,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.4",
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/material": "^2.0.0-beta.7",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/animations": "^4.2.5",
+    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/common": "^4.2.5",
+    "@angular/compiler": "^4.2.5",
+    "@angular/core": "^4.2.5",
+    "@angular/flex-layout": "^2.0.0-beta.8",
+    "@angular/forms": "^4.2.5",
+    "@angular/http": "^4.2.5",
+    "@angular/material": "^2.0.0-beta.8",
+    "@angular/platform-browser": "^4.2.5",
+    "@angular/platform-browser-dynamic": "^4.2.5",
+    "@angular/router": "^4.2.5",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
-    "rxjs": "^5.1.0",
+    "rxjs": "^5.4.2",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
@@ -32,7 +34,7 @@
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
     "@types/jasmine": "2.5.45",
-    "@types/node": "~6.0.60",
+    "@types/node": "^6.0.79",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",

src/app/app.component.html

@@ -1,3 +1,76 @@
+<ng-container *ngIf="layoutSettings.toolbar === 'above'">
+    <fuse-toolbar></fuse-toolbar>
+</ng-container>
+
+<ng-container *ngIf="layoutSettings.navigation === 'left'">
+
+    <md-sidenav-container id="wrapper" class="example-sidenav-fab-container" fxLayout="row" fxfill>
+
+        <md-sidenav #sidenav mode="side" opened="true" fxFlex="256px">
+            <fuse-navigation></fuse-navigation>
+        </md-sidenav>
+
+        <fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
+
+        <div id="content">
+            <router-outlet></router-outlet>
+        </div>
+    </md-sidenav-container>
+
+</ng-container>
+
+<ng-container *ngIf="layoutSettings.navigation === 'right'">
+
+    <md-sidenav-container id="wrapper" class="example-sidenav-fab-container" fxLayout="row" fxfill>
+
+        <fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
+
+        <div id="content">
+            <router-outlet></router-outlet>
+            <button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
+                <md-icon>add</md-icon>
+            </button>
+        </div>
+
+        <md-sidenav #sidenav mode="side" align="end" opened="true" fxFlex="256px">
+            <fuse-navigation></fuse-navigation>
+        </md-sidenav>
+
+    </md-sidenav-container>
+
+</ng-container>
+
+<ng-container *ngIf="layoutSettings.navigation === 'top'">
+
+    <div id="wrapper" class="">
+
+        <div id="nav" class="">
+            <fuse-navigation></fuse-navigation>
+        </div>
+
+        <fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
+
+        <div id="content-wrapper" class="">
+
+            <div id="content">
+                <router-outlet></router-outlet>
+            </div>
+        </div>
+
+    </div>
+</ng-container>
+
+<!--
+<pre>{{layoutSettings | json}}</pre>
+
+<fuse-layout></fuse-layout>
+
+
 <div class="example-container">
-  <fuse-component name="Sercan"></fuse-component>
+    <h1>Fuse Component</h1>
+    <fuse-fuse name="Sercan" (nameChanged)="onNameChange()"></fuse-fuse>
+    <h1>Muse Component</h1>
+    <input type="text" [(ngModel)]="bgValue">
+    <fuse-muse [bgColor]="bgValue"></fuse-muse>
 </div>
+-->

src/app/app.component.ts

@@ -1,10 +1,45 @@
-import { Component } from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {FuseComponent} from './core/fuse-component/fuse.component';
+import {MuseComponent} from './core/muse/muse.component';
+import {LayoutService} from './core/services/layout.service';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector   : 'fuse-root',
+    templateUrl: './app.component.html',
+    styleUrls  : ['./app.component.scss'],
+    providers  : [LayoutService]
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnInit
+{
+    layoutSettings: { toolbar: any, navigation: any };
+
+    bgValue = 'red';
+    title = 'app';
+    @ViewChild(FuseComponent) fuseComp: ElementRef;
+    @ViewChild(MuseComponent) museComp: ElementRef;
+
+    layoutVertical: boolean;
+
+    constructor(private layoutService: LayoutService)
+    {
+        this.layoutSettings = layoutService.getSettings();
+    }
+
+    ngOnInit()
+    {
+        this.layoutService.settingsChanged
+            .subscribe(
+                (newSettings) =>
+                {
+                    this.layoutSettings = newSettings;
+                }
+            )
+        // console.warn(this.fuseComp);
+        // console.warn(this.museComp);
+    }
+
+    onNameChange()
+    {
+
+    }
 }

src/app/app.module.ts

@@ -1,22 +1,45 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import 'hammerjs';
-import {MaterialModule} from './material.module';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
-import {FuseDirective, FuseComponent, NameGetterComponent} from './fuse-component/fuse.component';
+import {FuseDirective, FuseComponent, NameGetterComponent} from './core/fuse-component/fuse.component';
+import {MuseComponent} from './core/muse/muse.component';
+import {RouterModule, Routes} from '@angular/router';
+import {LayoutComponent} from './core/layout/layout.component';
+import {ToolbarComponent} from './toolbar/toolbar.component';
+import {MailModule} from './main/apps/mail/mail.module';
+import {ChatModule} from './main/apps/chat/chat.module';
+import {NavigationModule} from './navigation/navigation.module';
+import {ProjectModule} from './main/apps/dashboards/project/project.module';
+import {SharedModule} from './core/shared.module';
+
+const appRoutes: Routes = [
+    {path: '**', redirectTo: 'apps/dashboards/project'}
+];
 
 @NgModule({
     declarations: [
         AppComponent,
         FuseComponent,
         FuseDirective,
-        NameGetterComponent
+        NameGetterComponent,
+        MuseComponent,
+        LayoutComponent,
+        ToolbarComponent
     ],
     imports     : [
+        SharedModule,
         BrowserModule,
         BrowserAnimationsModule,
-        MaterialModule
+        RouterModule.forRoot(
+            appRoutes,
+            {enableTracing: true} // <-- debugging purposes only
+        ),
+        NavigationModule,
+        MailModule,
+        ChatModule,
+        ProjectModule
     ],
     providers   : [],
     bootstrap   : [AppComponent]

src/app/core/fuse-component/fuse.component.html

@@ -0,0 +1,26 @@
+<button md-raised-button>Raised button</button>
+<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">home</md-icon>
+
+<hr>
+<h3>
+    Name:{{name}}
+</h3>
+<hr>
+<h3>
+    Fuse Directive:
+</h3>
+<div fuseDirective>Fuse Directive Content</div>
+<hr>
+
+<h3>
+    Fuse Name Getter Component:
+</h3>
+<fuse-name-getter [nameValue]="name"></fuse-name-getter>
+
+<hr>
+
+<input type="text" [value]="name2" (change)="name2=$event.target.value">
+
+<button md-button (click)="changeName('sercan')">
+    {{name2}}
+</button>

src/app/core/fuse-component/fuse.component.scss

@@ -0,0 +1,11 @@
+:host {
+    background: #f7f7f7;
+    display: block;
+    font-family: Roboto;
+    margin: 48px;
+    padding: 24px;
+    h3 {
+        color: #616161;
+        font-weight: bold;
+    }
+}

src/app/core/fuse-component/fuse.component.ts

@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Input, OnInit, Output} from '@angular/core';
+import {Component, Directive, DoCheck, ElementRef, Input, OnInit, Output} from '@angular/core';
 
 @Directive({
     selector: '[fuseDirective]'
@@ -39,19 +39,25 @@ export class NameGetterComponent implements OnInit
 }
 
 @Component({
-    selector   : 'fuse-component',
+    selector   : 'fuse-fuse',
     templateUrl: './fuse.component.html',
     styleUrls  : ['./fuse.component.scss']
 })
-export class FuseComponent implements OnInit
+export class FuseComponent implements OnInit, DoCheck
 {
     name2: string;
     @Input('name') name: string;
 
+
     constructor()
     {
     }
 
+    public changeName(name)
+    {
+        console.info('name change emit');
+
+    }
 
     ngOnInit()
     {
@@ -59,4 +65,10 @@ export class FuseComponent implements OnInit
         console.log(this.name);
         console.info('on init');
     }
+
+    ngDoCheck()
+    {
+        console.info('ngDoCheck');
+
+    }
 }

src/app/core/layout/layout.component.html

@@ -0,0 +1,5 @@
+
+<router-outlet></router-outlet>
+<p>
+    layout works!
+</p>

src/app/core/layout/layout.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/layout/layout.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fuse-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/material.module.ts

@@ -0,0 +1,107 @@
+import {NgModule} from '@angular/core';
+import {
+    MdAutocompleteModule,
+    MdButtonModule,
+    MdButtonToggleModule,
+    MdCheckboxModule,
+    MdToolbarModule,
+    MdTooltipModule,
+    MdCardModule,
+    MdChipsModule,
+    MdCoreModule,
+    MdDatepickerModule,
+    MdDialogModule,
+    MdExpansionModule,
+    MdGridListModule,
+    MdIconModule,
+    MdInputModule,
+    MdListModule,
+    MdMenuModule,
+    MdNativeDateModule,
+    MdPaginatorModule,
+    MdProgressBarModule,
+    MdProgressSpinnerModule,
+    MdRadioModule,
+    MdRippleModule,
+    MdSelectModule,
+    MdSidenavModule,
+    MdSliderModule,
+    MdSlideToggleModule,
+    MdSnackBarModule,
+    MdSortModule,
+    MdTableModule,
+    MdTabsModule,
+} from '@angular/material';
+
+@NgModule({
+    imports: [
+        MdAutocompleteModule,
+        MdButtonModule,
+        MdButtonToggleModule,
+        MdCardModule,
+        MdCheckboxModule,
+        MdChipsModule,
+        MdCoreModule,
+        MdDatepickerModule,
+        MdDialogModule,
+        MdExpansionModule,
+        MdGridListModule,
+        MdIconModule,
+        MdInputModule,
+        MdListModule,
+        MdMenuModule,
+        MdNativeDateModule,
+        MdPaginatorModule,
+        MdProgressBarModule,
+        MdProgressSpinnerModule,
+        MdRadioModule,
+        MdRippleModule,
+        MdSelectModule,
+        MdSidenavModule,
+        MdSliderModule,
+        MdSlideToggleModule,
+        MdSnackBarModule,
+        MdSortModule,
+        MdTableModule,
+        MdTabsModule,
+        MdToolbarModule,
+        MdTooltipModule
+    ],
+    exports: [
+        MdAutocompleteModule,
+        MdButtonModule,
+        MdButtonToggleModule,
+        MdCardModule,
+        MdCheckboxModule,
+        MdChipsModule,
+        MdCoreModule,
+        MdDatepickerModule,
+        MdDialogModule,
+        MdExpansionModule,
+        MdGridListModule,
+        MdIconModule,
+        MdInputModule,
+        MdListModule,
+        MdMenuModule,
+        MdNativeDateModule,
+        MdPaginatorModule,
+        MdProgressBarModule,
+        MdProgressSpinnerModule,
+        MdRadioModule,
+        MdRippleModule,
+        MdSelectModule,
+        MdSidenavModule,
+        MdSliderModule,
+        MdSlideToggleModule,
+        MdSnackBarModule,
+        MdSortModule,
+        MdTableModule,
+        MdTabsModule,
+        MdToolbarModule,
+        MdTooltipModule
+    ],
+})
+export class MaterialModule
+{
+
+}

src/app/core/muse/muse-item.model.ts

@@ -0,0 +1,13 @@
+export class MuseItem
+{
+    name: string;
+
+    constructor(name: string)
+    {
+        this.name = name;
+    }
+    save()
+    {
+        console.info('saved', this.name);
+    }
+}

src/app/core/muse/muse.component.html

@@ -0,0 +1,10 @@
+<p>
+    muse works!
+    <input type="text" #museInput value="secoo">
+</p>
+
+<ul>
+    <li *ngFor="let item of items">
+        {{item.name}}
+    </li>
+</ul>

src/app/core/muse/muse.component.scss

@@ -0,0 +1,11 @@
+:host {
+    background: #f7f7f7;
+    display: block;
+    font-family: Roboto;
+    margin: 48px;
+    padding: 24px;
+    h3 {
+        color: #616161;
+        font-weight: bold;
+    }
+}

src/app/core/muse/muse.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MuseComponent } from './muse.component';
+
+describe('MuseComponent', () => {
+  let component: MuseComponent;
+  let fixture: ComponentFixture<MuseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MuseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MuseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/muse/muse.component.ts

@@ -0,0 +1,45 @@
+import {Component, ElementRef, HostBinding, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {MuseItem} from './muse-item.model';
+
+@Component({
+    selector   : 'fuse-muse',
+    templateUrl: './muse.component.html',
+    styleUrls  : ['./muse.component.scss']
+})
+export class MuseComponent implements OnInit
+{
+    items: MuseItem[] = [];
+    elRef: ElementRef;
+    private renderer: Renderer2;
+    @ViewChild('museInput') museInput: ElementRef;
+    @Input() nameChanged;
+    @Input() @HostBinding('style.backgroundColor') bgColor: string;
+
+
+    /* @Input() set bgColor(bgValue)
+     {
+     //this.elRef.nativeElement.style.backgroundColor = bgValue;
+     // this.museInput.nativeElement.style.backgroundColor = bgValue;
+     //this.renderer.setStyle(this.elRef.nativeElement, 'backgroundColor', bgValue);
+     };
+     */
+    constructor(elRef: ElementRef, renderer: Renderer2)
+    {
+        this.elRef = elRef;
+        this.renderer = renderer;
+    }
+
+    onNameChange()
+    {
+    }
+
+    ngOnInit()
+    {
+        console.warn(this.museInput.nativeElement.value);
+        const sercanItem = new MuseItem('sercan');
+        this.items.push(sercanItem);
+        sercanItem.save();
+
+    }
+
+}

src/app/core/services/layout.service.ts

@@ -0,0 +1,58 @@
+import {EventEmitter, Injectable} from '@angular/core';
+import {NavigationStart, Router} from '@angular/router';
+
+@Injectable()
+export class LayoutService
+{
+    /**
+     * Default Settings
+     * @type {{navigation: string; toolbar: string}}
+     */
+    defaultSettings = {
+        navigation: 'left', // 'right', 'left', 'top', false
+        toolbar   : 'above' // 'above', 'below', false
+    }
+
+    settings;
+
+    settingsChanged = new EventEmitter<{ toolbar: any, navigation: any }>()
+
+    constructor(private router: Router)
+    {
+        // Asign default settings at the init
+        this.settings = {...this.defaultSettings};
+
+        // Reset the default settings whenever navigation starts
+        router.events.subscribe(
+            (event) =>
+            {
+                if ( event instanceof NavigationStart )
+                {
+                    this.settings = {...this.defaultSettings};
+                    this.settingsChanged.emit(this.settings);
+                }
+
+            }
+        );
+    }
+
+    /**
+     * Get Settings
+     * @returns {{navigation: any, toolbar: any}}
+     */
+    getSettings()
+    {
+        return this.settings;
+    }
+
+    /**
+     * Set Settings
+     * @param newSettings
+     */
+    setSettings(newSettings)
+    {
+        Object.assign(this.settings, newSettings);
+        this.settingsChanged.emit(this.settings);
+        console.log('settings changed');
+    }
+}

src/app/core/shared.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {MaterialModule} from './material.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+    imports: [
+        FlexLayoutModule,
+        MaterialModule,
+        CommonModule,
+        FormsModule
+    ],
+    exports: [
+        FlexLayoutModule,
+        MaterialModule,
+        CommonModule,
+        FormsModule
+    ],
+})
+export class SharedModule
+{
+
+}

src/app/fuse-component/fuse.component.html

@@ -1,41 +0,0 @@
-<h3>Normal Buttons</h3>
-<div class="button-row">
-    <button md-button>Flat button</button>
-    <button md-raised-button>Raised button</button>
-    <button md-fab>
-        <md-icon>check</md-icon>
-    </button>
-    <button md-mini-fab>
-        <md-icon>check</md-icon>
-    </button>
-</div>
-
-<h3>Link Buttons</h3>
-<div class="example-button-row">
-    <a md-button routerLink=".">Flat button</a>
-    <a md-raised-button routerLink=".">Raised button</a>
-    <a md-fab routerLink=".">
-        <md-icon>check</md-icon>
-    </a>
-    <a md-mini-fab routerLink=".">
-        <md-icon>check</md-icon>
-    </a>
-</div>
-<h1>
-    {{name}}
-</h1>
-<md-icon svgIcon="thumbs-up"></md-icon>
-
-<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">home</md-icon>
-
-<div fuseDirective></div>
-
-<fuse-name-getter [nameValue]="name">
-
-</fuse-name-getter>
-
-<input type="text"  [value]="name2" (change)="name2=$event.target.value">
-
-<button md-button (click)="name2='Sercan'">
-    {{name2}}
-</button>

src/app/fuse-component/fuse.component.scss

@@ -1,8 +0,0 @@
-:host {
-    background: gray;
-    display: block;
-
-    h3 {
-        color: red;
-    }
-}

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

@@ -0,0 +1,3 @@
+<p>
+  chat works!
+</p>

src/app/main/apps/chat/chat.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatComponent } from './chat.component';
+
+describe('ChatComponent', () => {
+  let component: ChatComponent;
+  let fixture: ComponentFixture<ChatComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/apps/chat/chat.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fuse-chat',
+  templateUrl: './chat.component.html',
+  styleUrls: ['./chat.component.scss']
+})
+export class ChatComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/main/apps/chat/chat.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../../core/shared.module';
+import {RouterModule, Routes} from '@angular/router';
+import {ChatComponent} from './chat.component';
+
+const routes: Routes = [
+    {
+        path: 'apps/chat', component: ChatComponent, children: []
+    }
+]
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        ChatComponent
+    ]
+})
+export class ChatModule
+{
+}

src/app/main/apps/dashboards/project/project.component.html

@@ -0,0 +1,3 @@
+<p>
+  project works!
+</p>

src/app/main/apps/dashboards/project/project.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectComponent } from './project.component';
+
+describe('ProjectComponent', () => {
+  let component: ProjectComponent;
+  let fixture: ComponentFixture<ProjectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/apps/dashboards/project/project.component.ts

@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector   : 'fuse-project',
+    templateUrl: './project.component.html',
+    styleUrls  : ['./project.component.scss']
+})
+export class ProjectComponent implements OnInit
+{
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/app/main/apps/dashboards/project/project.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ProjectComponent} from './project.component';
+import {SharedModule} from '../../../../core/shared.module';
+
+const routes: Routes = [
+    {
+        path: 'apps/dashboards/project', component: ProjectComponent, children: []
+    }
+]
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        ProjectComponent
+    ]
+})
+export class ProjectModule
+{
+}
+

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

@@ -0,0 +1,13 @@
+<md-sidenav-container id="mail" class="example-sidenav-fab-container" fxLayout="row" fxfill>
+
+    <md-sidenav #sidenav mode="side" opened="true" fxFlex="240px">
+        <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
+    </md-sidenav>
+
+    <div class="content">
+        <a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
+            <md-icon>menu</md-icon>
+        </a>
+        <router-outlet name="view"></router-outlet>
+    </div>
+</md-sidenav-container>

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

@@ -0,0 +1,5 @@
+:host, #mail {
+    width: 100%;
+    height: 100%;
+}
+

src/app/main/apps/mail/mail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MailComponent } from './mail.component';
+
+describe('MailComponent', () => {
+  let component: MailComponent;
+  let fixture: ComponentFixture<MailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {LayoutService} from '../../../core/services/layout.service';
+
+@Component({
+    selector   : 'fuse-mail',
+    templateUrl: './mail.component.html',
+    styleUrls  : ['./mail.component.scss']
+})
+export class MailComponent implements OnInit
+{
+
+    constructor(private layoutService: LayoutService)
+    {
+        this.layoutService.setSettings({
+            toolbar   : 'below',
+            navigation: 'left'
+        });
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+}

src/app/main/apps/mail/mail.module.ts

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../../core/shared.module';
+import {RouterModule, Routes} from '@angular/router';
+import {MailComponent} from './mail.component';
+import {MainSidenavComponent} from './sidenavs/main/main-sidenav.component';
+import {ClassicViewComponent} from './views/classic/classic-view.component';
+
+const routes: Routes = [
+    {
+        path: 'apps/mail', component: MailComponent, children: [
+        {path: '', component: ClassicViewComponent, outlet: 'view'}
+    ]
+    }
+]
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        MailComponent,
+        MainSidenavComponent,
+        ClassicViewComponent
+    ]
+})
+export class MailModule
+{
+}

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

@@ -0,0 +1,3 @@
+<p>
+  main sidenav
+</p>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainSidenavComponent } from './main-sidenav.component';
+
+describe('MainSidenavComponent', () => {
+  let component: MainSidenavComponent;
+  let fixture: ComponentFixture<MainSidenavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainSidenavComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainSidenavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,17 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+    selector   : 'fuse-mail-main-sidenav',
+    templateUrl: './main-sidenav.component.html',
+    styleUrls  : ['./main-sidenav.component.scss']
+})
+export class MainSidenavComponent implements OnInit
+{
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+}

src/app/main/apps/mail/views/classic/classic-view.component.html

@@ -0,0 +1,3 @@
+<p>
+  classic view
+</p>

src/app/main/apps/mail/views/classic/classic-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClassicViewComponent } from './classic-view.component';
+
+describe('ClassicViewComponent', () => {
+  let component: ClassicViewComponent;
+  let fixture: ComponentFixture<ClassicViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClassicViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClassicViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/apps/mail/views/classic/classic-view.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'fuse-mail-classic-view',
+  templateUrl: './classic-view.component.html',
+  styleUrls: ['./classic-view.component.scss']
+})
+export class ClassicViewComponent implements OnInit {
+
+  constructor() {}
+
+  ngOnInit() {
+  }
+
+}

src/app/material.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {MdButtonModule, MdCheckboxModule} from '@angular/material';
-
-@NgModule({
-    imports: [
-        MdButtonModule,
-        MdCheckboxModule
-    ],
-    exports: [
-        MdButtonModule,
-        MdCheckboxModule
-    ],
-})
-export class MaterialModule
-{
-
-}

src/app/navigation/nav-collapse/nav-collapse.component.html

@@ -0,0 +1,10 @@
+<a class="nav-link" [routerLink]="[item.url]" md-ripple>
+    <md-icon *ngIf="item.icon">{{item.icon}}</md-icon>
+    <span>{{item.title}}</span>
+</a>
+<div class="children">
+    <ng-container *ngFor="let item of item.children">
+        <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
+        <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
+    </ng-container>
+</div>

src/app/navigation/nav-collapse/nav-collapse.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavCollapseComponent } from './nav-collapse.component';
+
+describe('NavCollapseComponent', () => {
+  let component: NavCollapseComponent;
+  let fixture: ComponentFixture<NavCollapseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavCollapseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavCollapseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navigation/nav-collapse/nav-collapse.component.ts

@@ -0,0 +1,21 @@
+import {Component, HostBinding, Input, OnInit} from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-collapse',
+    templateUrl: './nav-collapse.component.html',
+    styleUrls  : ['./nav-collapse.component.scss']
+})
+export class NavCollapseComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-collapse nav-item';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/app/navigation/nav-item/nav-item.component.html

@@ -0,0 +1,4 @@
+<a class="nav-link" [routerLink]="[item.url]" routerLinkActive="active" md-ripple>
+    <md-icon *ngIf="item.icon">{{item.icon}}</md-icon>
+    <span>{{item.title}}</span>
+</a>

src/app/navigation/nav-item/nav-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavItemComponent } from './nav-item.component';
+
+describe('NavItemComponent', () => {
+  let component: NavItemComponent;
+  let fixture: ComponentFixture<NavItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navigation/nav-item/nav-item.component.ts

@@ -0,0 +1,21 @@
+import {Component, HostBinding, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-item',
+    templateUrl: './nav-item.component.html',
+    styleUrls  : ['./nav-item.component.scss']
+})
+export class NavItemComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-item';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/app/navigation/nav-subheader/nav-subheader.component.html

@@ -0,0 +1 @@
+<span>{{ item.title }}</span>

src/app/navigation/nav-subheader/nav-subheader.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavSubheaderComponent } from './nav-subheader.component';
+
+describe('NavSubheaderComponent', () => {
+  let component: NavSubheaderComponent;
+  let fixture: ComponentFixture<NavSubheaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavSubheaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavSubheaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navigation/nav-subheader/nav-subheader.component.ts

@@ -0,0 +1,21 @@
+import {Component, HostBinding, Input, OnInit} from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-subheader',
+    templateUrl: './nav-subheader.component.html',
+    styleUrls  : ['./nav-subheader.component.scss']
+})
+export class NavSubheaderComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-subheader';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/app/navigation/navigation.component.html

@@ -0,0 +1,11 @@
+<div id="main-navigation">
+    <ng-container *ngFor="let item of navigation">
+
+        <fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>
+
+        <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
+
+        <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
+
+    </ng-container>
+</div>

src/app/navigation/navigation.component.scss

@@ -0,0 +1,82 @@
+@import '../../theme-config';
+
+#main-navigation {
+    margin: 0;
+    padding: 0;
+
+    .nav-subheader {
+        display: flex;
+        align-items: center;
+        height: 56px;
+        color: rgba(0, 0, 0, .54);
+        font-weight: 500;
+        padding-left: 24px;
+    }
+
+    .nav-item {
+
+        .nav-link {
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            height: 48px;
+            padding: 0 24px;
+            position: relative;
+            overflow: hidden;
+            background-color: map-get($background, raised-button);
+            color: map_get($foreground, text);
+
+            &:hover {
+                background-color: map-get($background, hover);
+            }
+
+            .mat-ripple-element {
+                background-color: map-get($background, hover);
+            }
+
+            &.active {
+                background-color: mat-color($accent);
+
+                .mat-ripple-element {
+                    background-color: mat-color($accent, default-contrast, 0.1);
+                }
+
+                &, .mat-icon {
+                    color: mat-color($accent, default-contrast);
+                }
+            }
+
+            .mat-icon {
+                font-size: 16px;
+                width: 16px;
+                height: 16px;
+                line-height: 16px;
+                color: map_get($mat-light-theme-foreground, icon);;
+                margin-right: 16px;
+            }
+        }
+
+        &.nav-collapse {
+
+            > .children {
+
+                > .nav-item {
+
+                    > .nav-link {
+                        padding-left: 56px;
+                    }
+
+                    > .children {
+
+                        > .nav-item {
+
+                            > .nav-link {
+                                padding-left: 72px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/navigation/navigation.component.ts

@@ -0,0 +1,25 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {FuseNavigation} from './navigation.model';
+
+@Component({
+    selector   : 'fuse-navigation',
+    templateUrl: './navigation.component.html',
+    styleUrls  : ['./navigation.component.scss'],
+    providers  : [FuseNavigation],
+    encapsulation: ViewEncapsulation.None
+
+})
+export class NavigationComponent implements OnInit
+{
+    navigation: object[];
+
+    constructor(fuseNavigation: FuseNavigation)
+    {
+        this.navigation = fuseNavigation.array;
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/app/navigation/navigation.model.ts

@@ -0,0 +1,415 @@
+export class FuseNavigation
+{
+    array = [
+        {
+            'title': 'APPS',
+            'type' : 'subheader'
+        },
+        {
+            'title'   : 'Dashboards',
+            'type'    : 'nav-collapse',
+            'icon'    : 'dashboard',
+            'url'     : 'apps/dashboards',
+            'children': [
+                {
+                    'type' : 'nav-item',
+                    'title': 'Project',
+                    'url'  : 'apps/dashboards/project'
+                },
+                {
+                    'type' : 'nav-item',
+                    'title': 'Server',
+                    'url'  : 'apps-dashboards-server'
+                }
+            ]
+        },
+        {
+            'title': 'Calendar',
+            'type' : 'nav-item',
+            'icon' : 'today',
+            'url'  : 'apps-calendar'
+        },
+        {
+            'title'   : 'Ecommerce',
+            'type'    : 'nav-collapse',
+            'icon'    : 'shopping_cart',
+            'url'     : 'apps-e-commerce-',
+            'children': [
+                {
+                    'title': 'Products',
+                    'type' : 'nav-item',
+                    'url'  : 'apps-e-commerce-products'
+                },
+                {
+                    'title': 'Product',
+                    'type' : 'nav-item',
+                    'url'  : 'apps-e-commerce-product'
+                },
+                {
+                    'title': 'Orders',
+                    'type' : 'nav-item',
+                    'url'  : 'apps-e-commerce-orders'
+                }
+            ]
+        },
+        {
+            'title': 'Mail',
+            'type' : 'nav-item',
+            'icon' : 'email',
+            'url'  : 'apps/mail'
+        },
+        {
+            'title': 'Chat',
+            'type' : 'nav-item',
+            'icon' : 'chat',
+            'url'  : 'apps/chat'
+        },
+        {
+            'title': 'File Manager',
+            'type' : 'nav-item',
+            'icon' : 'folder',
+            'url'  : 'apps-file-manager'
+        },
+        {
+            'title': 'Contacts',
+            'type' : 'nav-item',
+            'icon' : 'account_box',
+            'url'  : 'apps-contacts'
+        },
+        {
+            'title': 'To-Do',
+            'type' : 'nav-item',
+            'icon' : 'checkbox_cricle',
+            'url'  : 'apps-todo'
+        },
+        {
+            'title': 'PAGES',
+            'type' : 'subheader'
+        },
+        {
+            'title'   : 'Authentication',
+            'type'    : 'nav-collapse',
+            'icon'    : 'lock',
+            'url'     : 'pages-auth-',
+            'children': [
+                {
+                    'title': 'Login',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-login'
+                },
+                {
+                    'title': 'Login v2',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-login-v2'
+                },
+                {
+                    'title': 'Register',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-register'
+                },
+                {
+                    'title': 'Register v2',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-register-v2'
+                },
+                {
+                    'title': 'Forgot Password',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-forgot-password'
+                },
+                {
+                    'title': 'Reset Password',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-reset-password'
+                },
+                {
+                    'title': 'Lock Screen',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-auth-lock-screen'
+                }
+            ]
+        },
+        {
+            'title': 'Coming Soon',
+            'type' : 'nav-item',
+            'icon' : 'alarm',
+            'url'  : 'pages-coming-soon'
+        },
+        {
+            'title'   : 'Errors',
+            'type'    : 'nav-collapse',
+            'icon'    : 'error',
+            'url'     : 'pages-errors-',
+            'children': [
+                {
+                    'title': '404',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-errors-404'
+                },
+                {
+                    'title': '500',
+                    'type' : 'nav-item',
+                    'url'  : 'pages-errors-500'
+                }
+            ]
+        },
+        {
+            'title': 'Maintenance',
+            'type' : 'nav-item',
+            'icon' : 'build',
+            'url'  : 'pages-maintenance'
+        },
+        {
+            'title': 'Profile',
+            'type' : 'nav-item',
+            'icon' : 'account',
+            'url'  : 'pages-profile'
+        },
+        {
+            'title': 'Search',
+            'type' : 'nav-item',
+            'icon' : 'search',
+            'url'  : 'pages-search'
+        },
+        {
+            'title': 'USER INTERFACE',
+            'type' : 'subheader'
+        },
+        {
+            'title'   : 'Elements',
+            'type'    : 'nav-collapse',
+            'icon'    : 'layers',
+            'url'     : 'user-interface-elements-',
+            'children': [
+                {
+                    'title': 'Alerts',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-alerts'
+                },
+                {
+                    'title': 'Badges',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-badges'
+                },
+                {
+                    'title': 'Breadcrumb',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-breadcrumb'
+                },
+                {
+                    'title': 'Buttons',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-buttons'
+                },
+                {
+                    'title': 'Button Group',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-button-group'
+                },
+                {
+                    'title': 'Cards',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-cards'
+                },
+                {
+                    'title': 'Dropdowns',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-dropdowns'
+                },
+                {
+                    'title': 'Forms',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-forms'
+                },
+                {
+                    'title': 'Input Group',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-input-group'
+                },
+                {
+                    'title': 'Jumbotron',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-jumbotron'
+                },
+                {
+                    'title': 'List Group',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-list-group'
+                },
+                {
+                    'title': 'Navs',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-navs'
+                },
+                {
+                    'title': 'Navbar',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-navbar'
+                },
+                {
+                    'title': 'Pagination',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-pagination'
+                },
+                {
+                    'title': 'Progress',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-elements-progress'
+                }
+            ]
+        },
+        {
+            'title'   : 'Tables',
+            'type'    : 'nav-collapse',
+            'icon'    : 'border_all',
+            'url'     : 'user-interface-tables-',
+            'children': [
+                {
+                    'title': 'Simple Table',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-tables-simple-table'
+                },
+                {
+                    'title': 'Data Table',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-tables-data-table'
+                }
+            ]
+        },
+        {
+            'title'   : 'Page Layouts',
+            'type'    : 'nav-collapse',
+            'icon'    : 'view_quilt',
+            'url'     : 'user-interface-page-layouts-',
+            'children': [
+                {
+                    'title'   : 'Carded',
+                    'type'    : 'nav-collapse',
+                    'url'     : 'user-interface-page-layouts-carded-',
+                    'children': [
+                        {
+                            'title': 'Full Width',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-carded-full-width'
+                        },
+                        {
+                            'title': 'Left Sidebar',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-carded-left-sidebar'
+                        },
+                        {
+                            'title': 'Right Sidebar',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-carded-right-sidebar'
+                        }
+                    ]
+                },
+                {
+                    'title'   : 'Simple',
+                    'type'    : 'nav-collapse',
+                    'url'     : 'user-interface-page-layouts-simple-',
+                    'children': [
+                        {
+                            'title': 'Full Width',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-full-width'
+                        },
+                        {
+                            'title': 'Left Sidebar',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-left-sidebar'
+                        },
+                        {
+                            'title': 'Left Sidebar Inner',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-left-sidebar-inner'
+                        },
+                        {
+                            'title': 'Left Sidebar Floating',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-left-sidebar-floating'
+                        },
+                        {
+                            'title': 'Right Sidebar',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-right-sidebar'
+                        },
+                        {
+                            'title': 'Right Sidebar Inner',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-right-sidebar-inner'
+                        },
+                        {
+                            'title': 'Right Sidebar Floating',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-right-sidebar-floating'
+                        },
+                        {
+                            'title': 'Tabbed',
+                            'type' : 'nav-item',
+                            'url'  : 'user-interface-page-layouts-simple-tabbed'
+                        }
+                    ]
+                },
+                {
+                    'title': 'Blank',
+                    'type' : 'nav-item',
+                    'url'  : 'user-interface-page-layouts-blank'
+                }
+            ]
+        },
+        {
+            'title': 'Colors',
+            'type' : 'nav-item',
+            'icon' : 'color_lens',
+            'url'  : 'user-interface-colors'
+        },
+        {
+            'title': 'COMPONENTS',
+            'type' : 'subheader'
+        },
+        {
+            'title'   : 'Charts',
+            'type'    : 'nav-collapse',
+            'url'     : 'components-charts-',
+            'icon'    : 'poll',
+            'children': [
+                {
+                    'title': 'nvD3',
+                    'type' : 'nav-item',
+                    'url'  : 'components-charts-nvd3'
+                }
+            ]
+        },
+        {
+            'title': 'Collapse',
+            'type' : 'nav-item',
+            'icon' : 'add_box',
+            'url'  : 'components-collapse'
+        },
+        {
+            'title': 'Modal',
+            'type' : 'nav-item',
+            'icon' : 'picture_in_picture',
+            'url'  : 'components-modal'
+        },
+        {
+            'title': 'Popovers',
+            'type' : 'nav-item',
+            'icon' : 'chat_buble',
+            'url'  : 'components-popovers'
+        },
+        {
+            'title': 'Snackbar',
+            'type' : 'nav-item',
+            'icon' : 'call_to_action',
+            'url'  : 'components-snackbar'
+        },
+        {
+            'title': 'Tooltips',
+            'type' : 'nav-item',
+            'icon' : 'live_help',
+            'url'  : 'components-tooltips'
+        }
+    ];
+}

src/app/navigation/navigation.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../core/shared.module';
+import {RouterModule, Routes} from '@angular/router';
+import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component';
+import {NavigationComponent} from './navigation.component';
+import {NavItemComponent} from './nav-item/nav-item.component';
+import {NavCollapseComponent} from './nav-collapse/nav-collapse.component';
+
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule
+    ],
+    exports     : [
+        NavigationComponent
+    ],
+    declarations: [
+        NavigationComponent,
+        NavSubheaderComponent,
+        NavItemComponent,
+        NavCollapseComponent
+    ]
+})
+export class NavigationModule
+{
+}

src/app/toolbar/toolbar.component.html

@@ -0,0 +1,9 @@
+<md-toolbar>
+
+    <a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
+        <md-icon>menu</md-icon>
+    </a>
+
+    <span>Toolbar</span>
+
+</md-toolbar>

src/app/toolbar/toolbar.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+    selector   : 'fuse-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls  : ['./toolbar.component.scss']
+})
+export class ToolbarComponent implements OnInit
+{
+    @Input() sidenav;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

src/index.html

@@ -1,15 +1,24 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Fuse2</title>
-  <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+    <head>
+
+        <meta charset="utf-8">
+        <title>Fuse2</title>
+        <base href="/">
+
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+
+    </head>
+
+    <body class="mat-body">
+
+        <fuse-root></fuse-root>
+        
+    </body>
+
 </html>

src/styles.scss

@@ -1,6 +1,33 @@
-/* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import './theme-config';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($theme);
+
+// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
+@include mat-base-typography($custom-typography);
+
+// Override typography for a specific Angular Material components.
+@include mat-checkbox-typography($custom-typography);
+
+// Override typography for all Angular Material, including mat-base-typography and all components.
+@include angular-material-typography($custom-typography);
+
+html {
 
-h3 {
-    font-weight: bold;
+}
+
+html, body {
+    margin: 0;
+}
+
+html, body, fuse-root, #wrapper, #content, .mat-sidenav-content {
+    width: 100%;
+    height: 100%;
 }

src/theme-config.scss

@@ -0,0 +1,26 @@
+@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$primary: mat-palette($mat-indigo);
+$accent: mat-palette($mat-blue, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$theme: mat-light-theme($primary, $accent, $warn);
+
+$custom-typography: mat-typography-config(
+        $font-family: 'Roboto, "Helvetica Neue", sans-serif'
+);
+
+$background: map-get($theme, background);
+$foreground: map-get($theme, foreground);