From a8844e8b46537c1e3775d9ca1936e32c63705bd0 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 12 Jul 2017 15:35:07 +0300
Subject: [PATCH] fuse2...

---
 .angular-cli.json                             | 104 +--
 .floo                                         |   3 +
 .flooignore                                   |   7 +
 package-lock.json                             | 655 ++++++++++++------
 package.json                                  |  31 +-
 src/app/app.component.html                    |  75 --
 src/app/app.component.spec.ts                 |  32 -
 src/app/app.component.ts                      |  37 +-
 src/app/app.module.ts                         |  33 +-
 .../layout/content/content.component.html}    |   4 -
 .../layout/content/content.component.scss     |   3 +
 .../layout/content/content.component.ts       |  19 +
 .../components/layout/layout.component.html   |  27 +
 .../components/layout/layout.component.scss   |  23 +
 .../components/layout/layout.component.ts     |  30 +
 .../layout/navbar/navbar-toggle.directive.ts  |  27 +
 .../layout/navbar/navbar.component.html       |  17 +
 .../layout/navbar/navbar.component.scss       |  86 +++
 .../layout/navbar/navbar.component.ts         | 125 ++++
 .../layout/navbar/navbar.service.ts           |  21 +
 .../layout/toolbar/toolbar.component.html     |   9 +
 .../layout}/toolbar/toolbar.component.scss    |   0
 .../layout}/toolbar/toolbar.component.ts      |   3 +-
 .../nav-collapse/nav-collapse.component.html  |   0
 .../nav-collapse/nav-collapse.component.scss  |   3 +-
 .../nav-collapse.component.spec.ts            |   0
 .../nav-collapse/nav-collapse.component.ts    |   2 +-
 .../nav-item/nav-item.component.html          |   0
 .../nav-item/nav-item.component.scss          |   0
 .../nav-item/nav-item.component.spec.ts       |   0
 .../navigation/nav-item/nav-item.component.ts |   0
 .../nav-subheader.component.html              |   0
 .../nav-subheader.component.scss              |   0
 .../nav-subheader.component.spec.ts           |   0
 .../nav-subheader/nav-subheader.component.ts  |   0
 .../navigation/navigation.component.html      |   0
 .../navigation/navigation.component.scss      |   5 +-
 .../navigation/navigation.component.ts        |   0
 .../navigation/navigation.model.ts            |   0
 .../navigation/navigation.module.ts           |   2 +-
 .../navigation/navigation.service.ts          |   0
 .../components/sidenav/sidenav.component.html |  16 +
 .../components/sidenav/sidenav.component.scss |  28 +
 .../components/sidenav/sidenav.component.ts   |  45 ++
 src/app/core/layout/layout.component.scss     |   0
 src/app/core/layout/layout.component.spec.ts  |  25 -
 src/app/core/layout/layout.component.ts       |  15 -
 src/app/core/{ => modules}/material.module.ts |   0
 src/app/core/{ => modules}/shared.module.ts   |   0
 src/app/core/scss/core.scss                   |  22 +
 src/app/core/scss/fuse.scss                   |   5 +
 src/app/core/scss/mixins/_breakpoints.scss    |  24 +
 .../core/scss/variables/_theme-variables.scss |  17 +
 src/app/core/services/layout.service.ts       |  35 +-
 src/app/core/services/match-media.service.ts  |  77 ++
 src/app/main/apps/chat/chat.component.spec.ts |  25 -
 src/app/main/apps/chat/chat.module.ts         |   4 +-
 .../dashboards/project/project.component.scss |   4 +
 .../project/project.component.spec.ts         |  25 -
 .../apps/dashboards/project/project.module.ts |   2 +-
 src/app/main/apps/mail/mail.component.spec.ts |  25 -
 src/app/main/apps/mail/mail.module.ts         |  26 +-
 .../main/main-sidenav.component.spec.ts       |  25 -
 .../classic/classic-view.component.spec.ts    |  25 -
 .../fullwidth/fullwidth.component.spec.ts     |  25 -
 .../carded/fullwidth/fullwidth.module.ts      |   2 +-
 src/app/toolbar/toolbar.component.html        |   9 -
 src/index.html                                |   3 +-
 src/styles.scss                               |  40 +-
 src/theme-config.scss                         |  26 -
 tslint.json                                   | 259 ++++---
 71 files changed, 1361 insertions(+), 856 deletions(-)
 create mode 100644 .floo
 create mode 100644 .flooignore
 delete mode 100644 src/app/app.component.spec.ts
 rename src/app/core/{layout/layout.component.html => components/layout/content/content.component.html} (53%)
 create mode 100644 src/app/core/components/layout/content/content.component.scss
 create mode 100644 src/app/core/components/layout/content/content.component.ts
 create mode 100644 src/app/core/components/layout/layout.component.html
 create mode 100644 src/app/core/components/layout/layout.component.scss
 create mode 100644 src/app/core/components/layout/layout.component.ts
 create mode 100644 src/app/core/components/layout/navbar/navbar-toggle.directive.ts
 create mode 100644 src/app/core/components/layout/navbar/navbar.component.html
 create mode 100644 src/app/core/components/layout/navbar/navbar.component.scss
 create mode 100644 src/app/core/components/layout/navbar/navbar.component.ts
 create mode 100644 src/app/core/components/layout/navbar/navbar.service.ts
 create mode 100644 src/app/core/components/layout/toolbar/toolbar.component.html
 rename src/app/{ => core/components/layout}/toolbar/toolbar.component.scss (100%)
 rename src/app/{ => core/components/layout}/toolbar/toolbar.component.ts (82%)
 rename src/app/{ => core/components}/navigation/nav-collapse/nav-collapse.component.html (100%)
 rename src/app/{ => core/components}/navigation/nav-collapse/nav-collapse.component.scss (94%)
 rename src/app/{ => core/components}/navigation/nav-collapse/nav-collapse.component.spec.ts (100%)
 rename src/app/{ => core/components}/navigation/nav-collapse/nav-collapse.component.ts (98%)
 rename src/app/{ => core/components}/navigation/nav-item/nav-item.component.html (100%)
 rename src/app/{ => core/components}/navigation/nav-item/nav-item.component.scss (100%)
 rename src/app/{ => core/components}/navigation/nav-item/nav-item.component.spec.ts (100%)
 rename src/app/{ => core/components}/navigation/nav-item/nav-item.component.ts (100%)
 rename src/app/{ => core/components}/navigation/nav-subheader/nav-subheader.component.html (100%)
 rename src/app/{ => core/components}/navigation/nav-subheader/nav-subheader.component.scss (100%)
 rename src/app/{ => core/components}/navigation/nav-subheader/nav-subheader.component.spec.ts (100%)
 rename src/app/{ => core/components}/navigation/nav-subheader/nav-subheader.component.ts (100%)
 rename src/app/{ => core/components}/navigation/navigation.component.html (100%)
 rename src/app/{ => core/components}/navigation/navigation.component.scss (94%)
 rename src/app/{ => core/components}/navigation/navigation.component.ts (100%)
 rename src/app/{ => core/components}/navigation/navigation.model.ts (100%)
 rename src/app/{ => core/components}/navigation/navigation.module.ts (92%)
 rename src/app/{ => core/components}/navigation/navigation.service.ts (100%)
 create mode 100644 src/app/core/components/sidenav/sidenav.component.html
 create mode 100644 src/app/core/components/sidenav/sidenav.component.scss
 create mode 100644 src/app/core/components/sidenav/sidenav.component.ts
 delete mode 100644 src/app/core/layout/layout.component.scss
 delete mode 100644 src/app/core/layout/layout.component.spec.ts
 delete mode 100644 src/app/core/layout/layout.component.ts
 rename src/app/core/{ => modules}/material.module.ts (100%)
 rename src/app/core/{ => modules}/shared.module.ts (100%)
 create mode 100644 src/app/core/scss/core.scss
 create mode 100644 src/app/core/scss/fuse.scss
 create mode 100644 src/app/core/scss/mixins/_breakpoints.scss
 create mode 100644 src/app/core/scss/variables/_theme-variables.scss
 create mode 100644 src/app/core/services/match-media.service.ts
 delete mode 100644 src/app/main/apps/chat/chat.component.spec.ts
 delete mode 100644 src/app/main/apps/dashboards/project/project.component.spec.ts
 delete mode 100644 src/app/main/apps/mail/mail.component.spec.ts
 delete mode 100644 src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts
 delete mode 100644 src/app/main/apps/mail/views/classic/classic-view.component.spec.ts
 delete mode 100644 src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.spec.ts
 delete mode 100644 src/app/toolbar/toolbar.component.html
 delete mode 100644 src/theme-config.scss

diff --git a/.angular-cli.json b/.angular-cli.json
index 1796f0be..ccf86d4d 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -1,57 +1,57 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "fuse2"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "project": {
+        "name": "fuse2"
     },
-    {
-      "project": "src/tsconfig.spec.json"
+    "apps": [
+        {
+            "root": "src",
+            "outDir": "dist",
+            "assets": [
+                "assets",
+                "favicon.ico"
+            ],
+            "index": "index.html",
+            "main": "main.ts",
+            "polyfills": "polyfills.ts",
+            "test": "test.ts",
+            "tsconfig": "tsconfig.app.json",
+            "testTsconfig": "tsconfig.spec.json",
+            "prefix": "app",
+            "styles": [
+                "styles.scss"
+            ],
+            "scripts": [],
+            "environmentSource": "environments/environment.ts",
+            "environments": {
+                "dev": "environments/environment.ts",
+                "prod": "environments/environment.prod.ts"
+            }
+        }
+    ],
+    "e2e": {
+        "protractor": {
+            "config": "./protractor.conf.js"
+        }
     },
-    {
-      "project": "e2e/tsconfig.e2e.json"
+    "lint": [
+        {
+            "project": "src/tsconfig.app.json"
+        },
+        {
+            "project": "src/tsconfig.spec.json"
+        },
+        {
+            "project": "e2e/tsconfig.e2e.json"
+        }
+    ],
+    "test": {
+        "karma": {
+            "config": "./karma.conf.js"
+        }
+    },
+    "defaults": {
+        "styleExt": "scss",
+        "component": {}
     }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  }
 }
