Merge branch 'master' into skeleton

+ (Shortcuts) Icon colors in shortcuts menu

.angular-cli.json

@@ -1,67 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "project": {
-        "name": "fuse"
-    },
-    "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",
-                "hmr": "environments/environment.hmr.ts",
-                "prod": "environments/environment.prod.ts"
-            }
-        }
-    ],
-    "e2e": {
-        "protractor": {
-            "config": "./protractor.conf.js"
-        }
-    },
-    "lint": [
-        {
-            "project": "src/tsconfig.app.json",
-            "exclude": [
-                "**/node_modules/**"
-            ]
-        },
-        {
-            "project": "src/tsconfig.spec.json",
-            "exclude": [
-                "**/node_modules/**"
-            ]
-        },
-        {
-            "project": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**"
-            ]
-        }
-    ],
-    "test": {
-        "karma": {
-            "config": "./karma.conf.js"
-        }
-    },
-    "defaults": {
-        "styleExt": "scss",
-        "component": {}
-    }
-}

.editorconfig

@@ -1,3 +1,4 @@
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]

.gitignore

@@ -30,13 +30,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-Material Design Admin Template with Angular 5+ and Angular Material 2
+Material Design Admin Template with Angular 6+ and Angular Material 2
 
 ## The Community
 
@@ -14,11 +14,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
 ## Running unit tests
 
@@ -27,4 +27,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+

angular.json

@@ -0,0 +1,135 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "fuse": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "styleext": "scss"
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "fuse:build:production"
+                        },
+                        "hmr": {
+                            "hmr": true,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "styles.scss"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        },
+        "fuse-e2e": {
+            "root": "e2e/",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "fuse:serve"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "fuse"
+}

e2e/protractor.conf.js

@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const {SpecReporter} = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs            : [
+        './src/**/*.e2e-spec.ts'
+    ],
+    capabilities     : {
+        'browserName': 'chrome'
+    },
+    directConnect    : true,
+    baseUrl          : 'http://localhost:4200/',
+    framework        : 'jasmine',
+    jasmineNodeOpts  : {
+        showColors            : true,
+        defaultTimeoutInterval: 30000,
+        print                 : function ()
+        {
+        }
+    },
+    onPrepare()
+    {
+        require('ts-node').register({
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
+    }
+};

e2e/src/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('Fuse2 App', () => {
 
     it('should display welcome message', () => {
         page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to app!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
     });
 });

e2e/tsconfig.e2e.json

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "baseUrl": "./",
+    "outDir": "../out-tsc/app",
     "module": "commonjs",
     "target": "es5",
     "types": [
@@ -11,4 +10,4 @@
       "node"
     ]
   }
-}
+}

karma.conf.js

@@ -1,33 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
-            require('@angular/cli/plugins/karma')
-        ],
-        client:{
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        coverageIstanbulReporter: {
-            reports: [ 'html', 'lcovonly' ],
-            fixWebpackSourcePaths: true
-        },
-        angularCli: {
-            environment: 'dev'
-        },
-        reporters: ['progress', 'kjhtml'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        browsers: ['Chrome'],
-        singleRun: false
-    });
-};

package.json

@@ -1,11 +1,11 @@
 {
   "name": "fuse",
-  "version": "5.2.9",
+  "version": "6.0.1",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open",
-    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
+    "start-hmr": "ng serve --configuration hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
     "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
     "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
@@ -19,67 +19,70 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.8",
-    "@angular/cdk": "5.2.4",
-    "@angular/common": "5.2.8",
-    "@angular/compiler": "5.2.8",
-    "@angular/core": "5.2.8",
-    "@angular/flex-layout": "5.0.0-beta.13",
-    "@angular/forms": "5.2.8",
-    "@angular/http": "5.2.8",
-    "@angular/material": "5.2.4",
-    "@angular/material-moment-adapter": "5.2.4",
-    "@angular/platform-browser": "5.2.8",
-    "@angular/platform-browser-dynamic": "5.2.8",
-    "@angular/router": "5.2.8",
-    "@ngrx/effects": "5.2.0",
-    "@ngrx/router-store": "5.2.0",
-    "@ngrx/store": "5.2.0",
-    "@ngrx/store-devtools": "5.2.0",
-    "@ngx-translate/core": "9.1.1",
-    "@swimlane/ngx-charts": "7.1.1",
-    "@swimlane/ngx-datatable": "11.2.0",
-    "@swimlane/ngx-dnd": "3.1.0",
+    "@angular/animations": "6.0.0",
+    "@angular/cdk": "6.0.1",
+    "@angular/common": "6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/flex-layout": "6.0.0-beta.15",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/material": "6.0.1",
+    "@angular/material-moment-adapter": "6.0.1",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/router": "6.0.0",
+    "@ngrx/effects": "6.0.0-beta.1",
+    "@ngrx/router-store": "6.0.0-beta.1",
+    "@ngrx/store": "6.0.0-beta.1",
+    "@ngrx/store-devtools": "6.0.0-beta.1",
+    "@ngx-translate/core": "10.0.1",
+    "@swimlane/ngx-charts": "8.0.0",
+    "@swimlane/ngx-datatable": "12.0.0",
+    "@swimlane/ngx-dnd": "4.0.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.6",
-    "angular-in-memory-web-api": "0.5.3",
+    "angular-calendar": "0.24.0",
+    "angular-in-memory-web-api": "0.6.0",
     "chart.js": "2.7.2",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
-    "d3": "4.13.0",
+    "core-js": "2.5.6",
+    "d3": "5.2.0",
     "hammerjs": "2.0.8",
-    "intl": "1.2.5",
-    "moment": "2.21.0",
+    "lodash": "4.17.10",
+    "moment": "2.22.1",
     "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.1",
-    "ngx-color-picker": "5.3.4",
+    "ngrx-store-freeze": "0.2.2",
+    "ngx-color-picker": "6.0.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.11.0",
-    "rxjs": "5.5.6",
+    "prismjs": "1.14.0",
+    "rxjs": "6.1.0",
+    "rxjs-compat": "6.1.0",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.20"
+    "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "1.7.3",
-    "@angular/compiler-cli": "5.2.8",
-    "@angular/language-service": "5.2.8",
+    "@angular/cli": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "0.6.0",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.6",
+    "@types/jasmine": "2.8.7",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.101",
+    "@types/lodash": "4.14.108",
+    "@types/node": "8.9.5",
     "codelyzer": "4.2.1",
-    "jasmine-core": "2.8.0",
+    "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "2.0.0",
+    "karma": "1.7.1",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage-istanbul-reporter": "1.4.2",
-    "karma-jasmine": "1.1.1",
+    "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
-    "ts-node": "4.1.0",
+    "protractor": "5.3.1",
+    "ts-node": "5.0.1",
     "tslint": "5.9.1",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
     "webpack-bundle-analyzer": "2.11.1"
   }
 }