diff --git a/.floo b/.floo
new file mode 100644
index 00000000..d98f0ddc
--- /dev/null
+++ b/.floo
@@ -0,0 +1,3 @@
+{
+    "url": "https://floobits.com/srcn/Fuse2"
+}
\ No newline at end of file
diff --git a/.flooignore b/.flooignore
new file mode 100644
index 00000000..6d79ebd9
--- /dev/null
+++ b/.flooignore
@@ -0,0 +1,7 @@
+extern
+node_modules
+tmp
+vendor
+.idea/workspace.xml
+.idea/misc.xml
+assets/.gitkeep
diff --git a/package-lock.json b/package-lock.json
index 76019c2b..87abc48f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@angular/animations": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.2.5.tgz",
-      "integrity": "sha1-EjD2vGoY8quyPifx2a6e+v0aYDE=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.2.6.tgz",
+      "integrity": "sha1-nZyAoRmwwDaTy9I7uvcosVMf/8c=",
       "requires": {
         "tslib": "1.7.1"
       }
@@ -21,19 +21,19 @@
       }
     },
     "@angular/cli": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.1.3.tgz",
-      "integrity": "sha1-AcQUqoONGGKWGo5QgjoKvCY/Zjk=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.2.0.tgz",
+      "integrity": "sha1-39i4mD7DfCttf5AurWA5bXtXFZc=",
       "dev": true,
       "requires": {
         "@ngtools/json-schema": "1.1.0",
-        "@ngtools/webpack": "1.4.2",
+        "@ngtools/webpack": "1.5.0",
         "autoprefixer": "6.7.7",
         "chalk": "1.1.3",
         "common-tags": "1.4.0",
+        "core-object": "3.1.3",
         "css-loader": "0.28.4",
         "cssnano": "3.10.0",
-        "debug": "2.6.8",
         "denodeify": "1.2.1",
         "diff": "3.2.0",
         "ember-cli-normalize-entity-name": "1.0.0",
@@ -41,17 +41,20 @@
         "exports-loader": "0.6.4",
         "extract-text-webpack-plugin": "2.1.2",
         "file-loader": "0.10.1",
-        "fs-extra": "2.1.2",
+        "fs-extra": "3.0.1",
         "get-caller-file": "1.0.2",
         "glob": "7.1.2",
+        "heimdalljs": "0.2.5",
+        "heimdalljs-logger": "0.1.9",
         "html-webpack-plugin": "2.29.0",
         "inflection": "1.12.0",
-        "inquirer": "3.1.1",
+        "inquirer": "3.2.0",
         "isbinaryfile": "3.0.2",
         "istanbul-instrumenter-loader": "2.0.0",
         "json-loader": "0.5.4",
         "less": "2.7.2",
-        "less-loader": "4.0.4",
+        "less-loader": "4.0.5",
+        "license-webpack-plugin": "0.4.3",
         "lodash": "4.17.4",
         "memory-fs": "0.4.1",
         "minimatch": "3.0.4",
@@ -64,8 +67,7 @@
         "postcss-url": "5.1.2",
         "raw-loader": "0.5.1",
         "resolve": "1.3.3",
-        "rimraf": "2.6.1",
-        "rsvp": "3.5.0",
+        "rsvp": "3.6.1",
         "rxjs": "5.4.2",
         "sass-loader": "6.0.6",
         "script-loader": "0.7.0",
@@ -87,32 +89,41 @@
       }
     },
     "@angular/common": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.2.5.tgz",
-      "integrity": "sha1-TVCpW0RM1Yz3BvDandFAfTuDNi4=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.2.6.tgz",
+      "integrity": "sha1-IQrOS9JON1+LQbpS/rNLGKiH1do=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/compiler": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.2.5.tgz",
-      "integrity": "sha1-tIZ0x0VrKw3xBy1w5OZnr4bN34M=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.2.6.tgz",
+      "integrity": "sha1-ZndW1JXKDUXSBhJooQ1Sr4Ofr/Q=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/compiler-cli": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.2.4.tgz",
-      "integrity": "sha1-zOlBooNi/BwEKrhYkPyqseIz3Vc=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.2.6.tgz",
+      "integrity": "sha1-iiE1Ipnz69Hj8XWBBUFkVmyjBr4=",
       "dev": true,
       "requires": {
-        "@angular/tsc-wrapped": "4.2.4",
+        "@angular/tsc-wrapped": "4.2.6",
         "minimist": "1.2.0",
         "reflect-metadata": "0.1.10"
       },
       "dependencies": {
+        "@angular/tsc-wrapped": {
+          "version": "4.2.6",
+          "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.2.6.tgz",
+          "integrity": "sha1-YORLWzjzNA7hTFSlinoHEzxk6Jg=",
+          "dev": true,
+          "requires": {
+            "tsickle": "0.21.6"
+          }
+        },
         "minimist": {
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
@@ -122,38 +133,38 @@
       }
     },
     "@angular/core": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.2.5.tgz",
-      "integrity": "sha1-YcG1iFwmIzLXN/vg9dcRUXWahGQ=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.2.6.tgz",
+      "integrity": "sha1-DByP8BV/B29KfAtyHKFCPxu+Fk4=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/flex-layout": {
-      "version": "2.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.8.tgz",
-      "integrity": "sha1-uc9XhlqTyhWP5W2FCVJCPySNEDs="
+      "version": "2.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-rc.1.tgz",
+      "integrity": "sha1-lvp/hbLEus8nhJE6LWB+LtI9x/E="
     },
     "@angular/forms": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.2.5.tgz",
-      "integrity": "sha1-p+VcjR9aToU37+Ht14NOSh9ZxuQ=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.2.6.tgz",
+      "integrity": "sha1-nTI5lgjkYDu/GXQXqluU6ApGfrA=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/http": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.2.5.tgz",
-      "integrity": "sha1-P/+OXPjogmK6zRyZYwQxLDxaOu8=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.2.6.tgz",
+      "integrity": "sha1-SZ4roLvB89cbdt6+wDTJWMrxE04=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/language-service": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.2.4.tgz",
-      "integrity": "sha1-XARJh+XVMhGBgWMsVrgCv58hv5o=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.2.6.tgz",
+      "integrity": "sha1-EWCs7OwyQ2OWPtIm1RM0ivow/K0=",
       "dev": true
     },
     "@angular/material": {
@@ -165,38 +176,29 @@
       }
     },
     "@angular/platform-browser": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.2.5.tgz",
-      "integrity": "sha1-2d3+D4EITpjvJKefSF27ES54oMQ=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.2.6.tgz",
+      "integrity": "sha1-oTH/WSIl/mSWvKLJr/YSpNvd9Dc=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.2.5.tgz",
-      "integrity": "sha1-gHbsSohcw6GiPF5UDECn/dP357I=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.2.6.tgz",
+      "integrity": "sha1-TmyK0s1c/BeIBBf3fyo0E895HCY=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
     "@angular/router": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.2.5.tgz",
-      "integrity": "sha1-fzZAiUk6saBurF8MYowPn9sRAI8=",
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.2.6.tgz",
+      "integrity": "sha1-ppGdm2HEX/wV++5ZM5jj/VMtq0Y=",
       "requires": {
         "tslib": "1.7.1"
       }
     },
-    "@angular/tsc-wrapped": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.2.4.tgz",
-      "integrity": "sha1-lW/xTM8gQyQ7DMgjNrIh2+YxWu8=",
-      "dev": true,
-      "requires": {
-        "tsickle": "0.21.6"
-      }
-    },
     "@ngtools/json-schema": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz",
@@ -204,27 +206,36 @@
       "dev": true
     },
     "@ngtools/webpack": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.4.2.tgz",
-      "integrity": "sha1-E2qbOVnpUCnXy2f6z/8QoD0t3b8=",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.5.0.tgz",
+      "integrity": "sha1-tr5Y2FfUH4mZdR1rvD0h6EvJd8o=",
       "dev": true,
       "requires": {
-        "enhanced-resolve": "3.1.0",
+        "enhanced-resolve": "3.3.0",
         "loader-utils": "1.1.0",
         "magic-string": "0.19.1",
         "source-map": "0.5.6"
       }
     },
     "@types/jasmine": {
-      "version": "2.5.45",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.45.tgz",
-      "integrity": "sha1-WJKKYh0BTOarWcWpxBBx9zKLDKk=",
+      "version": "2.5.53",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.53.tgz",
+      "integrity": "sha512-2YNL0jXYuN7w07mb1sMZQ6T6zOvGi83v8UbjhBZ8mhvI1VkQ2STU9XOrTFyvWswMyh5rW1evS+e7qltYJvTqPA==",
       "dev": true
     },
+    "@types/jasminewd2": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.2.tgz",
+      "integrity": "sha1-X2jh5pe/ELxv2Mvy4Aaj1nEsW2Q=",
+      "dev": true,
+      "requires": {
+        "@types/jasmine": "2.5.53"
+      }
+    },
     "@types/node": {
-      "version": "6.0.79",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.79.tgz",
-      "integrity": "sha512-7F3/P6MkTPA0QxOstRqfcnoReCUy5V/QG92cyBoZSPnqdX44L8TtNELSVfN56gAttm3YWj9cEi8FRIPVq0WmeQ==",
+      "version": "6.0.80",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.80.tgz",
+      "integrity": "sha512-FJedmtuVj9Jb2AbI3cKYlAczj+3Lv3I8g2wjricLSRBCW0Oj7kzG4D6gUmgDc2Ptm0A1lat2AuheqK5kdYfswg==",
       "dev": true
     },
     "@types/q": {
@@ -256,9 +267,9 @@
       }
     },
     "acorn": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.0.3.tgz",
-      "integrity": "sha1-xGDfCEkUY/AozLguqzcwvwEIez0=",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.1.1.tgz",
+      "integrity": "sha512-vOk6uEMctu0vQrvuSqFdJyqj1Q0S5VTDL79qtjo+DhRr+1mmaD+tluFSCZqhvi/JUhXSzoZN2BhtstaPEeE8cw==",
       "dev": true
     },
     "acorn-dynamic-import": {
@@ -309,13 +320,13 @@
       }
     },
     "ajv": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.2.0.tgz",
-      "integrity": "sha1-wXNQJMXaLvdcwZBxMHPUTwmL9IY=",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.2.2.tgz",
+      "integrity": "sha1-R8aNaehvXZUxA7AHSpQw3GPaXjk=",
       "dev": true,
       "requires": {
         "co": "4.6.0",
-        "fast-deep-equal": "0.1.0",
+        "fast-deep-equal": "1.0.0",
         "json-schema-traverse": "0.3.1",
         "json-stable-stringify": "1.0.1"
       }
@@ -490,9 +501,9 @@
       "dev": true
     },
     "asap": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.5.tgz",
-      "integrity": "sha1-UidltQw1EEkOUtfc/ghe+bqWlY8=",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
       "dev": true,
       "optional": true
     },
@@ -562,7 +573,7 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000696",
+        "caniuse-db": "1.0.30000700",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "5.2.17",
@@ -892,7 +903,7 @@
       "dev": true,
       "requires": {
         "buffer-xor": "1.0.3",
-        "cipher-base": "1.0.3",
+        "cipher-base": "1.0.4",
         "create-hash": "1.1.3",
         "evp_bytestokey": "1.0.0",
         "inherits": "2.0.3"
@@ -915,7 +926,7 @@
       "integrity": "sha1-2qJ3cXRwki7S/hhZQRihdUOXId0=",
       "dev": true,
       "requires": {
-        "cipher-base": "1.0.3",
+        "cipher-base": "1.0.4",
         "des.js": "1.0.0",
         "inherits": "2.0.3"
       }
@@ -960,8 +971,8 @@
       "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
       "dev": true,
       "requires": {
-        "caniuse-db": "1.0.30000696",
-        "electron-to-chromium": "1.3.14"
+        "caniuse-db": "1.0.30000700",
+        "electron-to-chromium": "1.3.15"
       }
     },
     "buffer": {
@@ -994,9 +1005,9 @@
       "dev": true
     },
     "bytes": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.3.0.tgz",
-      "integrity": "sha1-1baAoWW2IBc5rLYRVCqrwtjOsHA=",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.5.0.tgz",
+      "integrity": "sha1-TJQj6i0lLCcMQbK97+/5u2tiwGo=",
       "dev": true
     },
     "callsite": {
@@ -1038,15 +1049,15 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000696",
+        "caniuse-db": "1.0.30000700",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000696",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000696.tgz",
-      "integrity": "sha1-5x9cYeH5bHo69OeRrF21XhFzdgQ=",
+      "version": "1.0.30000700",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000700.tgz",
+      "integrity": "sha1-l8/Eg4Ze6oV33Ho2dJKbmr9VMJU=",
       "dev": true
     },
     "caseless": {
@@ -1112,12 +1123,13 @@
       }
     },
     "cipher-base": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.3.tgz",
-      "integrity": "sha1-7qvxlEGc6QDaMBjCB9IS8qbfCgc=",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
       "dev": true,
       "requires": {
-        "inherits": "2.0.3"
+        "inherits": "2.0.3",
+        "safe-buffer": "5.1.1"
       }
     },
     "clap": {
@@ -1130,9 +1142,9 @@
       }
     },
     "clean-css": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.4.tgz",
-      "integrity": "sha1-7siBHbJ0V+AHjYypIfqBty+oK/Q=",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.6.tgz",
+      "integrity": "sha1-Wke+tSaZTLT3vzYYilXtO0VSjws=",
       "dev": true,
       "requires": {
         "source-map": "0.5.6"
@@ -1199,7 +1211,7 @@
       "dev": true,
       "requires": {
         "for-own": "1.0.0",
-        "is-plain-object": "2.0.3",
+        "is-plain-object": "2.0.4",
         "kind-of": "3.2.2",
         "shallow-clone": "0.1.2"
       }
@@ -1211,9 +1223,9 @@
       "dev": true
     },
     "coa": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.3.tgz",
-      "integrity": "sha1-G1Sl4dz3fJkEVdTe6pjFZEFtyJM=",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz",
+      "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=",
       "dev": true,
       "requires": {
         "q": "1.5.0"
@@ -1355,34 +1367,18 @@
       }
     },
     "compression": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.6.2.tgz",
-      "integrity": "sha1-zOsSHsydCcUtetDDNQ6pPd1AK8M=",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.0.tgz",
+      "integrity": "sha1-AwyfGY8WQ6BX13anOOki2kNzAS0=",
       "dev": true,
       "requires": {
         "accepts": "1.3.3",
-        "bytes": "2.3.0",
+        "bytes": "2.5.0",
         "compressible": "2.0.10",
-        "debug": "2.2.0",
+        "debug": "2.6.8",
         "on-headers": "1.0.1",
+        "safe-buffer": "5.1.1",
         "vary": "1.1.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-          "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
-          "dev": true,
-          "requires": {
-            "ms": "0.7.1"
-          }
-        },
-        "ms": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-          "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
-          "dev": true
-        }
       }
     },
     "concat-map": {
@@ -1476,6 +1472,15 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz",
       "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4="
     },
+    "core-object": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/core-object/-/core-object-3.1.3.tgz",
+      "integrity": "sha1-3zmbMxG9sMkJ6Krokp/DwcSyWIA=",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3"
+      }
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1521,7 +1526,7 @@
       "integrity": "sha1-YGBCrIuSYnUPSDyt2rD1gZFy2P0=",
       "dev": true,
       "requires": {
-        "cipher-base": "1.0.3",
+        "cipher-base": "1.0.4",
         "inherits": "2.0.3",
         "ripemd160": "2.0.1",
         "sha.js": "2.4.8"
@@ -1533,7 +1538,7 @@
       "integrity": "sha1-rLniIaThe9sHbpBlfEK5PjcmzwY=",
       "dev": true,
       "requires": {
-        "cipher-base": "1.0.3",
+        "cipher-base": "1.0.4",
         "create-hash": "1.1.3",
         "inherits": "2.0.3",
         "ripemd160": "2.0.1",
@@ -1561,9 +1566,9 @@
       }
     },
     "crypto-browserify": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.11.0.tgz",
-      "integrity": "sha1-NlKgkGq5sqfgw85mpAjpV6JIVSI=",
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.11.1.tgz",
+      "integrity": "sha512-Na7ZlwCOqoaW5RwUK1WpXws2kv8mNhWdTlzob0UXulk6G9BDbyiJaGTYBIX61Ozn9l1EPPJpICZb4DaOpT9NlQ==",
       "dev": true,
       "requires": {
         "browserify-cipher": "1.0.0",
@@ -1889,6 +1894,15 @@
             "path-is-absolute": "1.0.1",
             "rimraf": "2.6.1"
           }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11"
+          }
         }
       }
     },
@@ -1987,9 +2001,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.14",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.14.tgz",
-      "integrity": "sha1-ZK8Pnv08PGrNV9cfg7Scp+6cS0M=",
+      "version": "1.3.15",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz",
+      "integrity": "sha1-CDl5NIkcvPrrvRi4KpW1pIETg2k=",
       "dev": true
     },
     "elliptic": {
@@ -2000,7 +2014,7 @@
       "requires": {
         "bn.js": "4.11.7",
         "brorand": "1.1.0",
-        "hash.js": "1.1.2",
+        "hash.js": "1.1.3",
         "hmac-drbg": "1.0.1",
         "inherits": "2.0.3",
         "minimalistic-assert": "1.0.0",
@@ -2123,9 +2137,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.1.0.tgz",
-      "integrity": "sha1-n0tib1dyRe3PSyrYPYbhf09CHew=",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz",
+      "integrity": "sha512-2qbxE7ek3YxPJ1ML6V+satHkzHpJQKWkRHmRx6mfAoW59yP8YH8BFplbegSP+u2hBd6B6KCOpvJQ3dZAP+hkpg==",
       "dev": true,
       "requires": {
         "graceful-fs": "4.1.11",
@@ -2400,9 +2414,9 @@
       "dev": true
     },
     "fast-deep-equal": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-0.1.0.tgz",
-      "integrity": "sha1-XG9FmaumszPuM0Li7ZeGcvEAH40=",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
+      "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8=",
       "dev": true
     },
     "fastparse": {
@@ -2574,13 +2588,14 @@
       }
     },
     "fs-extra": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-2.1.2.tgz",
-      "integrity": "sha1-BGxwFjzvmq1GsOSn+kZ/si1x3jU=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
+      "integrity": "sha1-N5TzeMWLNC6n27sjCVEJxLO2IpE=",
       "dev": true,
       "requires": {
         "graceful-fs": "4.1.11",
-        "jsonfile": "2.4.0"
+        "jsonfile": "3.0.1",
+        "universalify": "0.1.0"
       }
     },
     "fs.realpath": {
@@ -3801,9 +3816,9 @@
       }
     },
     "hash.js": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.2.tgz",
-      "integrity": "sha512-SsNl8Ro2uz5xUTRYq8ysWzX8B7jCj7pLvX3opktaI6ZrTT2YElqjFVJXHJZe+5Aby20c9UC7elCjJDe1dhTaAw==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
+      "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
       "dev": true,
       "requires": {
         "inherits": "2.0.3",
@@ -3828,13 +3843,40 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
+    "heimdalljs": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/heimdalljs/-/heimdalljs-0.2.5.tgz",
+      "integrity": "sha1-aqVDCO7nk7ZCz/nPlHgURfN3MKw=",
+      "dev": true,
+      "requires": {
+        "rsvp": "3.2.1"
+      },
+      "dependencies": {
+        "rsvp": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.2.1.tgz",
+          "integrity": "sha1-B8tKXfJa3Z6Cbrxn3Mn9idsn2Eo=",
+          "dev": true
+        }
+      }
+    },
+    "heimdalljs-logger": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/heimdalljs-logger/-/heimdalljs-logger-0.1.9.tgz",
+      "integrity": "sha1-12raTkW3u294b8nAEKaOsuL68XY=",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.8",
+        "heimdalljs": "0.2.5"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
       "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
       "dev": true,
       "requires": {
-        "hash.js": "1.1.2",
+        "hash.js": "1.1.3",
         "minimalistic-assert": "1.0.0",
         "minimalistic-crypto-utils": "1.0.1"
       }
@@ -3882,13 +3924,13 @@
       "dev": true,
       "requires": {
         "camel-case": "3.0.0",
-        "clean-css": "4.1.4",
+        "clean-css": "4.1.6",
         "commander": "2.9.0",
         "he": "1.1.1",
         "ncname": "1.0.0",
         "param-case": "2.1.1",
         "relateurl": "0.2.7",
-        "uglify-js": "3.0.20"
+        "uglify-js": "3.0.24"
       }
     },
     "html-webpack-plugin": {
@@ -4069,9 +4111,29 @@
       "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
       "dev": true,
       "requires": {
-        "postcss": "6.0.3"
+        "postcss": "6.0.6"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz",
+          "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
+          "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.1.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.0"
+          }
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -4079,20 +4141,20 @@
           "dev": true
         },
         "postcss": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.3.tgz",