protractor.conf.js

@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-    allScriptsTimeout: 11000,
-    specs: [
-        './e2e/**/*.e2e-spec.ts'
-    ],
-    capabilities: {
-        'browserName': 'chrome'
-    },
-    directConnect: true,
-    baseUrl: 'http://localhost:4200/',
-    framework: 'jasmine',
-    jasmineNodeOpts: {
-        showColors: true,
-        defaultTimeoutInterval: 30000,
-        print: function() {}
-    },
-    onPrepare() {
-        require('ts-node').register({
-            project: 'e2e/tsconfig.e2e.json'
-        });
-        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-    }
-};

src/@fuse/components/countdown/countdown.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/interval';
+
+import { interval } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import * as moment from 'moment';
 
@@ -31,22 +32,21 @@ export class FuseCountdownComponent implements OnInit
 
         let diff = eventDate.diff(currDate, 'seconds');
 
-        const countDown =
-                  Observable
-                      .interval(1000)
-                      .map(value => {
-                          return diff = diff - 1;
-                      })
-                      .map(value => {
-                          const timeLeft = moment.duration(value, 'seconds');
+        const countDown = interval(1000).pipe(
+            map(value => {
+                return diff = diff - 1;
+            }),
+            map(value => {
+                const timeLeft = moment.duration(value, 'seconds');
 
-                          return {
-                              days   : timeLeft.asDays().toFixed(0),
-                              hours  : timeLeft.hours(),
-                              minutes: timeLeft.minutes(),
-                              seconds: timeLeft.seconds()
-                          };
-                      });
+                return {
+                    days   : timeLeft.asDays().toFixed(0),
+                    hours  : timeLeft.hours(),
+                    minutes: timeLeft.minutes(),
+                    seconds: timeLeft.seconds()
+                };
+            })
+        );
 
         countDown.subscribe(value => {
             this.countdown = value;

src/@fuse/components/highlight/prism-languages.ts

@@ -5,6 +5,7 @@ import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-diff';
 import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-json';

src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html

@@ -1,23 +1,52 @@
-<a class="nav-link" matRipple>
-    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
-    <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-</a>
 
-<div class="children" [ngClass]="{'open': isOpen}">
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
 
-    <div class="{{fuseSettings.colorClasses.navbar}}">
+    <ng-template #itemContent>
+        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+            {{item.badge.title}}
+        </span>
+        <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
+    </ng-template>
 
-        <ng-container *ngFor="let item of item.children">
-            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
-        </ng-container>
+    <div class="children" [ngClass]="{'open': isOpen}">
+
+        <div class="{{fuseSettings.colorClasses.navbar}}">
+
+            <ng-container *ngFor="let item of item.children">
+                <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
+                <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'"
+                                              [item]="item"></fuse-nav-horizontal-collapse>
+                <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
+            </ng-container>
+
+        </div>
 
     </div>
 
-</div>
+</ng-container>

src/@fuse/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts

@@ -1,7 +1,8 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
 import { fuseAnimations } from '../../../../animations/index';
 import { FuseConfigService } from '../../../../services/config.service';
-import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector   : 'fuse-nav-horizontal-collapse',

src/@fuse/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html

@@ -1,18 +1,30 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
-   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
-    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
-    </span>
-</a>
+<ng-container *ngIf="!item.hidden">
 
-<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
-    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-    <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-        {{item.badge.title}}
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
-</span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
+        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
+        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
+              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+            {{item.badge.title}}
+        </span>
+    </ng-template>
+
+</ng-container>

src/@fuse/components/navigation/navigation.service.ts

@@ -1,5 +1,5 @@
-import { EventEmitter, Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class FuseNavigationService

src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html

@@ -1,6 +1,30 @@
 <ng-container *ngIf="!item.hidden">
 
-    <a class="nav-link" matRipple (click)="toggleOpen($event)">
+    <!-- normal collapse -->
+    <a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function" (click)="toggleOpen($event)"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="toggleOpen($event);item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="toggleOpen($event);item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
         <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
@@ -8,7 +32,7 @@
             {{item.badge.title}}
         </span>
         <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-    </a>
+    </ng-template>
 
     <div class="children" [@slideInOut]="isOpen">
         <ng-container *ngFor="let item of item.children">

src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html

@@ -1,22 +1,31 @@
 <ng-container *ngIf="!item.hidden">
 
-    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+    <!-- item.url -->
+    <a class="nav-link" *ngIf="item.url && !item.function"
+       [routerLink]="[item.url]" routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
-        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
-        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
-        <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
-              [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
-            {{item.badge.title}}
-        </span>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
-    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <ng-template #itemContent>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
         <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
         <span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
             {{item.badge.title}}
         </span>
-    </span>
+    </ng-template>
 
 </ng-container>

src/@fuse/components/search-bar/search-bar.component.html

@@ -1,5 +1,7 @@
-<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto">
-    <div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
+<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
+
+    <div class="fuse-search-bar-content" [ngClass]="toolbarColor">
+
         <label for="fuse-search-bar-input">
             <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
@@ -10,12 +12,14 @@
             </span>-->
         </label>
 
-        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex>
+        <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
+               fxFlex>
 
-        <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
+        <button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
                 aria-label="Collapse Search Bar">
             <mat-icon class="s-24">close</mat-icon>
         </button>
 
     </div>
+
 </div>

src/@fuse/components/search-bar/search-bar.component.scss

@@ -3,6 +3,8 @@
 :host {
 
     .fuse-search-bar {
+        display: flex;
+        flex: 0 1 auto;
         min-width: 64px;
         height: 64px;
         font-size: 13px;
@@ -11,40 +13,49 @@
             height: 56px;
         }
 
-        .fuse-search-bar-expander,
-        .fuse-search-bar-collapser {
-            cursor: pointer;
-            padding: 0 20px;
-            margin: 0;
-            width: 64px !important;
-            height: 64px !important;
-            line-height: 64px !important;
+        .fuse-search-bar-content {
+            display: flex;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: flex-start;
 
-            @include media-breakpoint-down('sm') {
-                height: 56px !important;
-                line-height: 56px !important;
+            .fuse-search-bar-expander,
+            .fuse-search-bar-collapser {
+                cursor: pointer;
+                padding: 0 20px;
+                margin: 0;
+                width: 64px !important;
+                height: 64px !important;
+                line-height: 64px !important;
+
+                @include media-breakpoint-down('sm') {
+                    height: 56px !important;
+                    line-height: 56px !important;
+                }
             }
-        }
 
-        .fuse-search-bar-loader {
-            width: 64px !important;
-            height: 64px !important;
-            line-height: 64px !important;
-            @include media-breakpoint-down('sm') {
-                height: 56px !important;
-                line-height: 56px !important;
+            .fuse-search-bar-loader {
+                width: 64px !important;
+                height: 64px !important;
+                line-height: 64px !important;
+
+                @include media-breakpoint-down('sm') {
+                    height: 56px !important;
+                    line-height: 56px !important;
+                }
             }
-        }
 
-        .fuse-search-bar-collapser {
-            display: none;
-        }
+            .fuse-search-bar-collapser {
+                display: none;
+            }
 
-        #fuse-search-bar-input {
-            display: none;
-            min-height: 64px;
-            background-color: transparent;
-            font-size: 16px;
+            #fuse-search-bar-input {
+                display: none;
+                flex: 1 0 auto;
+                min-height: 64px;
+                background-color: transparent;
+                font-size: 16px;
+            }
         }
 
         &.expanded {
@@ -55,12 +66,15 @@
             left: 0;
             z-index: 10;
 
-            #fuse-search-bar-input {
-                display: block;
-            }
+            .fuse-search-bar-content {
 
-            .fuse-search-bar-collapser {
-                display: block;
+                #fuse-search-bar-input {
+                    display: flex;
+                }
+
+                .fuse-search-bar-collapser {
+                    display: flex;
+                }
             }
         }
     }

src/@fuse/components/search-bar/search-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 

src/@fuse/components/shortcuts/shortcuts.component.html

@@ -17,7 +17,7 @@
                      *ngFor="let shortcutItem of shortcutItems">
 
                     <a mat-icon-button matTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
-                        <mat-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+                        <mat-icon class="secondary-text" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
                         <span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
@@ -42,46 +42,70 @@
 
         <mat-menu #addMenu="matMenu" class="w-240">
 
-            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
+            <mat-form-field class="px-16 w-100-p" (click)="$event.stopPropagation()" floatLabel="never">
                 <input #searchInput matInput placeholder="Search for an app or a page" (input)="search($event)">
             </mat-form-field>
 
             <mat-divider></mat-divider>
+
             <mat-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
 
                 <mat-list-item *ngFor="let shortcutItem of shortcutItems"
                                (click)="toggleShortcut($event, shortcutItem)">
+
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</mat-icon>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *ngIf="shortcutItem.icon">
+                            {{shortcutItem.icon}}
+                        </mat-icon>
+
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
                             {{shortcutItem.title.substr(0, 1).toUpperCase()}}
                         </span>
+
                         <p matLine fxFlex>{{shortcutItem.title}}</p>
-                        <mat-icon class="ml-8">star</mat-icon>
+
+                        <mat-icon class="ml-8 amber-fg">star</mat-icon>
+
                     </div>
+
                 </mat-list-item>
+
                 <mat-list-item *ngIf="shortcutItems.length === 0">
                     <p>
                         <small>No shortcuts yet!</small>
                     </p>
                 </mat-list-item>
+
             </mat-nav-list>
 
             <mat-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" fusePerfectScrollbar>
+
                 <mat-list-item *ngFor="let navigationItem of filteredNavigationItems"
                                (click)="toggleShortcut($event, navigationItem)">
+
                     <div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
-                        <mat-icon mat-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</mat-icon>
+
+                        <mat-icon mat-list-icon class="mr-8 secondary-text" *ngIf="navigationItem.icon">
+                            {{navigationItem.icon}}
+                        </mat-icon>
+
                         <span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
                               fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
                             {{navigationItem.title.substr(0, 1).toUpperCase()}}
                         </span>
+
                         <p matLine fxFlex>{{navigationItem.title}}</p>
-                        <mat-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
+                        <mat-icon class="ml-8 amber-fg" *ngIf="isInShortcuts(navigationItem)">star</mat-icon>
+
                     </div>
+
                 </mat-list-item>
+
             </mat-nav-list>
+
         </mat-menu>
 
     </div>

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -1,14 +1,13 @@
-import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { ObservableMedia } from '@angular/flex-layout';
+
+import { Subscription } from 'rxjs';
 import { CookieService } from 'ngx-cookie-service';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseConfigService } from '@fuse/services/config.service';
 
-import { navigation } from 'app/navigation/navigation';
-
 @Component({
     selector   : 'fuse-shortcuts',
     templateUrl: './shortcuts.component.html',
@@ -25,6 +24,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     matchMediaSubscription: Subscription;
     onConfigChanged: Subscription;
 
+    @Input() navigation: any;
+
     @ViewChild('searchInput') searchInputField;
     @ViewChild('shortcuts') shortcutsEl: ElementRef;
 
@@ -37,8 +38,6 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private cookieService: CookieService
     )
     {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
-
         this.onConfigChanged =
             this.fuseConfig.onConfigChanged
                 .subscribe(
@@ -50,6 +49,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
+        // Get the navigation items and flatten them
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(this.navigation);
+
         const cookieExists = this.cookieService.check('FUSE2.shortcuts');
 
         if ( cookieExists )

src/@fuse/components/sidebar/sidebar.component.scss

@@ -5,7 +5,8 @@ fuse-sidebar {
     position: absolute;
     top: 0;
     bottom: 0;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     width: 280px;
     min-width: 280px;
     max-width: 280px;

src/@fuse/components/sidebar/sidebar.component.ts

@@ -1,11 +1,11 @@
-import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { DOCUMENT } from '@angular/common';
+import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector     : 'fuse-sidebar',
@@ -21,7 +21,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
     // Align
     @Input()
-    align: string;
+    align: 'left' | 'right';
 
     // Open
     @HostBinding('class.open')
@@ -38,21 +38,57 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     // Folded
     @HostBinding('class.folded')
     @Input()
-    set folded(value)
+    set folded(value: boolean)
     {
+        // Only work if the sidebar is not closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Set the folded
         this._folded = value;
 
-        if ( value )
+        // Programmatically add/remove margin to the element
+        // that comes after or before based on the alignment
+        let sibling,
+            styleRule;
+
+        const styleValue = '64px';
+
+        // Get the sibling and set the style rule
+        if ( this.align === 'left' )
         {
-            this.fold();
+            sibling = this.elementRef.nativeElement.nextElementSibling;
+            styleRule = 'marginLeft';
         }
         else
         {
-            this.unfold();
+            sibling = this.elementRef.nativeElement.previousElementSibling;
+            styleRule = 'marginRight';
+        }
+
+        // If there is no sibling, return...
+        if ( !sibling )
+        {
+            return;
+        }
+
+        // If folded...
+        if ( value )
+        {
+            // Set the style
+            this.renderer.setStyle(sibling, styleRule, styleValue);
+        }
+        // If unfolded...
+        else
+        {
+            // Remove the style
+            this.renderer.removeStyle(sibling, styleRule);
         }
     }
 
-    get folded()
+    get folded(): boolean
     {
         return this._folded;
     }
@@ -62,31 +98,31 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     unfolded: boolean;
 
     // Private
-    private _folded = false;
+    private _folded: boolean;
     private _wasActive: boolean;
     private _backdrop: HTMLElement | null = null;
     private _player: AnimationPlayer;
-    private _matchMediaWatcher: Subscription;
+    private _onMediaChangeSubscription: Subscription;
 
     /**
      * Constructor
      *
-     * @param renderer
-     * @param elementRef
-     * @param animationBuilder
-     * @param sidebarService
-     * @param matchMedia
-     * @param media
-     * @param document
+     * @param {Renderer2} renderer
+     * @param {ElementRef} elementRef
+     * @param {AnimationBuilder} animationBuilder
+     * @param {ObservableMedia} observableMedia
+     * @param {FuseConfigService} fuseConfigService
+     * @param {FuseSidebarService} fuseSidebarService
+     * @param {FuseMatchMediaService} fuseMatchMediaService
      */
     constructor(
         private renderer: Renderer2,
         private elementRef: ElementRef,
         private animationBuilder: AnimationBuilder,
-        private sidebarService: FuseSidebarService,
-        private matchMedia: FuseMatchMediaService,
-        private media: ObservableMedia,
-        @Inject(DOCUMENT) private document: any
+        private observableMedia: ObservableMedia,
+        private fuseConfigService: FuseConfigService,
+        private fuseSidebarService: FuseSidebarService,
+        private fuseMatchMediaService: FuseMatchMediaService
     )
     {
         // Set the defaults
@@ -101,7 +137,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     ngOnInit(): void
     {
         // Register the sidebar
-        this.sidebarService.register(this.name, this);
+        this.fuseSidebarService.register(this.name, this);
 
         // Setup alignment
         this._setupAlignment();
@@ -115,27 +151,35 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     ngOnDestroy(): void
     {
-        // Unregister the sidebar
-        this.sidebarService.unregister(this.name);
+        // If the sidebar is folded, unfold it to revert modifications
+        if ( this.folded )
+        {
+            this.unfold();
+        }
 
-        // Unregister the media watcher
-        this._matchMediaWatcher.unsubscribe();
+        // Unregister the sidebar
+        this.fuseSidebarService.unregister(this.name);
+
+        // Unsubscribe from the media watcher subscription
+        this._onMediaChangeSubscription.unsubscribe();
     }
 
     /**
-     * Setup the alignment
+     * Set the sidebar alignment
      *
      * @private
      */
     private _setupAlignment(): void
     {
-        if ( this.align === 'left' )
+        // Add the correct class name to the sidebar
+        // element depending on the align attribute
+        if ( this.align === 'right' )
         {
-            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
+            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
         }
         else
         {
-            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
+            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
         }
     }
 
@@ -156,12 +200,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         this._wasActive = false;
 
         // Act on every media change
-        this._matchMediaWatcher =
+        this._onMediaChangeSubscription =
 
-            this.matchMedia.onMediaChange.subscribe(() => {
+            this.fuseMatchMediaService.onMediaChange.subscribe(() => {
 
                 // Get the active status
-                const isActive = this.media.isActive(this.lockedOpen);
+                const isActive = this.observableMedia.isActive(this.lockedOpen);
 
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
@@ -169,14 +213,24 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     return;
                 }
 
-                // Store the new active status
-                this._wasActive = isActive;
-
                 // Activate the lockedOpen
                 if ( isActive )
                 {
                     // Set the lockedOpen status
                     this.isLockedOpen = true;
+
+                    // Force the the opened status to true
+                    this.opened = true;
+
+                    // Read the folded setting from the config
+                    // and fold the sidebar if it's true
+                    if ( this.fuseConfigService.config.layout.navigationFolded )
+                    {
+                        this.fold();
+                    }
+
+                    // Hide the backdrop if any exists
+                    this.hideBackdrop();
                 }
                 // De-Activate the lockedOpen
                 else
@@ -186,7 +240,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                     // Unfold the sidebar in case if it was folded
                     this.unfold();
+
+                    // Force the the opened status to close
+                    this.opened = false;
                 }
+
+                // Store the new active status
+                this._wasActive = isActive;
             });
     }
 
@@ -205,9 +265,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Set the opened status
         this.opened = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-opened');
     }
 
     /**
@@ -215,7 +272,7 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     close(): void
     {
-        if ( !this.opened )
+        if ( !this.opened || this.isLockedOpen )
         {
             return;
         }
@@ -225,9 +282,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Set the opened status
         this.opened = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened');
     }
 
     /**
@@ -259,9 +313,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Unfold the sidebar temporarily
         this.unfolded = true;
-
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded');
     }
 
     /**
@@ -278,9 +329,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
         // Fold the sidebar back
         this.unfolded = false;
-
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded');
     }
 
     /**
@@ -288,8 +336,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     fold(): void
     {
-        // Add a css class to the body
-        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
+        // Only work if the sidebar is not folded
+        if ( this.folded )
+        {
+            return;
+        }
+
+        // Fold
+        this.folded = true;
     }
 
     /**
@@ -297,8 +351,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     unfold(): void
     {
-        // Remove the css class from the body
-        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Unfold
+        this.folded = false;
     }
 
     /**
@@ -306,7 +366,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
      */
     toggleFold(): void
     {
-        this.folded = !this.folded;
+        if ( this.folded )
+        {
+            this.unfold();
+        }
+        else
+        {
+            this.fold();
+        }
     }
 
     /**

src/@fuse/components/sidebar/sidebar.service.ts

@@ -46,7 +46,7 @@ export class FuseSidebarService
         // Check if the sidebar exists
         if ( !this._registry[key] )
         {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);
         }
 
         // Unregister the sidebar
@@ -57,13 +57,14 @@ export class FuseSidebarService
      * Return the sidebar with the given key
      *
      * @param key
+     * @returns {FuseSidebarComponent}
      */
-    getSidebar(key): any
+    getSidebar(key): FuseSidebarComponent
     {
         // Check if the sidebar exists
         if ( !this._registry[key] )
         {
-            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+            console.warn(`The sidebar with the key '${key}' doesn't exist in the registry.`);
 
             return;
         }

src/@fuse/components/theme-options/theme-options.component.ts

@@ -1,13 +1,11 @@
-import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
-import { navigation } from 'app/navigation/navigation';
-
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',
@@ -16,6 +14,7 @@ import { navigation } from 'app/navigation/navigation';
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
+    @Input() navigation;
     @ViewChild('openButton') openButton;
     @ViewChild('panel') panel;
     @ViewChild('overlay') overlay: ElementRef;
@@ -43,10 +42,17 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                         this.config = newConfig;
                     }
                 );
+    }
+
+    ngOnInit()
+    {
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
+        });
 
         // Get the nav model and add customize nav item
         // that opens the bar programmatically
-        const nav: any = navigation;
+        const nav: any = this.navigation;
 
         nav.push({
             'id'      : 'custom-function',
@@ -66,13 +72,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         });
     }
 
-    ngOnInit()
-    {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
-        });
-    }
-
     ngOnDestroy()
     {
         this.onConfigChanged.unsubscribe();

src/@fuse/components/widget/widget.component.scss

@@ -67,16 +67,16 @@ fuse-widget {
 
         &.mat-form-field-type-mat-select {
 
-            .mat-input-wrapper {
+            .mat-form-field-wrapper {
                 padding: 16px 0;
 
-                .mat-input-infix {
+                .mat-form-field-infix {
                     border: none;
                     padding: 0;
                 }
             }
 
-            .mat-input-underline {
+            .mat-form-field-underline {
                 display: none;
             }
         }

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
 import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import PerfectScrollbar from 'perfect-scrollbar';
 

src/@fuse/scss/core.scss

@@ -1,3 +1,6 @@
+// This file meant to be imported only once! Use fuse.scss to access
+// to the core Fuse and Angular Material mixins
+
 // ngx-datatable
 @import '~@swimlane/ngx-datatable/release/themes/material';
 
@@ -7,10 +10,13 @@
 // Fuse
 @import "fuse";
 
-// Theming
+// Include core Angular Material styles
 @include mat-core();
 
-// Include theme styles for core and each component used in your app.
+// Setup the typography
+@include angular-material-typography($typography);
+
+// Create an Angular Material theme from the $theme map
 @include angular-material-theme($theme);
 
 // Partials

src/@fuse/scss/fuse.scss

@@ -1,4 +1,5 @@
-// Variables
-@import "variables/theme";
-// Mixins
+// Material theming
+@import "theming";
+
+// Breakpoint mixins
 @import "mixins/breakpoints";

src/@fuse/scss/partials/_angular-material-fix.scss

@@ -7,7 +7,7 @@
 }
 
 // Fix: "Inconsistent font sizes across elements"
-.mat-input-wrapper {
+.mat-form-field-wrapper {
     font-size: 16px;
 }
 
@@ -34,7 +34,7 @@
 
     &.mat-form-field-type-mat-select {
 
-        .mat-input-infix {
+        .mat-form-field-infix {
             display: inline-flex;
             width: auto;
 
@@ -57,7 +57,7 @@
     }
 }
 
-// Fix: "Stepper icons are broken due to Fuse's icon helpers"
+// Fix: Stepper icons are broken due to Fuse's icon helpers
 mat-horizontal-stepper,
 mat-vertical-stepper {
 
@@ -68,11 +68,20 @@ mat-vertical-stepper {
             width: 16px !important;
             min-width: 0 !important;
             min-height: 0 !important;
-            color: rgba(255, 255, 255, 0.87) !important;
+            color: inherit !important;
         }
     }
 }
 
 mat-vertical-stepper {
     padding: 16px 0;
+}
+
+// Fix: Chip remove icon is broken due to Fuse's icon helpers
+mat-chip {
+
+    mat-icon {
+        min-width: 0 !important;
+        min-height: 0 !important;
+    }
 }

src/@fuse/scss/partials/_colors.scss

@@ -1,6 +1,6 @@
 .secondary-text,
-.mat-icon,
-.icon {
+.icon,
+i {
     color: rgba(0, 0, 0, 0.54);
 }
 
@@ -51,7 +51,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     // If the base text color is black...
     @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
 
-        .mat-icon,
+        i,
         .icon {
             color: rgba(0, 0, 0, 0.54);
         }
@@ -81,7 +81,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         // If the base text color is white...
     @else {
 
-        .mat-icon,
+        i,
         .icon {
             color: rgba(255, 255, 255, 1);
         }
@@ -135,11 +135,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
     }
 
     // Input
-    .mat-input-placeholder {
+    .mat-form-field-label {
         color: map_get($fuseForeground, hint-text);
     }
 
-    .mat-input-underline {
+    .mat-form-field-underline {
         background-color: map_get($fuseForeground, divider);
     }
 

src/@fuse/scss/partials/_icons.scss

@@ -1,6 +1,5 @@
 i,
 mat-icon {
-    color: rgba(0, 0, 0, 0.54);
     font-size: 24px;
     width: 24px;
     height: 24px;

src/@fuse/scss/partials/_reset.scss

@@ -28,7 +28,7 @@ html, body {
 }
 
 // Reset non angular-material input's default browser/os styles
-*:not(mat-input-container) {
+*:not(mat-form-field) {
 
     > input {
         border: none;
@@ -55,7 +55,7 @@ html, body {
     }
 }
 
-*:not(mat-input-container) {
+*:not(mat-form-field) {
 
     > input[type="button"],
     > button,

src/@fuse/scss/theming.scss

@@ -1,5 +1,6 @@
 @import '~@angular/material/theming';
 
+// Custom color maps
 $mat-white: (
     500: white,
     contrast: (
@@ -47,13 +48,19 @@ $mat-fusedark: (
     )
 );
 
-// Palettes
+// Define the Material palettes
 $primary: mat-palette($mat-fusedark);
 $accent: mat-palette($mat-light-blue, 600, 400, 700);
 $warn: mat-palette($mat-red);
 
-// Create the theme object (a Sass map containing all of the palettes).
+// Create the Material theme object
 $theme: mat-light-theme($primary, $accent, $warn);
 
+// Store the background and foreground colors for easier access
 $background: map-get($theme, background);
 $foreground: map-get($theme, foreground);
+
+// Force the input field font sizes to 16px
+$typography: mat-typography-config(
+    $input: mat-typography-level(16px, 1.125, 400)
+)

src/@fuse/services/config.service.ts

@@ -1,25 +1,9 @@
-import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
+import { BehaviorSubject } from 'rxjs';
 
-// Define the default config
-const DEFAULT_CONFIG = {
-    layout          : {
-        navigation      : 'left', // 'right', 'left', 'top', 'none'
-        navigationFolded: false, // true, false
-        toolbar         : 'below', // 'above', 'below', 'none'
-        footer          : 'below', // 'above', 'below', 'none'
-        mode            : 'fullwidth' // 'boxed', 'fullwidth'
-    },
-    colorClasses    : {
-        toolbar: 'mat-white-500-bg',
-        navbar : 'mat-fuse-dark-700-bg',
-        footer : 'mat-fuse-dark-900-bg'
-    },
-    customScrollbars: true,
-    routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft, none
-};
+import * as _ from 'lodash';
 
 // Create the injection token for the custom config
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
@@ -29,6 +13,7 @@ export class FuseConfigService
 {
     config: any;
     defaultConfig: any;
+    isSetConfigRan = false;
 
     onConfigChanged: BehaviorSubject<any>;
 
@@ -42,18 +27,11 @@ export class FuseConfigService
     constructor(
         private router: Router,
         public platform: Platform,
-        @Inject(FUSE_CONFIG) @Optional() config
+        @Inject(FUSE_CONFIG) config
     )
     {
-        // Set the default settings from the constant
-        this.defaultConfig = DEFAULT_CONFIG;
-
-        // If custom config provided with forRoot,
-        // use them as default config...
-        if ( config )
-        {
-            this.defaultConfig = config;
-        }
+        // Set the default config from the user provided one (forRoot)
+        this.defaultConfig = config;
 
         /**
          * Disable Custom Scrollbars if Browser is Mobile
@@ -64,14 +42,25 @@ export class FuseConfigService
         }
 
         // Set the config from the default config
-        this.config = {...this.defaultConfig};
+        this.config = _.cloneDeep(this.defaultConfig);
 
         // Reload the default settings for the
         // layout on every navigation start
         router.events.subscribe(
             (event) => {
+
                 if ( event instanceof NavigationStart )
                 {
+                    this.isSetConfigRan = false;
+                }
+
+                if ( event instanceof NavigationEnd )
+                {
+                    if ( this.isSetConfigRan )
+                    {
+                        return;
+                    }
+
                     this.setConfig({
                             layout: this.defaultConfig.layout
                         }
@@ -91,20 +80,11 @@ export class FuseConfigService
      */
     setConfig(config): void
     {
-        // Set the config from the given object
-        // Ugly, but works for now...
-        this.config = {
-            ...this.config,
-            ...config,
-            layout     : {
-                ...this.config.layout,
-                ...config.layout,
-            },
-            colorClasses: {
-                ...this.config.colorClasses,
-                ...config.colorClasses
-            }
-        };
+        // Set the SetConfigRan true
+        this.isSetConfigRan = true;
+
+        // Merge the config
+        this.config = _.merge({}, this.config, config);
 
         // Trigger the event
         this.onConfigChanged.next(this.config);

src/@fuse/services/match-media.service.ts

@@ -1,6 +1,6 @@
 import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
 export class FuseMatchMediaService

src/app/main/content/content.component.ts

@@ -1,9 +1,8 @@
 import { Component, HostBinding, OnDestroy } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
-import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
+import { Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 
 import { fuseAnimations } from '@fuse/animations/index';
 import { FuseConfigService } from '@fuse/services/config.service';
@@ -31,29 +30,29 @@ export class FuseContentComponent implements OnDestroy
         private fuseConfig: FuseConfigService
     )
     {
-        this.router.events
-            .filter((event) => event instanceof NavigationEnd)
-            .map(() => this.activatedRoute)
-            .subscribe((event) => {
-                switch ( this.fuseSettings.routerAnimation )
-                {
-                    case 'fadeIn':
-                        this.routeAnimationFade = !this.routeAnimationFade;
-                        break;
-                    case 'slideUp':
-                        this.routeAnimationUp = !this.routeAnimationUp;
-                        break;
-                    case 'slideDown':
-                        this.routeAnimationDown = !this.routeAnimationDown;
-                        break;
-                    case 'slideRight':
-                        this.routeAnimationRight = !this.routeAnimationRight;
-                        break;
-                    case 'slideLeft':
-                        this.routeAnimationLeft = !this.routeAnimationLeft;
-                        break;
-                }
-            });
+        this.router.events.pipe(
+            filter((event) => event instanceof NavigationEnd),
+            map(() => this.activatedRoute)
+        ).subscribe((event) => {
+            switch ( this.fuseSettings.routerAnimation )
+            {
+                case 'fadeIn':
+                    this.routeAnimationFade = !this.routeAnimationFade;
+                    break;
+                case 'slideUp':
+                    this.routeAnimationUp = !this.routeAnimationUp;
+                    break;
+                case 'slideDown':
+                    this.routeAnimationDown = !this.routeAnimationDown;
+                    break;
+                case 'slideRight':
+                    this.routeAnimationRight = !this.routeAnimationRight;
+                    break;
+                case 'slideLeft':
+                    this.routeAnimationLeft = !this.routeAnimationLeft;
+                    break;
+            }
+        });
 
         this.onConfigChanged =
             this.fuseConfig.onConfigChanged

src/app/main/footer/footer.component.html

@@ -6,7 +6,7 @@
            target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
-            <span>Purchase FUSE (Angular5+)</span>
+            <span>Purchase FUSE (Angular 6+)</span>
         </a>
 
         <div fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-xs>

src/app/main/main.component.html

@@ -67,11 +67,11 @@
     </div>
 
     <!-- QUICK PANEL -->
-    <mat-sidenav fuseMatSidenavHelper="quick-panel" align="end">
+    <mat-sidenav fuseMatSidenavHelper="quick-panel" position="end">
         <fuse-quick-panel></fuse-quick-panel>
     </mat-sidenav>
     <!-- / QUICK PANEL -->
 
 </mat-sidenav-container>
 
-<fuse-theme-options></fuse-theme-options>
+<fuse-theme-options [navigation]="navigation"></fuse-theme-options>

src/app/main/main.component.ts

@@ -1,10 +1,12 @@
 import { Component, ElementRef, HostBinding, Inject, OnDestroy, Renderer2, ViewEncapsulation } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Platform } from '@angular/cdk/platform';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector     : 'fuse-main',
     templateUrl  : './main.component.html',
@@ -15,6 +17,8 @@ export class FuseMainComponent implements OnDestroy
 {
     onConfigChanged: Subscription;
     fuseSettings: any;
+    navigation: any;
+
     @HostBinding('attr.fuse-layout-mode') layoutMode;
 
     constructor(
@@ -38,6 +42,8 @@ export class FuseMainComponent implements OnDestroy
         {
             this.document.body.className += ' is-mobile';
         }
+
+        this.navigation = navigation;
     }
 
     ngOnDestroy()

src/app/main/navbar/navbar.component.html

@@ -9,13 +9,13 @@
                 <span class="logo-text">FUSE</span>
             </div>
 
-            <button mat-button class="toggle-button-navbar mat-icon-button"
-                    (click)="toggleSidebarFolded('navbar')" fxHide.lt-lg>
+            <button mat-icon-button class="toggle-button-navbar"
+                    (click)="toggleSidebarFolded()" fxHide.lt-lg>
                 <mat-icon>menu</mat-icon>
             </button>
 
-            <button mat-button class="toggle-button-navbar mat-icon-button"
-                    (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
+            <button mat-icon-button class="toggle-button-navbar"
+                    (click)="toggleSidebarOpened()" fxHide.gt-md>
                 <mat-icon>arrow_back</mat-icon>
             </button>
 

src/app/main/navbar/navbar.component.ts

@@ -1,11 +1,14 @@
-import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+
+import { Subscription } from 'rxjs';
 
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarComponent } from '@fuse/components/sidebar/sidebar.component';
 
 @Component({
     selector     : 'fuse-navbar',
@@ -13,7 +16,7 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
     styleUrls    : ['./navbar.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarComponent implements OnDestroy
+export class FuseNavbarComponent implements OnInit, OnDestroy
 {
     private fusePerfectScrollbar: FusePerfectScrollbarDirective;
 
@@ -41,7 +44,8 @@ export class FuseNavbarComponent implements OnDestroy
 
     constructor(
         private sidebarService: FuseSidebarService,
-        private navigationService: FuseNavigationService
+        private navigationService: FuseNavigationService,
+        private router: Router
     )
     {
         // Navigation data
@@ -51,6 +55,21 @@ export class FuseNavbarComponent implements OnDestroy
         this.layout = 'vertical';
     }
 
+    ngOnInit()
+    {
+        this.router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationEnd )
+                {
+                    if ( this.sidebarService.getSidebar('navbar') )
+                    {
+                        this.sidebarService.getSidebar('navbar').close();
+                    }
+                }
+            }
+        );
+    }
+
     ngOnDestroy()
     {
         if ( this.fusePerfectScrollbarUpdateTimeout )
@@ -64,13 +83,13 @@ export class FuseNavbarComponent implements OnDestroy
         }
     }
 
-    toggleSidebarOpened(key)
+    toggleSidebarOpened()
     {
-        this.sidebarService.getSidebar(key).toggleOpen();
+        this.sidebarService.getSidebar('navbar').toggleOpen();
     }
 
-    toggleSidebarFolded(key)
+    toggleSidebarFolded()
     {
-        this.sidebarService.getSidebar(key).toggleFold();
+        this.sidebarService.getSidebar('navbar').toggleFold();
     }
 }

src/app/main/toolbar/toolbar.component.html

@@ -6,7 +6,7 @@
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <button mat-button class="toggle-button-navbar mat-icon-button"
+            <button mat-icon-button class="toggle-button-navbar"
                     *ngIf="!noNav"
                     (click)="toggleSidebarOpened('navbar')" fxHide.gt-md>
                 <mat-icon>menu</mat-icon>
@@ -21,7 +21,7 @@
             </div>
 
             <div class="px-8 px-mat-16">
-                <fuse-shortcuts></fuse-shortcuts>
+                <fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
             </div>
 
         </div>
@@ -85,7 +85,7 @@
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
             <button mat-icon-button
-                    class="mat-icon-button quick-panel-toggle-button"
+                    class="quick-panel-toggle-button"
                     fuseMatSidenavToggler="quick-panel"
                     aria-label="Toggle quick panel">
                 <mat-icon class="icon">format_list_bulleted</mat-icon>

src/app/main/toolbar/toolbar.component.ts

@@ -5,6 +5,8 @@ import { TranslateService } from '@ngx-translate/core';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector   : 'fuse-toolbar',
     templateUrl: './toolbar.component.html',
@@ -19,6 +21,7 @@ export class FuseToolbarComponent
     showLoadingBar: boolean;
     horizontalNav: boolean;
     noNav: boolean;
+    navigation: any;
 
     constructor(
         private router: Router,
@@ -87,6 +90,7 @@ export class FuseToolbarComponent
             this.noNav = settings.layout.navigation === 'none';
         });
 
+        this.navigation = navigation;
     }
 
     toggleSidebarOpened(key)

src/browserslist

@@ -0,0 +1,9 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+# IE 9-11

src/environments/environment.ts

@@ -1,9 +1,16 @@
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
 
 export const environment = {
     production: false,
     hmr       : false
 };
+
+/*
+ * In development mode, to ignore zone related error stack frames such as
+ * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
+ * import the following file, but please comment it out in production mode
+ * because it will have performance impact when throw error
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/index.html

@@ -3,12 +3,12 @@
 
     <head>
 
-        <title>Fuse2 - Angular 5+ Material Design Admin Template</title>
+        <title>Fuse - Angular 6+ Material Design Admin Template</title>
         <base href="/">
 
         <meta charset="utf-8">
         <meta name="description" content="Material design admin template with pre-built apps and pages">
-        <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 4,Angular 5,Angular 6,Material">
+        <meta name="keywords" content="HTML,CSS,AngularJS,Angular,Angular 2,Angular 4,Angular 5,Angular 6,Material">
         <meta name="author" content="Withinpixels">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 

src/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config)
+{
+    config.set({
+        basePath                : '..',
+        frameworks              : ['jasmine', '@angular-devkit/build-angular'],
+        plugins                 : [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage-istanbul-reporter'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client                  : {
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageIstanbulReporter: {
+            dir                  : require('path').join(__dirname, '../coverage'),
+            reports              : ['html', 'lcovonly'],
+            fixWebpackSourcePaths: true
+        },
+        reporters               : ['progress', 'kjhtml'],
+        port                    : 9876,
+        colors                  : true,
+        logLevel                : config.LOG_INFO,
+        autoWatch               : true,
+        browsers                : ['Chrome'],
+        singleRun               : false
+    });
+};

src/main.ts

@@ -1,9 +1,9 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-import { hmrBootstrap } from './hmr';
+import { AppModule } from 'app/app.module';
+import { environment } from 'environments/environment';
+import { hmrBootstrap } from 'hmr';
 
 if ( environment.production )
 {

src/polyfills.ts

@@ -42,34 +42,46 @@ import 'classlist.js';  // Run `npm install --save classlist.js`.
 /** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';
 
+
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es7/reflect';
 
+
 /**
- * Required to support Web Animations `@angular/platform-browser/animations`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+/*
+* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+* with the following flag, it will bypass `zone.js` patch for IE/Edge
+*/
+// (window as any).__Zone_enable_cross_context_check = true;
+
 /***************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
+
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
 
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-import 'intl/locale-data/jsonp/en';
+// Add global to window, assigning the value of window itself.
+(window as any).global = window;
 
 /**
  * Fix for ngx-chart to work on ie11

src/styles.scss

@@ -1,2 +1,2 @@
-// Import Fuse main library
+// Import Fuse core library
 @import "@fuse/scss/core";

src/test.ts

@@ -1,24 +1,14 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare const __karma__: any;
 declare const require: any;
 
-// Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
@@ -28,5 +18,3 @@ getTestBed().initTestEnvironment(
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.
 context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();

src/tsconfig.app.json

@@ -2,12 +2,10 @@
     "extends": "../tsconfig.json",
     "compilerOptions": {
         "outDir": "../out-tsc/app",
-        "baseUrl": "./",
-        "module": "es2015",
-        "types": []
+        "module": "es2015"
     },
     "exclude": [
-        "test.ts",
+        "src/test.ts",
         "**/*.spec.ts"
     ]
 }

src/tsconfig.spec.json

@@ -2,16 +2,15 @@
     "extends": "../tsconfig.json",
     "compilerOptions": {
         "outDir": "../out-tsc/spec",
-        "baseUrl": "./",
         "module": "commonjs",
-        "target": "es5",
         "types": [
             "jasmine",
             "node"
         ]
     },
     "files": [
-        "test.ts"
+        "test.ts",
+        "polyfills.ts"
     ],
     "include": [
         "**/*.spec.ts",

src/tslint.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "fuse",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "fuse",
+            "kebab-case"
+        ]
+    }
+}

src/typings.d.ts

@@ -1,5 +0,0 @@
-/* SystemJS module definition */
-declare var module: NodeModule;
-interface NodeModule {
-    id: string;
-}

tsconfig.json

@@ -8,12 +8,12 @@
         "moduleResolution": "node",
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
-        "target": "es5",
         "paths": {
             "@fuse": [
                 "@fuse/"
             ]
         },
+        "target": "es5",
         "typeRoots": [
             "node_modules/@types"
         ],

tslint.json

@@ -11,11 +11,13 @@
             "check-space"
         ],
         "curly": true,
+        "deprecation": {
+            "severity": "warn"
+        },
         "eofline": true,
         "forin": true,
         "import-blacklist": [
             true,
-            "rxjs",
             "rxjs/Rx"
         ],
         "import-spacing": true,
@@ -109,29 +111,15 @@
             "check-separator",
             "check-type"
         ],
-        "directive-selector": [
-            true,
-            "attribute",
-            "fuse",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "fuse",
-            "kebab-case"
-        ],
+        "no-output-on-prefix": true,
         "use-input-property-decorator": true,
         "use-output-property-decorator": true,
         "use-host-property-decorator": true,
-        "no-input-rename": false,
-        "no-output-rename": false,
+        "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
+        "directive-class-suffix": true
     }
 }