-          "integrity": "sha1-t/Vls9lW+7hWXKfB4jnQUG5CfYs=",
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.6.tgz",
+          "integrity": "sha1-u6TVjohPx4yEDRU54Q7dqruPc70=",
           "dev": true,
           "requires": {
-            "chalk": "1.1.3",
+            "chalk": "2.0.1",
             "source-map": "0.5.6",
-            "supports-color": "4.0.0"
+            "supports-color": "4.2.0"
           }
         },
         "supports-color": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.0.0.tgz",
-          "integrity": "sha1-M6fGgKpRLJ0D75KcrLuXTSA9J5A=",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz",
+          "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==",
           "dev": true,
           "requires": {
             "has-flag": "2.0.0"
@@ -4178,13 +4240,13 @@
       "dev": true
     },
     "inquirer": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.1.1.tgz",
-      "integrity": "sha512-H50sHQwgvvaTBd3HpKMVtL/u6LoHDvYym51gd7bGQe/+9HkCE+J0/3N5FJLfd6O6oz44hHewC2Pc2LodzWVafQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.2.0.tgz",
+      "integrity": "sha512-4CyUYMP7lOBkiUU1rR24WGrfRX6SucwbY2Mqb1PdApU24wnTIk4TsnkQwV72dDdIKZ2ycLP+fWCV+tA7wwgoew==",
       "dev": true,
       "requires": {
         "ansi-escapes": "2.0.0",
-        "chalk": "1.1.3",
+        "chalk": "2.0.1",
         "cli-cursor": "2.1.0",
         "cli-width": "2.1.0",
         "external-editor": "2.0.4",
@@ -4195,8 +4257,60 @@
         "rx-lite": "4.0.8",
         "rx-lite-aggregates": "4.0.8",
         "string-width": "2.1.0",
-        "strip-ansi": "3.0.1",
+        "strip-ansi": "4.0.0",
         "through": "2.3.8"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz",
+          "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
+          "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.1.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.0"
+          }
+        },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz",
+          "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==",
+          "dev": true,
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
       }
     },
     "interpret": {
@@ -4359,12 +4473,12 @@
       "dev": true
     },
     "is-plain-object": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.3.tgz",
-      "integrity": "sha1-wVvz5LZrYtcu+vKSWEhmPsvGGbY=",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
       "dev": true,
       "requires": {
-        "isobject": "3.0.0"
+        "isobject": "3.0.1"
       }
     },
     "is-posix-bracket": {
@@ -4425,9 +4539,9 @@
       "dev": true
     },
     "isobject": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.0.tgz",
-      "integrity": "sha1-OVZSF/NmF4nooKDAgNX35rxG4aA=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
     "isstream": {
@@ -4765,9 +4879,9 @@
       "dev": true
     },
     "jsonfile": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-      "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
+      "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
       "dev": true,
       "requires": {
         "graceful-fs": "4.1.11"
@@ -4937,9 +5051,9 @@
       }
     },
     "less-loader": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.0.4.tgz",
-      "integrity": "sha1-tKjEOEPmXGfS6i6xRltcQjPVAGo=",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.0.5.tgz",
+      "integrity": "sha1-rhVadAbKxqzSk9eFWH/P8PR4xN0=",
       "dev": true,
       "requires": {
         "clone": "2.1.1",
@@ -4955,6 +5069,15 @@
         }
       }
     },
+    "license-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha1-+diNTrwEQHoAYejMrCZXH4jlGhY=",
+      "dev": true,
+      "requires": {
+        "object-assign": "4.1.1"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -5409,7 +5532,7 @@
         "buffer": "4.9.1",
         "console-browserify": "1.1.0",
         "constants-browserify": "1.0.0",
-        "crypto-browserify": "3.11.0",
+        "crypto-browserify": "3.11.1",
         "domain-browser": "1.1.7",
         "events": "1.1.1",
         "https-browserify": "0.0.1",
@@ -6143,9 +6266,29 @@
       "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
       "dev": true,
       "requires": {
-        "postcss": "6.0.3"
+        "postcss": "6.0.6"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz",
+          "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
+          "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.1.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.0"
+          }
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -6153,20 +6296,20 @@
           "dev": true
         },
         "postcss": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.3.tgz",
-          "integrity": "sha1-t/Vls9lW+7hWXKfB4jnQUG5CfYs=",
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.6.tgz",
+          "integrity": "sha1-u6TVjohPx4yEDRU54Q7dqruPc70=",
           "dev": true,
           "requires": {
-            "chalk": "1.1.3",
+            "chalk": "2.0.1",
             "source-map": "0.5.6",
-            "supports-color": "4.0.0"
+            "supports-color": "4.2.0"
           }
         },
         "supports-color": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.0.0.tgz",
-          "integrity": "sha1-M6fGgKpRLJ0D75KcrLuXTSA9J5A=",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz",
+          "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==",
           "dev": true,
           "requires": {
             "has-flag": "2.0.0"
@@ -6181,9 +6324,29 @@
       "dev": true,
       "requires": {
         "css-selector-tokenizer": "0.7.0",
-        "postcss": "6.0.3"
+        "postcss": "6.0.6"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz",
+          "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
+          "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.1.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.0"
+          }
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -6191,20 +6354,20 @@
           "dev": true
         },
         "postcss": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.3.tgz",
-          "integrity": "sha1-t/Vls9lW+7hWXKfB4jnQUG5CfYs=",
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.6.tgz",
+          "integrity": "sha1-u6TVjohPx4yEDRU54Q7dqruPc70=",
           "dev": true,
           "requires": {
-            "chalk": "1.1.3",
+            "chalk": "2.0.1",
             "source-map": "0.5.6",
-            "supports-color": "4.0.0"
+            "supports-color": "4.2.0"
           }
         },
         "supports-color": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.0.0.tgz",
-          "integrity": "sha1-M6fGgKpRLJ0D75KcrLuXTSA9J5A=",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz",
+          "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==",
           "dev": true,
           "requires": {
             "has-flag": "2.0.0"
@@ -6219,9 +6382,29 @@
       "dev": true,
       "requires": {
         "css-selector-tokenizer": "0.7.0",
-        "postcss": "6.0.3"
+        "postcss": "6.0.6"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz",
+          "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
+          "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.1.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.0"
+          }
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -6229,20 +6412,20 @@
           "dev": true
         },
         "postcss": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.3.tgz",
-          "integrity": "sha1-t/Vls9lW+7hWXKfB4jnQUG5CfYs=",
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.6.tgz",
+          "integrity": "sha1-u6TVjohPx4yEDRU54Q7dqruPc70=",
           "dev": true,
           "requires": {
-            "chalk": "1.1.3",
+            "chalk": "2.0.1",
             "source-map": "0.5.6",
-            "supports-color": "4.0.0"
+            "supports-color": "4.2.0"
           }
         },
         "supports-color": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.0.0.tgz",
-          "integrity": "sha1-M6fGgKpRLJ0D75KcrLuXTSA9J5A=",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz",
+          "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==",
           "dev": true,
           "requires": {
             "has-flag": "2.0.0"
@@ -6257,9 +6440,29 @@
       "dev": true,
       "requires": {
         "icss-replace-symbols": "1.1.0",
-        "postcss": "6.0.3"
+        "postcss": "6.0.6"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.1.0.tgz",
+          "integrity": "sha1-CcIC1ckX7CMYjKpcnLkXnNlUd1A=",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.0.1.tgz",
+          "integrity": "sha512-Mp+FXEI+FrwY/XYV45b2YD3E8i3HwnEAoFcM0qlZzq/RZ9RwWitt2Y/c7cqRAz70U7hfekqx6qNYthuKFO6K0g==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.1.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.0"
+          }
+        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -6267,20 +6470,20 @@
           "dev": true
         },
         "postcss": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.3.tgz",
-          "integrity": "sha1-t/Vls9lW+7hWXKfB4jnQUG5CfYs=",
+          "version": "6.0.6",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.6.tgz",
+          "integrity": "sha1-u6TVjohPx4yEDRU54Q7dqruPc70=",
           "dev": true,
           "requires": {
-            "chalk": "1.1.3",
+            "chalk": "2.0.1",
             "source-map": "0.5.6",
-            "supports-color": "4.0.0"
+            "supports-color": "4.2.0"
           }
         },
         "supports-color": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.0.0.tgz",
-          "integrity": "sha1-M6fGgKpRLJ0D75KcrLuXTSA9J5A=",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.0.tgz",
+          "integrity": "sha512-Ts0Mu/A1S1aZxEJNG88I4Oc9rcZSBFNac5e27yh4j2mqbhZSSzR1Ah79EYwSn9Zuh7lrlGD2cVGzw1RKGzyLSg==",
           "dev": true,
           "requires": {
             "has-flag": "2.0.0"
@@ -6456,7 +6659,7 @@
       "dev": true,
       "optional": true,
       "requires": {
-        "asap": "2.0.5"
+        "asap": "2.0.6"
       }
     },
     "protractor": {
@@ -6465,7 +6668,7 @@
       "integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
       "dev": true,
       "requires": {
-        "@types/node": "6.0.79",
+        "@types/node": "6.0.80",
         "@types/q": "0.0.32",
         "@types/selenium-webdriver": "2.53.42",
         "blocking-proxy": "0.0.5",
@@ -6989,9 +7192,9 @@
       }
     },
     "rsvp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.5.0.tgz",
-      "integrity": "sha1-pixXOkrk4d/QaX68YkLnnGgeqjQ=",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.1.tgz",
+      "integrity": "sha1-NPSnrChZ97rMj0l4nFYE8eJq5wI=",
       "dev": true
     },
     "run-async": {
@@ -7086,7 +7289,7 @@
       "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
       "dev": true,
       "requires": {
-        "ajv": "5.2.0"
+        "ajv": "5.2.2"
       }
     },
     "script-loader": {
@@ -7842,7 +8045,7 @@
       "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=",
       "dev": true,
       "requires": {
-        "coa": "1.0.3",
+        "coa": "1.0.4",
         "colors": "1.1.2",
         "csso": "2.3.2",
         "js-yaml": "3.7.0",
@@ -8103,9 +8306,9 @@
       "dev": true
     },
     "uglify-js": {
-      "version": "3.0.20",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.20.tgz",
-      "integrity": "sha512-O/c2/N97k1Ms+23VRx6gIAfGdijuW53SlASmXy0FVapK63rQrduHyE+5X6hUtqNiSLLao9Uv6ijotpNe8t991Q==",
+      "version": "3.0.24",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.24.tgz",
+      "integrity": "sha512-IZ7l7MU2j7LIuz6IAFWBOk1dbuQ0QVQsKLffpNPKXuL8NYcFBBQ5QkvMAtfL1+oaBW16344DY4sA26GI9cXzlA==",
       "dev": true,
       "requires": {
         "commander": "2.9.0",
@@ -8146,6 +8349,12 @@
       "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
       "dev": true
     },
+    "universalify": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.0.tgz",
+      "integrity": "sha1-nrHEZR3rzGcMyU8adXYjMruWd3g=",
+      "dev": true
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -8419,12 +8628,12 @@
       "integrity": "sha1-FakdvjSWbYpLmcfWVu/ZKi5ab2o=",
       "dev": true,
       "requires": {
-        "acorn": "5.0.3",
+        "acorn": "5.1.1",
         "acorn-dynamic-import": "2.0.2",
         "ajv": "4.11.8",
         "ajv-keywords": "1.5.1",
         "async": "2.5.0",
-        "enhanced-resolve": "3.1.0",
+        "enhanced-resolve": "3.3.0",
         "interpret": "1.0.3",
         "json-loader": "0.5.4",
         "json5": "0.5.1",
@@ -8627,7 +8836,7 @@
       "requires": {
         "ansi-html": "0.0.7",
         "chokidar": "1.7.0",
-        "compression": "1.6.2",
+        "compression": "1.7.0",
         "connect-history-api-fallback": "1.3.0",
         "express": "4.15.3",
         "html-entities": "1.2.1",
diff --git a/package.json b/package.json
index 86844d05..042b3ce3 100644
--- a/package.json
+++ b/package.json
@@ -12,29 +12,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.5",
+    "@angular/animations": "^4.2.6",
     "@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/common": "^4.2.6",
+    "@angular/compiler": "^4.2.6",
+    "@angular/core": "^4.2.6",
+    "@angular/flex-layout": "^2.0.0-rc.1",
+    "@angular/forms": "^4.2.6",
+    "@angular/http": "^4.2.6",
     "@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",
+    "@angular/platform-browser": "^4.2.6",
+    "@angular/platform-browser-dynamic": "^4.2.6",
+    "@angular/router": "^4.2.6",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.3",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/language-service": "^4.0.0",
-    "@types/jasmine": "2.5.45",
-    "@types/node": "^6.0.79",
+    "@angular/cli": "^1.2.0",
+    "@angular/compiler-cli": "^4.2.6",
+    "@angular/language-service": "^4.2.6",
+    "@types/jasmine": "^2.5.53",
+    "@types/jasminewd2": "^2.0.2",
+    "@types/node": "^6.0.80",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b19708de..bd8fbf88 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,76 +1 @@
-<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">
-    <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>
--->
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index 7d2799ce..00000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
-  }));
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7d8a59b8..cb31e9a7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,33 +1,30 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {LayoutService} from './core/services/layout.service';
+import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-root',
+    selector   : 'body',
     templateUrl: './app.component.html',
-    styleUrls  : ['./app.component.scss'],
-    providers  : [LayoutService]
+    styleUrls  : ['./app.component.scss']
 })
 export class AppComponent implements OnInit
 {
-    layoutSettings: { toolbar: any, navigation: any };
-
-    constructor(private layoutService: LayoutService)
+    constructor(
+        private _renderer: Renderer2,
+        private _elementRef: ElementRef
+    )
     {
-        this.layoutSettings = layoutService.getSettings();
+    }
+
+    addClass(className: string)
+    {
+        this._renderer.addClass(this._elementRef.nativeElement, className);
+    }
+
+    removeClass(className: string)
+    {
+        this._renderer.removeClass(this._elementRef.nativeElement, className);
     }
 
     ngOnInit()
-    {
-        this.layoutService.settingsChanged
-            .subscribe(
-                (newSettings) =>
-                {
-                    this.layoutSettings = newSettings;
-                }
-            )
-    }
-
-    onNameChange()
     {
 
     }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 541a9abc..4ac9c7eb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,18 +4,28 @@ import 'hammerjs';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
 import {RouterModule, Routes} from '@angular/router';
-import {LayoutComponent} from './core/layout/layout.component';
-import {ToolbarComponent} from './toolbar/toolbar.component';
+import {LayoutComponent} from './core/components/layout/layout.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';
-import {NavigationService} from './navigation/navigation.service';
 import {CardedFullWidthModule} from './main/ui/page-layouts/carded/fullwidth/fullwidth.module';
+import {LayoutService} from './core/services/layout.service';
+import {NavbarComponent} from './core/components/layout/navbar/navbar.component';
+import {ToolbarComponent} from './core/components/layout/toolbar/toolbar.component';
+import {NavigationModule} from './core/components/navigation/navigation.module';
+import {NavigationService} from './core/components/navigation/navigation.service';
+import {SidenavComponent} from './core/components/sidenav/sidenav.component';
+import {FuseMatchMedia} from './core/services/match-media.service';
+import {NavbarToggleDirective} from './core/components/layout/navbar/navbar-toggle.directive';
+import {NavbarService} from './core/components/layout/navbar/navbar.service';
+import { ContentComponent } from './core/components/layout/content/content.component';
+import { SharedModule } from './core/modules/shared.module';
 
 const appRoutes: Routes = [
-    {path: '**', redirectTo: 'apps/dashboards/project'}
+    {
+        path      : '**',
+        redirectTo: 'apps/dashboards/project'
+    }
 ];
 
 @NgModule({
@@ -23,22 +33,23 @@ const appRoutes: Routes = [
         AppComponent,
         LayoutComponent,
         ToolbarComponent,
+        NavbarComponent,
+        SidenavComponent,
+        NavbarToggleDirective,
+        ContentComponent
     ],
     imports     : [
         SharedModule,
         BrowserModule,
         BrowserAnimationsModule,
-        RouterModule.forRoot(
-            appRoutes,
-            {enableTracing: true} // <-- debugging purposes only
-        ),
+        RouterModule.forRoot(appRoutes),
         NavigationModule,
         MailModule,
         ChatModule,
         ProjectModule,
         CardedFullWidthModule
     ],
-    providers   : [NavigationService],
+    providers   : [NavigationService, LayoutService, FuseMatchMedia, NavbarService],
     bootstrap   : [AppComponent]
 })
 export class AppModule
diff --git a/src/app/core/layout/layout.component.html b/src/app/core/components/layout/content/content.component.html
similarity index 53%
rename from src/app/core/layout/layout.component.html
rename to src/app/core/components/layout/content/content.component.html
index a171f43f..0680b43f 100644
--- a/src/app/core/layout/layout.component.html
+++ b/src/app/core/components/layout/content/content.component.html
@@ -1,5 +1 @@
-
 <router-outlet></router-outlet>
-<p>
-    layout works!
-</p>
diff --git a/src/app/core/components/layout/content/content.component.scss b/src/app/core/components/layout/content/content.component.scss
new file mode 100644
index 00000000..8fdbe2d4
--- /dev/null
+++ b/src/app/core/components/layout/content/content.component.scss
@@ -0,0 +1,3 @@
+:host {
+
+}
\ No newline at end of file
diff --git a/src/app/core/components/layout/content/content.component.ts b/src/app/core/components/layout/content/content.component.ts
new file mode 100644
index 00000000..c7429377
--- /dev/null
+++ b/src/app/core/components/layout/content/content.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-content',
+    templateUrl: './content.component.html',
+    styleUrls  : ['./content.component.scss']
+})
+export class ContentComponent implements OnInit
+{
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}
diff --git a/src/app/core/components/layout/layout.component.html b/src/app/core/components/layout/layout.component.html
new file mode 100644
index 00000000..9b14ce1e
--- /dev/null
+++ b/src/app/core/components/layout/layout.component.html
@@ -0,0 +1,27 @@
+<!-- TOOLBAR: Above -->
+<ng-container *ngIf="layoutSettings.toolbar === 'above'">
+    <fuse-toolbar></fuse-toolbar>
+</ng-container>
+<!-- / TOOLBAR: Above -->
+
+<div id="wrapper">
+
+    <!-- NAVIGATION: Left -->
+    <ng-container *ngIf="layoutSettings.navigation === 'left'">
+
+        <fuse-navbar></fuse-navbar>
+
+        <div class="content-wrapper">
+
+            <ng-container *ngIf="layoutSettings.toolbar === 'below'">
+                <fuse-toolbar></fuse-toolbar>
+            </ng-container>
+
+            <fuse-content></fuse-content>
+
+        </div>
+
+    </ng-container>
+    <!-- / NAVIGATION: Left -->
+
+</div>
diff --git a/src/app/core/components/layout/layout.component.scss b/src/app/core/components/layout/layout.component.scss
new file mode 100644
index 00000000..bc8837c0
--- /dev/null
+++ b/src/app/core/components/layout/layout.component.scss
@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    #wrapper {
+        display: flex;
+
+        .content-wrapper {
+            display: flex;
+            flex: 1;
+
+            fuse-content {
+                display: flex;
+                width: 100%;
+                height: 100%;
+                overflow-x: hidden;
+                overflow-y: auto;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/core/components/layout/layout.component.ts b/src/app/core/components/layout/layout.component.ts
new file mode 100644
index 00000000..22d8a65b
--- /dev/null
+++ b/src/app/core/components/layout/layout.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from '../../services/layout.service';
+
+@Component({
+    selector   : 'fuse-layout',
+    templateUrl: './layout.component.html',
+    styleUrls  : ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit
+{
+    layoutSettings: { toolbar: any, navigation: any };
+
+    constructor(private layoutService: LayoutService)
+    {
+        this.layoutSettings = layoutService.getSettings();
+    }
+
+    ngOnInit()
+    {
+        this.layoutService.onSettingsChanged
+            .subscribe(
+                (newSettings) =>
+                {
+                    this.layoutSettings = newSettings;
+                }
+            );
+
+    }
+
+}
diff --git a/src/app/core/components/layout/navbar/navbar-toggle.directive.ts b/src/app/core/components/layout/navbar/navbar-toggle.directive.ts
new file mode 100644
index 00000000..adaae294
--- /dev/null
+++ b/src/app/core/components/layout/navbar/navbar-toggle.directive.ts
@@ -0,0 +1,27 @@
+import {Directive, HostListener, Input} from '@angular/core';
+import {NavbarService} from './navbar.service';
+import {NavbarComponent} from './navbar.component';
+
+@Directive({
+    selector: '[fuseNavbar]',
+})
+export class NavbarToggleDirective
+{
+    @Input() fuseNavbar: string;
+    navbar: NavbarComponent;
+
+    constructor(navbar: NavbarService)
+    {
+        this.navbar = navbar.getNavBar();
+    }
+
+    @HostListener('click')
+    onMouseEnter()
+    {
+        if ( !this.navbar[this.fuseNavbar] )
+        {
+            return;
+        }
+        this.navbar[this.fuseNavbar]();
+    }
+}
diff --git a/src/app/core/components/layout/navbar/navbar.component.html b/src/app/core/components/layout/navbar/navbar.component.html
new file mode 100644
index 00000000..d2752cab
--- /dev/null
+++ b/src/app/core/components/layout/navbar/navbar.component.html
@@ -0,0 +1,17 @@
+<div class="navbar-header">
+
+    <div class="logo">
+        <span class="logo-icon">F</span><span class="logo-text">FUSE</span>
+    </div>
+
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.xs>
+        <md-icon>menu</md-icon>
+    </button>
+
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-xs>
+        <md-icon>arrow_back</md-icon>
+    </button>
+
+</div>
+
+<fuse-navigation></fuse-navigation>
diff --git a/src/app/core/components/layout/navbar/navbar.component.scss b/src/app/core/components/layout/navbar/navbar.component.scss
new file mode 100644
index 00000000..cda11a3f
--- /dev/null
+++ b/src/app/core/components/layout/navbar/navbar.component.scss
@@ -0,0 +1,86 @@
+@import "../../../scss/fuse";
+
+:host {
+    display: block;
+    width: 256px;
+    height: 100%;
+    background-color: #FFFFFF;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 20;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+    transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
+    transform: translateX(0);
+
+    &.folded {
+        position: absolute;
+
+        &:not(.folded-open) {
+            width: 64px !important;
+            min-width: 64px !important;
+            max-width: 64px !important;
+        }
+
+        &.folded-open {
+
+        }
+    }
+
+    &.open {
+        transform: translateX(0) !important;
+    }
+
+    &.close {
+        transform: translateX(-100%) !important;
+    }
+
+    @include media-breakpoint('xs') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        transform: translateX(-100%);
+    }
+
+    .navbar-header {
+        padding: 0 16px 0 24px;
+        display: flex;
+        align-items: center;
+        height: 64px;
+        justify-content: space-between;
+
+        .logo {
+            display: flex;
+            align-items: center;
+
+            .logo-icon {
+                display: block;
+                background: #039BE5;
+                width: 32px;
+                min-width: 32px;
+                height: 32px;
+                line-height: 32px;
+                text-align: center;
+                font-size: 16px;
+                font-weight: 500;
+                color: #FFF;
+                border-radius: 2px;
+            }
+
+            .logo-text {
+                margin-left: 16px;
+                font-size: 16px;
+            }
+        }
+
+        .toggle-button-navbar {
+            /* border-radius: 50%;
+             position: relative;
+             cursor: pointer;
+             width: 32px;
+             height: 32px;
+             padding: 4px;
+             box-sizing: border-box;*/
+        }
+    }
+}
diff --git a/src/app/core/components/layout/navbar/navbar.component.ts b/src/app/core/components/layout/navbar/navbar.component.ts
new file mode 100644
index 00000000..3ba11c3f
--- /dev/null
+++ b/src/app/core/components/layout/navbar/navbar.component.ts
@@ -0,0 +1,125 @@
+import {AfterViewInit, Component, ElementRef, HostBinding, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {AppComponent} from '../../../../app.component';
+import {Subscription} from 'rxjs/Subscription';
+import {MatchMedia, MediaChange, MediaMonitor, ObservableMedia} from '@angular/flex-layout';
+import {FuseMatchMedia} from '../../../services/match-media.service';
+import {NavbarService} from './navbar.service';
+
+@Component({
+    selector   : 'fuse-navbar',
+    templateUrl: './navbar.component.html',
+    styleUrls  : ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit, OnDestroy
+{
+    @HostBinding('class.close') isClosed: boolean;
+    @HostBinding('class.open') isOpened: boolean = !this.isClosed;
+
+    @HostBinding('class.folded') isFoldedActive: boolean;
+    @HostBinding('class.folded-open') isFoldedOpen: boolean;
+
+    matchMediaWatcher: Subscription;
+
+    constructor(private elementRef: ElementRef,
+                private bodyEl: AppComponent,
+                private observableMedia: ObservableMedia,
+                private fuseMatchMedia: FuseMatchMedia,
+                private navBarService: NavbarService)
+    {
+        navBarService.setNavBar(this);
+        this.isClosed = false;
+        this.isFoldedActive = false;
+        this.isFoldedOpen = false;
+        this.updateCssClasses();
+
+        this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange.subscribe((mediaStep) =>
+        {
+            console.warn('Media step changed:', mediaStep);
+            if ( mediaStep === 'xs' )
+            {
+                this.closeBar();
+            }
+            else
+            {
+                this.openBar();
+            }
+        });
+    }
+
+    openBar()
+    {
+        console.info('opened');
+        this.isClosed = false;
+        this.updateCssClasses();
+    }
+
+    closeBar()
+    {
+        console.info('closed');
+        this.isClosed = true;
+        this.updateCssClasses();
+    }
+
+    toggleBar()
+    {
+        if ( this.isClosed )
+        {
+            this.openBar();
+        }
+        else
+        {
+            this.closeBar();
+        }
+    }
+
+    toggleFold()
+    {
+        if ( !this.isFoldedActive )
+        {
+            this.isFoldedActive = true;
+            this.bodyEl.addClass('fuse-nav-bar-folded');
+        }
+        else
+        {
+            this.isFoldedActive = false;
+            this.bodyEl.removeClass('fuse-nav-bar-folded');
+        }
+        this.isFoldedOpen = false;
+    }
+
+    @HostListener('mouseenter')
+    onMouseEnter()
+    {
+        this.isFoldedOpen = true;
+    }
+
+    @HostListener('mouseleave')
+    onMouseLeave()
+    {
+        this.isFoldedOpen = false;
+    }
+
+    updateCssClasses()
+    {
+        if ( this.isClosed )
+        {
+            this.bodyEl.addClass('fuse-nav-bar-opened');
+            this.bodyEl.removeClass('fuse-nav-bar-closed');
+        }
+        else
+        {
+            this.bodyEl.addClass('fuse-nav-bar-closed');
+            this.bodyEl.removeClass('fuse-nav-bar-opened');
+        }
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaWatcher.unsubscribe();
+    }
+}
diff --git a/src/app/core/components/layout/navbar/navbar.service.ts b/src/app/core/components/layout/navbar/navbar.service.ts
new file mode 100644
index 00000000..e0e4acd4
--- /dev/null
+++ b/src/app/core/components/layout/navbar/navbar.service.ts
@@ -0,0 +1,21 @@
+import {EventEmitter, Injectable} from '@angular/core';
+
+@Injectable()
+export class NavbarService
+{
+    navBarRef;
+
+    constructor()
+    {
+    }
+
+    setNavBar(ref)
+    {
+        this.navBarRef = ref;
+    }
+
+    getNavBar()
+    {
+        return this.navBarRef;
+    }
+}
diff --git a/src/app/core/components/layout/toolbar/toolbar.component.html b/src/app/core/components/layout/toolbar/toolbar.component.html
new file mode 100644
index 00000000..6035b890
--- /dev/null
+++ b/src/app/core/components/layout/toolbar/toolbar.component.html
@@ -0,0 +1,9 @@
+<md-toolbar>
+
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
+        <md-icon>menu</md-icon>
+    </button>
+
+    <span>Toolbar</span>
+
+</md-toolbar>
diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/core/components/layout/toolbar/toolbar.component.scss
similarity index 100%
rename from src/app/toolbar/toolbar.component.scss
rename to src/app/core/components/layout/toolbar/toolbar.component.scss
diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/core/components/layout/toolbar/toolbar.component.ts
similarity index 82%
rename from src/app/toolbar/toolbar.component.ts
rename to src/app/core/components/layout/toolbar/toolbar.component.ts
index 38c2aecb..127eeb49 100644
--- a/src/app/toolbar/toolbar.component.ts
+++ b/src/app/core/components/layout/toolbar/toolbar.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -16,5 +16,4 @@ export class ToolbarComponent implements OnInit
     ngOnInit()
     {
     }
-
 }
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.html b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.html
similarity index 100%
rename from src/app/navigation/nav-collapse/nav-collapse.component.html
rename to src/app/core/components/navigation/nav-collapse/nav-collapse.component.html
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.scss b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss
similarity index 94%
rename from src/app/navigation/nav-collapse/nav-collapse.component.scss
rename to src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss
index 3683fd1a..51b19808 100644
--- a/src/app/navigation/nav-collapse/nav-collapse.component.scss
+++ b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss
@@ -13,7 +13,8 @@
 
     &.open {
 
-        .nav-link {
+        > .nav-link {
+
             .collapse-arrow {
                 transform: rotate(90deg);
             }
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.spec.ts b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.spec.ts
similarity index 100%
rename from src/app/navigation/nav-collapse/nav-collapse.component.spec.ts
rename to src/app/core/components/navigation/nav-collapse/nav-collapse.component.spec.ts
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.ts b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts
similarity index 98%
rename from src/app/navigation/nav-collapse/nav-collapse.component.ts
rename to src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts
index 7d1e6124..ad865f8e 100644
--- a/src/app/navigation/nav-collapse/nav-collapse.component.ts
+++ b/src/app/core/components/navigation/nav-collapse/nav-collapse.component.ts
@@ -1,7 +1,7 @@
 import {Component, HostBinding, Input, OnInit} from '@angular/core';
 import {NavigationService} from '../navigation.service';
 import {NavigationEnd, Router} from '@angular/router';
-import {Animations} from '../../core/animations';
+import {Animations} from '../../../animations';
 
 @Component({
     selector   : 'fuse-nav-collapse',
diff --git a/src/app/navigation/nav-item/nav-item.component.html b/src/app/core/components/navigation/nav-item/nav-item.component.html
similarity index 100%
rename from src/app/navigation/nav-item/nav-item.component.html
rename to src/app/core/components/navigation/nav-item/nav-item.component.html
diff --git a/src/app/navigation/nav-item/nav-item.component.scss b/src/app/core/components/navigation/nav-item/nav-item.component.scss
similarity index 100%
rename from src/app/navigation/nav-item/nav-item.component.scss
rename to src/app/core/components/navigation/nav-item/nav-item.component.scss
diff --git a/src/app/navigation/nav-item/nav-item.component.spec.ts b/src/app/core/components/navigation/nav-item/nav-item.component.spec.ts
similarity index 100%
rename from src/app/navigation/nav-item/nav-item.component.spec.ts
rename to src/app/core/components/navigation/nav-item/nav-item.component.spec.ts
diff --git a/src/app/navigation/nav-item/nav-item.component.ts b/src/app/core/components/navigation/nav-item/nav-item.component.ts
similarity index 100%
rename from src/app/navigation/nav-item/nav-item.component.ts
rename to src/app/core/components/navigation/nav-item/nav-item.component.ts
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.html b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.html
similarity index 100%
rename from src/app/navigation/nav-subheader/nav-subheader.component.html
rename to src/app/core/components/navigation/nav-subheader/nav-subheader.component.html
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.scss b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
similarity index 100%
rename from src/app/navigation/nav-subheader/nav-subheader.component.scss
rename to src/app/core/components/navigation/nav-subheader/nav-subheader.component.scss
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.spec.ts b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.spec.ts
similarity index 100%
rename from src/app/navigation/nav-subheader/nav-subheader.component.spec.ts
rename to src/app/core/components/navigation/nav-subheader/nav-subheader.component.spec.ts
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.ts b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts
similarity index 100%
rename from src/app/navigation/nav-subheader/nav-subheader.component.ts
rename to src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts
diff --git a/src/app/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
similarity index 100%
rename from src/app/navigation/navigation.component.html
rename to src/app/core/components/navigation/navigation.component.html
diff --git a/src/app/navigation/navigation.component.scss b/src/app/core/components/navigation/navigation.component.scss
similarity index 94%
rename from src/app/navigation/navigation.component.scss
rename to src/app/core/components/navigation/navigation.component.scss
index fc1e04b4..450bcd7b 100644
--- a/src/app/navigation/navigation.component.scss
+++ b/src/app/core/components/navigation/navigation.component.scss
@@ -1,4 +1,4 @@
-@import '../../theme-config';
+@import 'src/app/core/scss/fuse';
 
 #main-navigation {
     margin: 0;
@@ -11,6 +11,7 @@
         color: rgba(0, 0, 0, .54);
         font-weight: 500;
         padding-left: 24px;
+        white-space: nowrap;
     }
 
     .nav-item {
@@ -26,9 +27,11 @@
             background-color: map-get($background, raised-button);
             color: map_get($foreground, text);
             cursor: pointer;
+            user-select: none;
 
             > span {
                 flex: 1;
+                white-space: nowrap;
             }
 
             &:hover {
diff --git a/src/app/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts
similarity index 100%
rename from src/app/navigation/navigation.component.ts
rename to src/app/core/components/navigation/navigation.component.ts
diff --git a/src/app/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts
similarity index 100%
rename from src/app/navigation/navigation.model.ts
rename to src/app/core/components/navigation/navigation.model.ts
diff --git a/src/app/navigation/navigation.module.ts b/src/app/core/components/navigation/navigation.module.ts
similarity index 92%
rename from src/app/navigation/navigation.module.ts
rename to src/app/core/components/navigation/navigation.module.ts
index 99ee6f8b..60cb2322 100644
--- a/src/app/navigation/navigation.module.ts
+++ b/src/app/core/components/navigation/navigation.module.ts
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {SharedModule} from '../core/shared.module';
+import {SharedModule} from '../../modules/shared.module';
 import {RouterModule, Routes} from '@angular/router';
 import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component';
 import {NavigationComponent} from './navigation.component';
diff --git a/src/app/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts
similarity index 100%
rename from src/app/navigation/navigation.service.ts
rename to src/app/core/components/navigation/navigation.service.ts
diff --git a/src/app/core/components/sidenav/sidenav.component.html b/src/app/core/components/sidenav/sidenav.component.html
new file mode 100644
index 00000000..f83979bf
--- /dev/null
+++ b/src/app/core/components/sidenav/sidenav.component.html
@@ -0,0 +1,16 @@
+<p>
+  sidenav works!
+</p>
+
+<div class.md="red-bg" class.lg="green-bg">
+  sidenav works!
+  <br>
+  sidenav works!
+  <br>
+  sidenav works!
+  <br>
+  sidenav works!
+  <br>
+  sidenav works!
+
+</div>
diff --git a/src/app/core/components/sidenav/sidenav.component.scss b/src/app/core/components/sidenav/sidenav.component.scss
new file mode 100644
index 00000000..26a3f076
--- /dev/null
+++ b/src/app/core/components/sidenav/sidenav.component.scss
@@ -0,0 +1,28 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+    display: block;
+    position: absolute;
+    width: 320px;
+    height: 100%;
+    background: grey;
+    right: 0;
+    top: 0;
+    overflow-y: auto;
+
+    @include media-breakpoint('sm') {
+        background: white;
+    }
+
+    @include media-breakpoint('md') {
+        background: red;
+    }
+
+    @include media-breakpoint('lg') {
+        background: green;
+    }
+
+    @include media-breakpoint('gt-lg') {
+        background: white;
+    }
+}
diff --git a/src/app/core/components/sidenav/sidenav.component.ts b/src/app/core/components/sidenav/sidenav.component.ts
new file mode 100644
index 00000000..3695b4c6
--- /dev/null
+++ b/src/app/core/components/sidenav/sidenav.component.ts
@@ -0,0 +1,45 @@
+import { Component, ElementRef, HostBinding, OnInit } from '@angular/core';
+import { style, animate, sequence, AnimationBuilder, AnimationPlayer } from '@angular/animations';
+import { AppComponent } from '../../../app.component';
+
+@Component({
+    selector   : 'fuse-sidenav',
+    templateUrl: './sidenav.component.html',
+    styleUrls  : ['./sidenav.component.scss']
+})
+export class SidenavComponent implements OnInit
+{
+    constructor(private elementRef: ElementRef,
+                private animationBuilder: AnimationBuilder,
+                private bodyEl: AppComponent)
+    {
+
+    }
+
+    closeBar()
+    {
+        this.animationBuilder
+            .build([
+                style({transform: 'translate3d(0,0,0)'}),
+                animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
+            ])
+            .create(this.elementRef.nativeElement)
+            .play();
+    }
+
+    openBar()
+    {
+        this.animationBuilder
+            .build([
+                style({transform: 'translate3d(100%,0,0)'}),
+                animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
+            ])
+            .create(this.elementRef.nativeElement)
+            .play();
+    }
+
+    ngOnInit()
+    {
+    }
+
+}
diff --git a/src/app/core/layout/layout.component.scss b/src/app/core/layout/layout.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/core/layout/layout.component.spec.ts b/src/app/core/layout/layout.component.spec.ts
deleted file mode 100644
index 95a35a0c..00000000
--- a/src/app/core/layout/layout.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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();
-  });
-});
diff --git a/src/app/core/layout/layout.component.ts b/src/app/core/layout/layout.component.ts
deleted file mode 100644
index 71824b20..00000000
--- a/src/app/core/layout/layout.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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() {
-  }
-
-}
diff --git a/src/app/core/material.module.ts b/src/app/core/modules/material.module.ts
similarity index 100%
rename from src/app/core/material.module.ts
rename to src/app/core/modules/material.module.ts
diff --git a/src/app/core/shared.module.ts b/src/app/core/modules/shared.module.ts
similarity index 100%
rename from src/app/core/shared.module.ts
rename to src/app/core/modules/shared.module.ts
diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
new file mode 100644
index 00000000..1022d614
--- /dev/null
+++ b/src/app/core/scss/core.scss
@@ -0,0 +1,22 @@
+// Fuse
+@import "fuse";
+
+// Theming
+@include mat-core();
+
+// 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);
+
+// Partials
+
diff --git a/src/app/core/scss/fuse.scss b/src/app/core/scss/fuse.scss
new file mode 100644
index 00000000..70f6dffe
--- /dev/null
+++ b/src/app/core/scss/fuse.scss
@@ -0,0 +1,5 @@
+// Variables
+@import "variables/theme-variables";
+
+// Mixins
+@import "mixins/breakpoints";
diff --git a/src/app/core/scss/mixins/_breakpoints.scss b/src/app/core/scss/mixins/_breakpoints.scss
new file mode 100644
index 00000000..5fb7e3b7
--- /dev/null
+++ b/src/app/core/scss/mixins/_breakpoints.scss
@@ -0,0 +1,24 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+    gt-sm: 'screen and (min-width: 960px)',
+    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+    gt-md: 'screen and (min-width: 1280px)',
+    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    gt-lg: 'screen and (min-width: 1920px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)'
+) !default;
+
+@mixin media-breakpoint($breakpointName) {
+
+    $mediaQuery: map_get($breakpoints, $breakpointName);
+
+    @if ($mediaQuery != null) {
+
+        @media #{$mediaQuery} {
+            @content
+        }
+    }
+}
diff --git a/src/app/core/scss/variables/_theme-variables.scss b/src/app/core/scss/variables/_theme-variables.scss
new file mode 100644
index 00000000..e7a6803d
--- /dev/null
+++ b/src/app/core/scss/variables/_theme-variables.scss
@@ -0,0 +1,17 @@
+@import '~@angular/material/theming';
+
+$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);
\ No newline at end of file
diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts
index 9bff6003..9774720b 100644
--- a/src/app/core/services/layout.service.ts
+++ b/src/app/core/services/layout.service.ts
@@ -1,25 +1,26 @@
-import {EventEmitter, Injectable} from '@angular/core';
-import {NavigationStart, Router} from '@angular/router';
+import { EventEmitter, Injectable } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
 
 @Injectable()
 export class LayoutService
 {
+    defaultSettings: { toolbar: string, navigation: string };
+    settings: { toolbar: string, navigation: string };
+
+    onSettingsChanged = new EventEmitter<{ toolbar: string, navigation: string }>();
+
     /**
-     * Default Settings
-     * @type {{navigation: string; toolbar: string}}
+     * @param router
      */
-    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
+        // Set the default settings
+        this.defaultSettings = {
+            navigation: 'left', // 'right', 'left', 'top', false
+            toolbar   : 'above' // 'above', 'below', false
+        };
+
+        // Assign default settings at the init
         this.settings = {...this.defaultSettings};
 
         // Reset the default settings whenever navigation starts
@@ -29,9 +30,8 @@ export class LayoutService
                 if ( event instanceof NavigationStart )
                 {
                     this.settings = {...this.defaultSettings};
-                    this.settingsChanged.emit(this.settings);
+                    this.onSettingsChanged.emit(this.settings);
                 }
-
             }
         );
     }
@@ -52,7 +52,6 @@ export class LayoutService
     setSettings(newSettings)
     {
         Object.assign(this.settings, newSettings);
-        this.settingsChanged.emit(this.settings);
-        // console.log('settings changed');
+        this.onSettingsChanged.emit(this.settings);
     }
 }
diff --git a/src/app/core/services/match-media.service.ts b/src/app/core/services/match-media.service.ts
new file mode 100644
index 00000000..bad27ac6
--- /dev/null
+++ b/src/app/core/services/match-media.service.ts
@@ -0,0 +1,77 @@
+import { MediaChange, MediaMonitor, ObservableMedia } from '@angular/flex-layout';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import { EventEmitter, Injectable } from '@angular/core';
+import 'rxjs/add/operator/filter';
+import { Subscription } from 'rxjs/Subscription';
+
+@Injectable()
+export class FuseMatchMedia
+{
+    activeMediaQuery: string;
+    onMediaChange: Observable<string>;
+    // onMediaChange = new EventEmitter<string>();
+    watcher: Subscription;
+
+    constructor(private observableMedia: ObservableMedia,
+                private mediaMonitor: MediaMonitor)
+    {
+        this.activeMediaQuery = '';
+
+        this.onMediaChange = Observable.create((observer: Observer<string>) =>
+        {
+            this.observableMedia.subscribe((change: MediaChange) =>
+            {
+
+                if ( this.activeMediaQuery !== change.mqAlias )
+                {
+                    this.activeMediaQuery = change.mqAlias;
+                    observer.next(this.activeMediaQuery);
+                    console.warn('From observableMedia:', change.mqAlias);
+
+                }
+            });
+        });
+        /*
+         this.mediaMonitor.observe('xs').subscribe((change: MediaChange) =>
+         {
+         console.warn('From mediaMonitor:', change);
+
+         if ( this.activeMediaQuery !== change.mqAlias )
+         {
+         // this.activeMediaQuery = change.mqAlias;
+
+
+         // this.onMediaChange.emit(this.activeMediaQuery);
+         }
+         });*/
+
+        /* this.observableMedia.subscribe((change: MediaChange) =>
+         {
+         console.warn('From observableMedia:', change.mqAlias);
+
+         if ( this.activeMediaQuery !== change.mqAlias )
+         {
+         this.activeMediaQuery = change.mqAlias;
+
+
+         this.onMediaChange.emit(this.activeMediaQuery);
+         }
+         });*/
+        /*this.observableMedia.asObservable()
+         .filter((change: MediaChange) => change.mqAlias === 'xs')
+         .subscribe(() =>
+         {
+         console.warn('From observableMedia:', this.activeMediaQuery);
+
+         this.onMediaChange.emit(this.activeMediaQuery);
+         });*/
+
+        /*  this.watcher = this.observableMedia.subscribe((change: MediaChange) =>
+         {
+         this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
+         console.warn('From Watcher:', change.mqAlias);
+
+         });*/
+    }
+}
diff --git a/src/app/main/apps/chat/chat.component.spec.ts b/src/app/main/apps/chat/chat.component.spec.ts
deleted file mode 100644
index ebad2744..00000000
--- a/src/app/main/apps/chat/chat.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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();
-  });
-});
diff --git a/src/app/main/apps/chat/chat.module.ts b/src/app/main/apps/chat/chat.module.ts
index f17b01eb..4f5050d8 100644
--- a/src/app/main/apps/chat/chat.module.ts
+++ b/src/app/main/apps/chat/chat.module.ts
@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {SharedModule} from '../../../core/shared.module';
+import {SharedModule} from '../../../core/modules/shared.module';
 import {RouterModule, Routes} from '@angular/router';
 import {ChatComponent} from './chat.component';
 
@@ -7,7 +7,7 @@ const routes: Routes = [
     {
         path: 'apps/chat', component: ChatComponent, children: []
     }
-]
+];
 
 @NgModule({
     imports     : [
diff --git a/src/app/main/apps/dashboards/project/project.component.scss b/src/app/main/apps/dashboards/project/project.component.scss
index e69de29b..44f89a98 100644
--- a/src/app/main/apps/dashboards/project/project.component.scss
+++ b/src/app/main/apps/dashboards/project/project.component.scss
@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    flex: 1;
+}
\ No newline at end of file
diff --git a/src/app/main/apps/dashboards/project/project.component.spec.ts b/src/app/main/apps/dashboards/project/project.component.spec.ts
deleted file mode 100644
index 1cf2442d..00000000
--- a/src/app/main/apps/dashboards/project/project.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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();
-  });
-});
diff --git a/src/app/main/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts
index 6e67209c..cd617311 100644
--- a/src/app/main/apps/dashboards/project/project.module.ts
+++ b/src/app/main/apps/dashboards/project/project.module.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {ProjectComponent} from './project.component';
-import {SharedModule} from '../../../../core/shared.module';
+import {SharedModule} from '../../../../core/modules/shared.module';
 
 const routes: Routes = [
     {
diff --git a/src/app/main/apps/mail/mail.component.spec.ts b/src/app/main/apps/mail/mail.component.spec.ts
deleted file mode 100644
index ea936032..00000000
--- a/src/app/main/apps/mail/mail.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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();
-  });
-});
diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts
index fa27dce2..5bb12111 100644
--- a/src/app/main/apps/mail/mail.module.ts
+++ b/src/app/main/apps/mail/mail.module.ts
@@ -1,17 +1,23 @@
-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';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../core/modules/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'}
-    ]
+        path     : 'apps/mail',
+        component: MailComponent,
+        children : [
+            {
+                path     : '',
+                component: ClassicViewComponent,
+                outlet   : 'view'
+            }
+        ]
     }
-]
+];
 
 @NgModule({
     imports     : [
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts
deleted file mode 100644
index 80b06442..00000000
--- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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();
-  });
-});
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.spec.ts b/src/app/main/apps/mail/views/classic/classic-view.component.spec.ts
deleted file mode 100644
index 076a26b5..00000000
--- a/src/app/main/apps/mail/views/classic/classic-view.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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();
-  });
-});
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.spec.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.spec.ts
deleted file mode 100644
index d745511d..00000000
--- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChatComponent } from './fullwidth.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();
-  });
-});
diff --git a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts
index f5553402..b986cf40 100644
--- a/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts
+++ b/src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {CardedFullWidthComponent} from './fullwidth.component';
-import {SharedModule} from '../../../../../core/shared.module';
+import {SharedModule} from '../../../../../core/modules/shared.module';
 
 const routes: Routes = [
     {
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
deleted file mode 100644
index ebb864f9..00000000
--- a/src/app/toolbar/toolbar.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<md-toolbar>
-
-    <a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
-        <md-icon>menu</md-icon>
-    </a>
-
-    <span>Toolbar</span>
-
-</md-toolbar>
diff --git a/src/index.html b/src/index.html
index df360ae9..4e2bb5e3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,8 +17,7 @@
 
     <body class="mat-body">
 
-        <fuse-root></fuse-root>
-        
+
     </body>
 
 </html>
diff --git a/src/styles.scss b/src/styles.scss
index a969c3c4..9288899a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,33 +1,19 @@
-@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 {
-
-}
+// Import Fuse main library
+@import "app/core/scss/core";
 
 html, body {
     margin: 0;
-}
-
-html, body, fuse-root, #wrapper, #content, .mat-sidenav-content {
     width: 100%;
     height: 100%;
+    overflow: hidden;
+}
+
+body {
+
+    &.fuse-nav-bar-folded {
+
+        .content-wrapper {
+            padding-left: 64px;
+        }
+    }
 }
diff --git a/src/theme-config.scss b/src/theme-config.scss
deleted file mode 100644
index b27e1b32..00000000
--- a/src/theme-config.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@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);
diff --git a/tslint.json b/tslint.json
index 9322ff86..d8cf02e1 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,135 +1,130 @@
 {
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
-  "rules": {
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
+    "rulesDirectory": [
+        "node_modules/codelyzer"
     ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-over-type-literal": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unnecessary-initializer": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      //"check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": true,
-    "semicolon": [
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "typeof-compare": true,
-    "unified-signatures": true,
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
-    "directive-selector": [
-      true,
-      "attribute",
-      "fuse",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "fuse",
-      "kebab-case"
-    ],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true,
-    "no-access-missing-member": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
-  }
+    "rules": {
+        "arrow-return-shorthand": true,
+        "callable-types": true,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "import-blacklist": [
+            true,
+            "rxjs"
+        ],
+        "import-spacing": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-over-type-literal": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            120
+        ],
+        "member-access": false,
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-arg": true,
+        "no-bitwise": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-debugger": true,
+        "no-duplicate-super": true,
+        "no-empty": false,
+        "no-empty-interface": true,
+        "no-eval": true,
+        "no-inferrable-types": [
+            true,
+            "ignore-params"
+        ],
+        "no-misused-new": true,
+        "no-non-null-assertion": true,
+        "no-shadowed-variable": true,
+        "no-string-literal": false,
+        "no-string-throw": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": false,
+        "no-unnecessary-initializer": true,
+        "no-unused-expression": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "object-literal-sort-keys": false,
+        "one-line": false,
+        "prefer-const": true,
+        "quotemark": [
+            true,
+            "single"
+        ],
+        "radix": true,
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "typeof-compare": true,
+        "unified-signatures": true,
+        "variable-name": false,
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ],
+        "directive-selector": [
+            true,
+            "attribute",
+            "fuse",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "fuse",
+            "kebab-case"
+        ],
+        "use-input-property-decorator": true,
+        "use-output-property-decorator": true,
+        "use-host-property-decorator": true,
+        "no-input-rename": true,
+        "no-output-rename": true,
+        "use-life-cycle-interface": true,
+        "use-pipe-transform-interface": true,
+        "component-class-suffix": true,
+        "directive-class-suffix": true,
+        "no-access-missing-member": true,
+        "templates-use-public": true,
+        "invoke-injectable": true
+    }
 }