Merge master into skeleton

Fixed: Fuse Navigation collapsable items don't collapse/expand correctly after certain level if used more than once within the same group
Fixed: Better dark mode support for Calendar App

.editorconfig

@@ -1,13 +1,6 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
 [*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=4

CREDITS

@@ -0,0 +1,16 @@
+// -----------------------------------------------------------------------------------------------------
+// @ Image/Vector/Icon Credits
+// -----------------------------------------------------------------------------------------------------
+Avatars - https://uifaces.co/
+Flag icons - http://www.famfamfam.com/lab/icons/flags/
+Frame vector created by Freepik - https://www.freepik.com/free-photos-vectors/frame
+A Walk Amongst Friends - Photo by Kristin Ellis on Unsplash - https://unsplash.com/photos/CbZOGbazDWQ
+Sunrise at Moraine Lake - Photo by Marlon Martinez on Unsplash - https://unsplash.com/photos/woNYcfrnp9M
+Braies Lake - Photo by Luca Nicoletti on Unsplash - https://unsplash.com/photos/dH-L5zPcv3E
+Lago di Sorapis - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/6uDg_zb20EM
+Lago di Braies - Photo by Salmen Bejaoui on Unsplash - https://unsplash.com/photos/uXTozY3CcQg
+Reaching - Photo by Justin Novello on Unsplash - https://unsplash.com/photos/Y14TNvIDllM
+Yosemite - Photo by Tim Mossholder on Unsplash - https://unsplash.com/photos/ZCrtRSSUpGI
+Never Stop Changing - Photo by John Westrock on Unsplash - https://unsplash.com/photos/_GY56uSG70U
+Fall glow - Photo by Casey Horner on Unsplash - https://unsplash.com/photos/gz19zOdgN7w
+First snow - Photo by eberhard grossgasteiger on Unsplash - https://unsplash.com/photos/LRrGf6dBjA4

LICENSE

@@ -1 +1,2 @@
-https://themeforest.net/licenses/terms/regular
+This project is protected by Envato's Regular License. For more information,
+check the official license page at https://themeforest.net/licenses/terms/regular

README.md

@@ -1,6 +1,6 @@
-# Fuse2
+# Fuse - Angular
 
-Material Design Admin Template with Angular 6+ and Angular Material 2
+Material Design Admin Template with Angular 8 and Angular Material
 
 ## The Community
 

angular.json

@@ -4,33 +4,33 @@
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
-            "root": "",
-            "sourceRoot": "src",
             "projectType": "application",
-            "prefix": "app",
             "schematics": {
                 "@schematics/angular:component": {
-                    "styleext": "scss"
+                    "style": "scss"
                 }
             },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
             "architect": {
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
-                        "outputPath": "dist",
+                        "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.app.json",
+                        "tsConfig": "tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
-                            "src/assets",
-                            "src/app/main/content/components/angular-material"
+                            "src/assets"
                         ],
                         "styles": [
                             "src/styles.scss"
                         ],
-                        "scripts": []
+                        "scripts": [],
+                        "showCircularDependencies": false
                     },
                     "configurations": {
                         "production": {
@@ -48,7 +48,26 @@
                             "aot": true,
                             "extractLicenses": true,
                             "vendorChunk": false,
-                            "buildOptimizer": true
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "4mb",
+                                    "maximumError": "6mb"
+                                }
+                            ]
+                        },
+                        "ec": {
+                            "sourceMap": true,
+                            "extractCss": true
+                        },
+                        "hmr": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
                         }
                     }
                 },
@@ -63,12 +82,10 @@
                         },
                         "hmr": {
                             "hmr": true,
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.hmr.ts"
-                                }
-                            ]
+                            "browserTarget": "fuse:build:hmr"
+                        },
+                        "ec": {
+                            "browserTarget": "fuse:build:ec"
                         }
                     }
                 },
@@ -83,54 +100,41 @@
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
-                        "karmaConfig": "src/karma.conf.js",
-                        "styles": [
-                            "styles.scss"
-                        ],
-                        "scripts": [],
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
                         "assets": [
                             "src/favicon.ico",
                             "src/assets"
-                        ]
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
                     }
                 },
                 "lint": {
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": [
-                            "src/tsconfig.app.json",
-                            "src/tsconfig.spec.json"
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
                         ],
                         "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fuse-fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
+                            "**/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/**",
-                            "**/src/app/fuse-fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
-                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "fuse:serve:production"
+                        }
                     }
                 }
             }

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

e2e/protractor.conf.js

@@ -1,8 +1,12 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const {SpecReporter} = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
     allScriptsTimeout: 11000,
     specs            : [
@@ -24,7 +28,7 @@ exports.config = {
     onPrepare()
     {
         require('ts-node').register({
-            project: require('path').join(__dirname, './tsconfig.e2e.json')
+            project: require('path').join(__dirname, './tsconfig.json')
         });
         jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
     }

e2e/src/app.e2e-spec.ts

@@ -1,14 +1,23 @@
-import { Fuse2Page } from './app.po';
+import { FusePage } from './app.po';
+import { browser, logging } from 'protractor';
 
-describe('Fuse2 App', () => {
-    let page: Fuse2Page;
+describe('Fuse App', () => {
+    let page: FusePage;
 
     beforeEach(() => {
-        page = new Fuse2Page();
+        page = new FusePage();
     });
 
     it('should display welcome message', () => {
         page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse!');
+    });
+
+    afterEach(async () => {
+        // Assert that there are no errors emitted from the browser
+        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+        expect(logs).not.toContain(jasmine.objectContaining({
+            level: logging.Level.SEVERE
+        } as logging.Entry));
     });
 });

e2e/src/app.po.ts

@@ -1,11 +1,14 @@
 import { browser, by, element } from 'protractor';
 
-export class Fuse2Page {
-    navigateTo() {
-        return browser.get('/');
+export class FusePage
+{
+    navigateTo(): Promise<any>
+    {
+        return browser.get('/') as Promise<any>;
     }
 
-    getParagraphText() {
-        return element(by.css('app-root h1')).getText();
+    getParagraphText(): Promise<string>
+    {
+        return element(by.css('app #main')).getText() as Promise<string>;
     }
 }

e2e/tsconfig.e2e.json

@@ -1,13 +1,13 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
 }

e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/e2e",
+        "module": "commonjs",
+        "target": "es5",
+        "types": [
+            "jasmine",
+            "jasminewd2",
+            "node"
+        ]
+    }
+}

karma.conf.js

@@ -4,7 +4,7 @@
 module.exports = function (config)
 {
     config.set({
-        basePath                : '..',
+        basePath                : '',
         frameworks              : ['jasmine', '@angular-devkit/build-angular'],
         plugins                 : [
             require('karma-jasmine'),
@@ -17,8 +17,8 @@ module.exports = function (config)
             clearContext: false // leave Jasmine Spec Runner output visible in browser
         },
         coverageIstanbulReporter: {
-            dir                  : require('path').join(__dirname, '../coverage'),
-            reports              : ['html', 'lcovonly'],
+            dir                  : require('path').join(__dirname, './coverage/fuse'),
+            reports              : ['html', 'lcovonly', 'text-summary'],
             fixWebpackSourcePaths: true
         },
         reporters               : ['progress', 'kjhtml'],
@@ -27,6 +27,7 @@ module.exports = function (config)
         logLevel                : config.LOG_INFO,
         autoWatch               : true,
         browsers                : ['Chrome'],
-        singleRun               : false
+        singleRun               : false,
+        restartOnFileChange     : true
     });
 };

package.json

@@ -1,88 +1,88 @@
 {
-  "name": "fuse",
-  "version": "6.0.1",
-  "license": "https://themeforest.net/licenses/terms/regular",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve --open",
-    "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",
-    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
-    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
-  },
-  "private": true,
-  "dependencies": {
-    "@agm/core": "1.0.0-beta.2",
-    "@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.24.0",
-    "angular-in-memory-web-api": "0.6.0",
-    "chart.js": "2.7.2",
-    "classlist.js": "1.1.20150312",
-    "core-js": "2.5.6",
-    "d3": "5.2.0",
-    "hammerjs": "2.0.8",
-    "lodash": "4.17.10",
-    "moment": "2.22.1",
-    "ng2-charts": "1.6.0",
-    "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.14.0",
-    "rxjs": "6.1.0",
-    "rxjs-compat": "6.1.0",
-    "web-animations-js": "2.3.1",
-    "zone.js": "0.8.26"
-  },
-  "devDependencies": {
-    "@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.7",
-    "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.108",
-    "@types/node": "8.9.5",
-    "codelyzer": "4.2.1",
-    "jasmine-core": "2.99.1",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "1.4.2",
-    "karma-jasmine": "1.1.2",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.3.1",
-    "ts-node": "5.0.1",
-    "tslint": "5.9.1",
-    "typescript": "2.7.2",
-    "webpack-bundle-analyzer": "2.11.1"
-  }
+    "name": "fuse",
+    "version": "8.1.2",
+    "license": "https://themeforest.net/licenses/terms/regular",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve --open",
+        "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+        "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
+        "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",
+        "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
+        "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e",
+        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
+    },
+    "private": true,
+    "dependencies": {
+        "@agm/core": "1.0.0-beta.7",
+        "@angular/animations": "8.1.2",
+        "@angular/cdk": "8.1.1",
+        "@angular/common": "8.1.2",
+        "@angular/compiler": "8.1.2",
+        "@angular/core": "8.1.2",
+        "@angular/flex-layout": "8.0.0-beta.26",
+        "@angular/forms": "8.1.2",
+        "@angular/material": "8.1.1",
+        "@angular/material-moment-adapter": "8.1.1",
+        "@angular/platform-browser": "8.1.2",
+        "@angular/platform-browser-dynamic": "8.1.2",
+        "@angular/router": "8.1.2",
+        "@ngrx/effects": "8.1.0",
+        "@ngrx/router-store": "8.1.0",
+        "@ngrx/store": "8.1.0",
+        "@ngrx/store-devtools": "8.1.0",
+        "@ngx-translate/core": "11.0.1",
+        "@swimlane/dragula": "3.8.0",
+        "@swimlane/ngx-charts": "12.0.1",
+        "@swimlane/ngx-datatable": "15.0.2",
+        "@swimlane/ngx-dnd": "8.0.0",
+        "@types/prismjs": "1.16.0",
+        "angular-calendar": "0.27.13",
+        "angular-in-memory-web-api": "0.8.0",
+        "chart.js": "2.8.0",
+        "classlist.js": "1.1.20150312",
+        "d3": "5.9.7",
+        "date-fns": "1.30.1",
+        "hammerjs": "2.0.8",
+        "lodash": "4.17.15",
+        "moment": "2.24.0",
+        "ng2-charts": "2.3.0",
+        "ngrx-store-freeze": "0.2.4",
+        "ngx-color-picker": "8.1.0",
+        "ngx-cookie-service": "2.2.0",
+        "perfect-scrollbar": "1.4.0",
+        "prismjs": "1.16.0",
+        "rxjs": "6.5.2",
+        "web-animations-js": "2.3.2",
+        "zone.js": "0.9.1"
+    },
+    "devDependencies": {
+        "@angular/cli": "8.1.2",
+        "@angular/compiler-cli": "8.1.2",
+        "@angular/language-service": "8.1.2",
+        "@angular-devkit/build-angular": "0.801.2",
+        "@angularclass/hmr": "2.1.3",
+        "@types/jasmine": "3.3.14",
+        "@types/jasminewd2": "2.0.6",
+        "@types/lodash": "4.14.136",
+        "@types/node": "8.9.5",
+        "codelyzer": "5.1.0",
+        "jasmine-core": "3.4.0",
+        "jasmine-spec-reporter": "4.2.1",
+        "karma": "4.1.0",
+        "karma-chrome-launcher": "2.2.0",
+        "karma-coverage-istanbul-reporter": "2.0.5",
+        "karma-jasmine": "2.0.1",
+        "karma-jasmine-html-reporter": "1.4.2",
+        "protractor": "5.4.2",
+        "ts-node": "7.0.1",
+        "tslib": "1.10.0",
+        "tslint": "5.15.0",
+        "typescript": "3.4.5",
+        "webpack-bundle-analyzer": "3.3.2"
+    }
 }

src/@fuse/animations/index.ts

@@ -51,26 +51,23 @@ export const fuseAnimations = [
     ]),
 
     trigger('fadeInOut', [
-        state('0', style({
-            display: 'none',
+        state('0, void', style({
             opacity: 0
         })),
-        state('1', style({
-            display: 'block',
+        state('1, *', style({
             opacity: 1
         })),
         transition('1 => 0', animate('300ms ease-out')),
-        transition('0 => 1', animate('300ms ease-in'))
+        transition('0 => 1', animate('300ms ease-in')),
+        transition('void <=> *', animate('300ms ease-in'))
     ]),
 
     trigger('slideInOut', [
         state('0', style({
-            height : '0px',
-            display: 'none'
+            height: '0px'
         })),
         state('1', style({
-            height : '*',
-            display: 'block'
+            height: '*'
         })),
         transition('1 => 0', animate('300ms ease-out')),
         transition('0 => 1', animate('300ms ease-in'))
@@ -120,17 +117,15 @@ export const fuseAnimations = [
                     })
                 )
             ]
-        ),
+        )
     ]),
 
     trigger('slideInLeft', [
         state('void', style({
             transform: 'translateX(-100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateX(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -139,11 +134,9 @@ export const fuseAnimations = [
     trigger('slideInRight', [
         state('void', style({
             transform: 'translateX(100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateX(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -152,11 +145,9 @@ export const fuseAnimations = [
     trigger('slideInTop', [
         state('void', style({
             transform: 'translateY(-100%)',
-            display  : 'none'
         })),
         state('*', style({
             transform: 'translateY(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -166,11 +157,9 @@ export const fuseAnimations = [
         state('void',
             style({
                 transform: 'translateY(100%)',
-                display  : 'none'
             })),
         state('*', style({
             transform: 'translateY(0)',
-            display  : 'flex'
         })),
         transition('void => *', animate('300ms')),
         transition('* => void', animate('300ms'))
@@ -187,10 +176,14 @@ export const fuseAnimations = [
         transition('* => void', animate('300ms ease-in'))
     ]),
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Router animations
+    // -----------------------------------------------------------------------------------------------------
+
     trigger('routerTransitionLeft', [
 
         transition('* => *', [
-            query('fuse-content > :enter, fuse-content > :leave', [
+            query('content > :enter, content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -199,7 +192,7 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('fuse-content > :enter', [
+            query('content > :enter', [
                 style({
                     transform: 'translateX(100%)',
                     opacity  : 0
@@ -207,7 +200,7 @@ export const fuseAnimations = [
             ], {optional: true}),
             sequence([
                 group([
-                    query('fuse-content > :leave', [
+                    query('content > :leave', [
                         style({
                             transform: 'translateX(0)',
                             opacity  : 1
@@ -218,7 +211,7 @@ export const fuseAnimations = [
                                 opacity  : 0
                             }))
                     ], {optional: true}),
-                    query('fuse-content > :enter', [
+                    query('content > :enter', [
                         style({transform: 'translateX(100%)'}),
                         animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
@@ -227,8 +220,8 @@ export const fuseAnimations = [
                             }))
                     ], {optional: true})
                 ]),
-                query('fuse-content > :leave', animateChild(), {optional: true}),
-                query('fuse-content > :enter', animateChild(), {optional: true})
+                query('content > :leave', animateChild(), {optional: true}),
+                query('content > :enter', animateChild(), {optional: true})
             ])
         ])
     ]),
@@ -236,7 +229,7 @@ export const fuseAnimations = [
     trigger('routerTransitionRight', [
 
         transition('* => *', [
-            query('fuse-content > :enter, fuse-content > :leave', [
+            query('content > :enter, content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -245,7 +238,7 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('fuse-content > :enter', [
+            query('content > :enter', [
                 style({
                     transform: 'translateX(-100%)',
                     opacity  : 0
@@ -253,7 +246,7 @@ export const fuseAnimations = [
             ], {optional: true}),
             sequence([
                 group([
-                    query('fuse-content > :leave', [
+                    query('content > :leave', [
                         style({
                             transform: 'translateX(0)',
                             opacity  : 1
@@ -264,7 +257,7 @@ export const fuseAnimations = [
                                 opacity  : 0
                             }))
                     ], {optional: true}),
-                    query('fuse-content > :enter', [
+                    query('content > :enter', [
                         style({transform: 'translateX(-100%)'}),
                         animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
@@ -273,8 +266,8 @@ export const fuseAnimations = [
                             }))
                     ], {optional: true})
                 ]),
-                query('fuse-content > :leave', animateChild(), {optional: true}),
-                query('fuse-content > :enter', animateChild(), {optional: true})
+                query('content > :leave', animateChild(), {optional: true}),
+                query('content > :enter', animateChild(), {optional: true})
             ])
         ])
     ]),
@@ -282,7 +275,7 @@ export const fuseAnimations = [
     trigger('routerTransitionUp', [
 
         transition('* => *', [
-            query('fuse-content > :enter, fuse-content > :leave', [
+            query('content > :enter, content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -291,14 +284,14 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('fuse-content > :enter', [
+            query('content > :enter', [
                 style({
                     transform: 'translateY(100%)',
                     opacity  : 0
                 })
             ], {optional: true}),
             group([
-                query('fuse-content > :leave', [
+                query('content > :leave', [
                     style({
                         transform: 'translateY(0)',
                         opacity  : 1
@@ -309,7 +302,7 @@ export const fuseAnimations = [
                             opacity  : 0
                         }))
                 ], {optional: true}),
-                query('fuse-content > :enter', [
+                query('content > :enter', [
                     style({transform: 'translateY(100%)'}),
                     animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                         style({
@@ -318,15 +311,15 @@ export const fuseAnimations = [
                         }))
                 ], {optional: true})
             ]),
-            query('fuse-content > :leave', animateChild(), {optional: true}),
-            query('fuse-content > :enter', animateChild(), {optional: true})
+            query('content > :leave', animateChild(), {optional: true}),
+            query('content > :enter', animateChild(), {optional: true})
         ])
     ]),
 
     trigger('routerTransitionDown', [
 
         transition('* => *', [
-            query('fuse-content > :enter, fuse-content > :leave', [
+            query('content > :enter, content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -335,7 +328,7 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('fuse-content > :enter', [
+            query('content > :enter', [
                 style({
                     transform: 'translateY(-100%)',
                     opacity  : 0
@@ -343,7 +336,7 @@ export const fuseAnimations = [
             ], {optional: true}),
             sequence([
                 group([
-                    query('fuse-content > :leave', [
+                    query('content > :leave', [
                         style({
                             transform: 'translateY(0)',
                             opacity  : 1
@@ -354,7 +347,7 @@ export const fuseAnimations = [
                                 opacity  : 0
                             }))
                     ], {optional: true}),
-                    query('fuse-content > :enter', [
+                    query('content > :enter', [
                         style({transform: 'translateY(-100%)'}),
                         animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
@@ -363,8 +356,8 @@ export const fuseAnimations = [
                             }))
                     ], {optional: true})
                 ]),
-                query('fuse-content > :leave', animateChild(), {optional: true}),
-                query('fuse-content > :enter', animateChild(), {optional: true})
+                query('content > :leave', animateChild(), {optional: true}),
+                query('content > :enter', animateChild(), {optional: true})
             ])
         ])
     ]),
@@ -373,7 +366,7 @@ export const fuseAnimations = [
 
         transition('* => *', group([
 
-            query('fuse-content > :enter, fuse-content > :leave ', [
+            query('content > :enter, content > :leave ', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -383,12 +376,12 @@ export const fuseAnimations = [
                 })
             ], {optional: true}),
 
-            query('fuse-content > :enter', [
+            query('content > :enter', [
                 style({
                     opacity: 0
                 })
             ], {optional: true}),
-            query('fuse-content > :leave', [
+            query('content > :leave', [
                 style({
                     opacity: 1
                 }),
@@ -397,7 +390,7 @@ export const fuseAnimations = [
                         opacity: 0
                     }))
             ], {optional: true}),
-            query('fuse-content > :enter', [
+            query('content > :enter', [
                 style({
                     opacity: 0
                 }),
@@ -406,8 +399,8 @@ export const fuseAnimations = [
                         opacity: 1
                     }))
             ], {optional: true}),
-            query('fuse-content > :enter', animateChild(), {optional: true}),
-            query('fuse-content > :leave', animateChild(), {optional: true})
+            query('content > :enter', animateChild(), {optional: true}),
+            query('content > :leave', animateChild(), {optional: true})
         ]))
     ])
 ];

src/@fuse/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
     selector   : 'fuse-confirm-dialog',
@@ -10,7 +10,14 @@ export class FuseConfirmDialogComponent
 {
     public confirmMessage: string;
 
-    constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
+    /**
+     * Constructor
+     *
+     * @param {MatDialogRef<FuseConfirmDialogComponent>} dialogRef
+     */
+    constructor(
+        public dialogRef: MatDialogRef<FuseConfirmDialogComponent>
+    )
     {
     }
 

src/@fuse/components/confirm-dialog/confirm-dialog.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatDialogModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
 

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

@@ -1,4 +1,4 @@
-:host {
+fuse-countdown {
     display: flex;
     flex-direction: row;
     align-items: center;

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

@@ -1,55 +1,110 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-import { interval } from 'rxjs';
-import { map } from 'rxjs/operators';
-
+import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { interval, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import * as moment from 'moment';
 
 @Component({
     selector   : 'fuse-countdown',
     templateUrl: './countdown.component.html',
-    styleUrls  : ['./countdown.component.scss']
+    styleUrls    : ['./countdown.component.scss'],
+    encapsulation: ViewEncapsulation.None
 })
-export class FuseCountdownComponent implements OnInit
+export class FuseCountdownComponent implements OnInit, OnDestroy
 {
-    @Input('eventDate') eventDate;
+    // Event date
+    @Input('eventDate')
+    eventDate;
+
     countdown: any;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     */
     constructor()
     {
+        // Set the defaults
         this.countdown = {
             days   : '',
             hours  : '',
             minutes: '',
             seconds: ''
         };
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
         const currDate = moment();
         const eventDate = moment(this.eventDate);
 
+        // Get the difference in between the current date and event date in seconds
         let diff = eventDate.diff(currDate, 'seconds');
 
-        const countDown = interval(1000).pipe(
-            map(value => {
-                return diff = diff - 1;
-            }),
-            map(value => {
-                const timeLeft = moment.duration(value, 'seconds');
+        // Calculate the remaining time for the first time so there will be no
+        // delay on the countdown
+        this.countdown = this._secondsToRemaining(diff);
 
-                return {
-                    days   : timeLeft.asDays().toFixed(0),
-                    hours  : timeLeft.hours(),
-                    minutes: timeLeft.minutes(),
-                    seconds: timeLeft.seconds()
-                };
-            })
-        );
+        // Create a subscribable interval
+        const countDown = interval(1000)
+            .pipe(
+                map(value => {
+                    return diff = diff - 1;
+                }),
+                map(value => {
+                    return this._secondsToRemaining(value);
+                })
+            );
 
-        countDown.subscribe(value => {
-            this.countdown = value;
-        });
+        // Subscribe to the countdown interval
+        countDown
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(value => {
+                this.countdown = value;
+            });
     }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Converts given seconds to a remaining time
+     *
+     * @param seconds
+     * @private
+     */
+    private _secondsToRemaining(seconds): any
+    {
+        const timeLeft = moment.duration(seconds, 'seconds');
+
+        return {
+            days   : timeLeft.asDays().toFixed(0),
+            hours  : timeLeft.hours(),
+            minutes: timeLeft.minutes(),
+            seconds: timeLeft.seconds()
+        };
+    }
+
 }

src/@fuse/components/countdown/countdown.theme.scss

@@ -0,0 +1,17 @@
+@mixin fuse-countdown-theme($theme) {
+
+    $foreground: map-get($theme, foreground);
+
+    fuse-countdown {
+
+        .fuse-countdown {
+
+            .time {
+
+                .title {
+                    color: map-get($foreground, secondary-text);
+                }
+            }
+        }
+    }
+}

src/@fuse/components/demo/demo-content/demo-content.component.html

@@ -1,10 +1,8 @@
 <!-- DEMO CONTENT -->
-<div class="demo-content">
+<div class="demo-content line-height-1.75">
 
-    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
-
-    <h1>Early Sunrise</h1>
-    <h4 class="secondary-text">Demo Content</h4>
+    <h1 class="m-0">Early Sunrise in Winter</h1>
+    <h4 class="mt-0 secondary-text">Demo Content</h4>
 
     <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
@@ -12,7 +10,7 @@
         vestibulum. Suspendisse euismod in urna eu posuere.
     </p>
 
-    <blockquote>
+    <blockquote class="my-24">
         <p>
             Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
             et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
@@ -24,16 +22,12 @@
     </blockquote>
 
     <p>
-        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
-        elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
-        nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
-        habitasse platea dictumst.
-    </p>
-
-    <p>
-        In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
-        Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
-        Nulla id euismod mi, et mollis tellus.
+        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur
+        <b>adipiscing elit</b>. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi.
+        Nam imperdiet est nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et
+        gravida. In hac habitasse platea dictumst. In et placerat eros, eu tempor turpis. Curabitur ac felis finibus,
+        elementum lectus vitae, venenatis est. Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel
+        erat condimentum tristique vel vel mi. Nulla id euismod mi, et mollis tellus.
     </p>
 
     <p>
@@ -43,6 +37,12 @@
         velit.
     </p>
 
+    <img class="mt-24 w-100-p" src="assets/images/demo-content/morain-lake.jpg" style="max-width: 640px">
+
+    <p class="mt-8 mb-24 secondary-text">
+        <em>Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor id.</em>
+    </p>
+
     <p>
         Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
         in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
@@ -52,10 +52,18 @@
     <p>
         Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
         ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
-        sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
-        fringilla nulla, sit amet congue felis dignissim at.
+        sagittis augue. Sed venenatis rhoncus enim eget ornare. <a href="#">Donec viverra sed felis at venenatis.</a>
+        Mauris aliquam fringilla nulla, sit amet congue felis dignissim at.
     </p>
 
+    <ul>
+        <li>Orci varius</li>
+        <li>Magnis dis</li>
+        <li>Conubia nostra</li>
+        <li>Semper urna</li>
+        <li>Donec viverra</li>
+    </ul>
+
     <p>
         Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
         eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
@@ -69,7 +77,7 @@
         Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
         lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
         id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
-        viverra augue dolor, a venenatis tellus consectetur sit amet...
+        viverra augue dolor, a venenatis tellus consectetur sit amet.
     </p>
 </div>
 <!-- / DEMO CONTENT -->

src/@fuse/components/demo/demo-content/demo-content.component.ts

@@ -7,6 +7,9 @@ import { Component } from '@angular/core';
 })
 export class FuseDemoContentComponent
 {
+    /**
+     * Constructor
+     */
     constructor()
     {
     }

src/@fuse/components/demo/demo-sidebar/demo-sidebar.component.html

@@ -1,99 +1,99 @@
-<div class="demo-sidenav">
+<div class="demo-sidebar">
     <mat-list>
-        <h3 matSubheader>Sidenav Demo</h3>
+        <h3 matSubheader>Sidebar Demo</h3>
 
         <mat-list-item>
-            <span>Sidenav Item 1</span>
+            <span>Sidebar Item 1</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 2</span>
+            <span>Sidebar Item 2</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 3</span>
+            <span>Sidebar Item 3</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 4</span>
+            <span>Sidebar Item 4</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 5</span>
+            <span>Sidebar Item 5</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 6</span>
+            <span>Sidebar Item 6</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 7</span>
+            <span>Sidebar Item 7</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 8</span>
+            <span>Sidebar Item 8</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 9</span>
+            <span>Sidebar Item 9</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 10</span>
+            <span>Sidebar Item 10</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 11</span>
+            <span>Sidebar Item 11</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 12</span>
+            <span>Sidebar Item 12</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 13</span>
+            <span>Sidebar Item 13</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 14</span>
+            <span>Sidebar Item 14</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 15</span>
+            <span>Sidebar Item 15</span>
         </mat-list-item>
 
         <mat-divider></mat-divider>
 
         <mat-list-item>
-            <span>Sidenav Item 16</span>
+            <span>Sidebar Item 16</span>
         </mat-list-item>
 
     </mat-list>

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-demo-sidebar',
+    templateUrl: './demo-sidebar.component.html',
+    styleUrls  : ['./demo-sidebar.component.scss']
+})
+export class FuseDemoSidebarComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+    }
+}

src/@fuse/components/demo/demo-sidenav/demo-sidenav.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-demo-sidenav',
-    templateUrl: './demo-sidenav.component.html',
-    styleUrls  : ['./demo-sidenav.component.scss']
-})
-export class FuseDemoSidenavComponent
-{
-    constructor()
-    {
-    }
-}

src/@fuse/components/demo/demo.module.ts

@@ -1,15 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { MatDividerModule, MatListModule } from '@angular/material';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
 
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
-import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
+import { FuseDemoSidebarComponent } from './demo-sidebar/demo-sidebar.component';
 
 @NgModule({
     declarations: [
         FuseDemoContentComponent,
-        FuseDemoSidenavComponent
+        FuseDemoSidebarComponent
     ],
     imports     : [
         RouterModule,
@@ -19,7 +20,7 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
     ],
     exports     : [
         FuseDemoContentComponent,
-        FuseDemoSidenavComponent
+        FuseDemoSidebarComponent
     ]
 })
 export class FuseDemoModule

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

@@ -1,6 +1,9 @@
 :host {
     display: block;
+    width: 100%;
     padding: 8px;
     background: #263238;
     cursor: text;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }

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

@@ -1,28 +1,55 @@
-import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import * as Prism from 'prismjs/prism';
-import './prism-languages';
+import '@fuse/components/highlight/prism-languages';
 
 @Component({
     selector : 'fuse-highlight',
-    template : ' ',
+    template : '',
     styleUrls: ['./highlight.component.scss']
 })
-export class FuseHighlightComponent implements OnInit
+export class FuseHighlightComponent implements OnInit, OnDestroy
 {
-    @ContentChild('source') source: ElementRef;
-    @Input('lang') lang: string;
-    @Input('path') path: string;
+    // Source
+    @ContentChild('source', {static: true})
+    source: ElementRef;
 
+    // Lang
+    @Input('lang')
+    lang: string;
+
+    // Path
+    @Input('path')
+    path: string;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {HttpClient} _httpClient
+     */
     constructor(
-        private elementRef: ElementRef,
-        private http: HttpClient
+        private _elementRef: ElementRef,
+        private _httpClient: HttpClient
     )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
         // If there is no language defined, return...
         if ( !this.lang )
@@ -34,11 +61,13 @@ export class FuseHighlightComponent implements OnInit
         if ( this.path )
         {
             // Get the source
-            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
+            this._httpClient.get(this.path, {responseType: 'text'})
+                .pipe(takeUntil(this._unsubscribeAll))
+                .subscribe((response) => {
 
-                // Highlight it
-                this.highlight(response);
-            });
+                    // Highlight it
+                    this.highlight(response);
+                });
         }
 
         // If the path is not defined and the source element exists...
@@ -49,7 +78,26 @@ export class FuseHighlightComponent implements OnInit
         }
     }
 
-    highlight(sourceCode)
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Highlight the given source code
+     *
+     * @param sourceCode
+     */
+    highlight(sourceCode): void
     {
         // Split the source into lines
         const sourceLines = sourceCode.split('\n');
@@ -94,9 +142,8 @@ export class FuseHighlightComponent implements OnInit
         const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
 
         // Replace the innerHTML of the component with the highlighted code
-        this.elementRef.nativeElement.innerHTML =
+        this._elementRef.nativeElement.innerHTML =
             '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
-
     }
 }
 

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

@@ -1,4 +1,5 @@
 import 'prismjs/prism';
+import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-c';
 import 'prismjs/components/prism-cpp';
 import 'prismjs/components/prism-csharp';

src/@fuse/components/index.ts

@@ -4,6 +4,7 @@ export * from './demo/demo.module';
 export * from './highlight/highlight.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
+export * from './progress-bar/progress-bar.module';
 export * from './search-bar/search-bar.module';
 export * from './shortcuts/shortcuts.module';
 export * from './sidebar/sidebar.module';

src/@fuse/components/material-color-picker/material-color-picker.component.html

@@ -1,20 +1,20 @@
 <button mat-icon-button
-        type="button"
         class="mat-elevation-z1"
         [matMenuTriggerFor]="colorMenu"
         (menuOpened)="onMenuOpen()"
-        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
+        [ngClass]="selectedPalette + '-' + selectedHue">
     <mat-icon>palette</mat-icon>
 </button>
 
-<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
+<mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu mat-elevation-z8">
 
-    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4"
+    <header [ngClass]="selectedColor?.class || 'accent'" class="mat-elevation-z4"
             fxLayout="row" fxLayoutAlign="space-between center">
 
         <button mat-icon-button
-                [style.visibility]="view==='hues'?'visible':'hidden'"
-                (click)="$event.stopPropagation();backToPaletteSelection()" aria-label="Palette">
+                class="secondary-text"
+                [style.visibility]="view === 'hues' ? 'visible' : 'hidden'"
+                (click)="goToPalettesView($event)" aria-label="Palette">
             <mat-icon class="s-20">arrow_back</mat-icon>
         </button>
 
@@ -23,45 +23,40 @@
         </span>
 
         <span *ngIf="!selectedColor?.palette">
-            Select Color
+            Select a Color
         </span>
 
         <button mat-icon-button
-                class="remove-color-button"
-                (click)="$event.stopPropagation();removeColor()"
-                aria-label="Remove Color">
+                class="remove-color-button secondary-text"
+                (click)="removeColor($event)"
+                aria-label="Remove color"
+                matTooltip="Remove color">
             <mat-icon class="s-20">delete</mat-icon>
         </button>
     </header>
 
-
     <div [ngSwitch]="view" class="views">
 
         <div class="view" *ngSwitchCase="'palettes'">
 
             <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color"
-                     [ngClass]="'mat-'+color.key+'-bg'"
+                <div class="color" fxLayout="row" fxLayoutAlign="center center"
                      *ngFor="let color of (colors | keys)"
-                     (click)="$event.stopPropagation();selectPalette(color.key)"
-                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                    <span class="label">
-                        {{color.key}}
-                    </span>
+                     [ngClass]="color.key"
+                     [class.selected]="selectedPalette === color.key"
+                     (click)="selectPalette($event, color.key)">
                 </div>
             </div>
         </div>
 
-        <div class="view" *ngSwitchCase="'hues'" >
+        <div class="view" *ngSwitchCase="'hues'">
             <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                <div class="color" *ngFor="let hue of hues"
-                     [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
-                     [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
-                     (click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                    <span class="label">
-                        {{hue}}
-                    </span>
-                    <mat-icon *ngIf="selectedHue === hue" class="s-16">check</mat-icon>
+                <div class="color" fxLayout="row" fxLayoutAlign="center center"
+                     *ngFor="let hue of hues"
+                     [fxHide]="selectedPalette === 'fuse-white' && hue !== '500' || selectedPalette === 'fuse-black' && hue !== '500'"
+                     [ngClass]="selectedPalette + '-' + hue"
+                     [class.selected]="selectedHue === hue"
+                     (click)="selectHue($event, hue)">
                 </div>
             </div>
         </div>

src/@fuse/components/material-color-picker/material-color-picker.component.scss

@@ -1,5 +1,5 @@
 .fuse-material-color-picker-menu {
-    width: 208px;
+    width: 245px;
 
     .mat-menu-content {
         padding: 0;
@@ -7,44 +7,29 @@
         .views {
             display: flex;
             flex-direction: column;
-            position: relative;
-            overflow: hidden;
-            min-height: 258px;
-            height: 308px;
-            background-color: #F7F7F7;
+            min-height: 165px;
 
             .view {
-                position: absolute;
-                width: 208px;
-                height: 100%;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                top: 0;
+                overflow: hidden;
 
                 .colors {
-                    position: relative;
-                    padding: 4px;
+                    padding: 1px 0 0 0;
+                    margin-left: -1px;
 
                     .color {
-                        position: relative;
-                        width: 46px;
-                        height: 46px;
-                        margin: 2px;
+                        width: 40px;
+                        height: 40px;
+                        margin: 0 0 1px 1px;
                         border-radius: 0;
                         cursor: pointer;
+                        transition: border-radius .4s cubic-bezier(.25, .8, .25, 1);
 
-                        .label {
-                            padding: 2px;
-                            font-size: 10px;
+                        &:hover {
+                            border-radius: 20%;
                         }
 
-                        mat-icon {
-                            position: absolute;
-                            top: 2px;
-                            right: 2px;
-                            font-size: 16px;
-                            opacity: 0.7;
+                        &.selected {
+                            border-radius: 50% !important;
                         }
                     }
                 }

src/@fuse/components/material-color-picker/material-color-picker.component.ts

@@ -1,179 +1,253 @@
-import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, ViewEncapsulation } from '@angular/core';
 
 import { fuseAnimations } from '@fuse/animations';
 import { MatColors } from '@fuse/mat-colors';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+export const FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR: any = {
+    provide    : NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => FuseMaterialColorPickerComponent),
+    multi      : true
+};
 
 @Component({
     selector     : 'fuse-material-color-picker',
     templateUrl  : './material-color-picker.component.html',
     styleUrls    : ['./material-color-picker.component.scss'],
     animations   : fuseAnimations,
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    providers    : [FUSE_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR]
 })
-export class FuseMaterialColorPickerComponent implements OnChanges
+export class FuseMaterialColorPickerComponent implements ControlValueAccessor
 {
     colors: any;
-    selectedColor: any;
     hues: string[];
-    view = 'palettes';
+    view: string;
+    selectedColor: any;
+    selectedPalette: string;
+    selectedHue: string;
 
-    @Input() selectedPalette = '';
-    @Input() selectedHue = '';
-    @Input() selectedFg = '';
-    @Input() value: any;
-    @Output() onValueChange = new EventEmitter();
-    @Output() selectedPaletteChange = new EventEmitter();
-    @Output() selectedHueChange = new EventEmitter();
-    @Output() selectedClassChange = new EventEmitter();
-    @Output() selectedBgChange = new EventEmitter();
-    @Output() selectedFgChange = new EventEmitter();
+    // Color changed
+    @Output()
+    colorChanged: EventEmitter<any>;
 
-    _selectedClass = '';
-    @Input()
-    set selectedClass(value)
-    {
-        if ( value && value !== '' && this._selectedClass !== value )
-        {
-            const color = value.split('-');
-            if ( color.length >= 5 )
-            {
-                this.selectedPalette = color[1] + '-' + color[2];
-                this.selectedHue = color[3];
-            }
-            else
-            {
-                this.selectedPalette = color[1];
-                this.selectedHue = color[2];
-            }
-        }
-        this._selectedClass = value;
-    }
-
-    get selectedClass(): string
-    {
-        return this._selectedClass;
-    }
-
-    _selectedBg = '';
-    @Input()
-    set selectedBg(value)
-    {
-        if ( value && value !== '' && this._selectedBg !== value )
-        {
-            for ( const palette in this.colors )
-            {
-                if ( !this.colors.hasOwnProperty(palette) )
-                {
-                    continue;
-                }
-
-                for ( const hue of this.hues )
-                {
-                    if ( this.colors[palette][hue] === value )
-                    {
-                        this.selectedPalette = palette;
-                        this.selectedHue = hue;
-                        break;
-                    }
-                }
-            }
-        }
-        this._selectedBg = value;
-    }
-
-    get selectedBg(): string
-    {
-        return this._selectedBg;
-    }
+    // Private
+    private _color: string;
+    private _modelChange: (value: any) => void;
+    private _modelTouched: (value: any) => void;
 
+    /**
+     * Constructor
+     */
     constructor()
     {
+        // Set the defaults
+        this.colorChanged = new EventEmitter();
         this.colors = MatColors.all;
         this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
+        this.selectedHue = '500';
+        this.view = 'palettes';
+
+        // Set the private defaults
+        this._color = '';
+        this._modelChange = () => {
+        };
+        this._modelTouched = () => {
+        };
     }
 
-    ngOnChanges(changes: any)
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Selected class
+     *
+     * @param value
+     */
+    @Input()
+    set color(value)
     {
-        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
-            changes.selectedClass && changes.selectedClass.currentValue === '' ||
-            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
+        if ( !value || value === '' || this._color === value )
         {
-            this.removeColor();
             return;
         }
-        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+
+        // Split the color value (red-400, blue-500, fuse-navy-700 etc.)
+        const colorParts = value.split('-');
+
+        // Take the very last part as the selected hue value
+        this.selectedHue = colorParts[colorParts.length - 1];
+
+        // Remove the last part
+        colorParts.pop();
+
+        // Rejoin the remaining parts as the selected palette name
+        this.selectedPalette = colorParts.join('-');
+
+        // Store the color value
+        this._color = value;
+    }
+
+    get color(): string
+    {
+        return this._color;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Control Value Accessor implementation
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register on change function
+     *
+     * @param fn
+     */
+    registerOnChange(fn: any): void
+    {
+        this._modelChange = fn;
+    }
+
+    /**
+     * Register on touched function
+     *
+     * @param fn
+     */
+    registerOnTouched(fn: any): void
+    {
+        this._modelTouched = fn;
+    }
+
+    /**
+     * Write value to the view from model
+     *
+     * @param color
+     */
+    writeValue(color: any): void
+    {
+        // Return if null
+        if ( !color )
         {
-            this.updateSelectedColor();
+            return;
         }
+
+        // Set the color
+        this.color = color;
+
+        // Update the selected color
+        this.updateSelectedColor();
     }
 
-    selectPalette(palette)
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Select palette
+     *
+     * @param event
+     * @param palette
+     */
+    selectPalette(event, palette): void
     {
-        this.selectedPalette = palette;
-        this.updateSelectedColor();
+        // Stop propagation
+        event.stopPropagation();
+
+        // Go to 'hues' view
         this.view = 'hues';
-    }
 
-    selectHue(hue)
-    {
-        this.selectedHue = hue;
+        // Update the selected palette
+        this.selectedPalette = palette;
+
+        // Update the selected color
         this.updateSelectedColor();
     }
 
-    removeColor()
+    /**
+     * Select hue
+     *
+     * @param event
+     * @param hue
+     */
+    selectHue(event, hue): void
     {
+        // Stop propagation
+        event.stopPropagation();
+
+        // Update the selected huse
+        this.selectedHue = hue;
+
+        // Update the selected color
+        this.updateSelectedColor();
+    }
+
+    /**
+     * Remove color
+     *
+     * @param event
+     */
+    removeColor(event): void
+    {
+        // Stop propagation
+        event.stopPropagation();
+
+        // Return to the 'palettes' view
+        this.view = 'palettes';
+
+        // Clear the selected palette and hue
         this.selectedPalette = '';
         this.selectedHue = '';
+
+        // Update the selected color
         this.updateSelectedColor();
+    }
+
+    /**
+     * Update selected color
+     */
+    updateSelectedColor(): void
+    {
+        if ( this.selectedColor && this.selectedColor.palette === this.selectedPalette && this.selectedColor.hue === this.selectedHue )
+        {
+            return;
+        }
+
+        // Set the selected color object
+        this.selectedColor = {
+            palette: this.selectedPalette,
+            hue    : this.selectedHue,
+            class  : this.selectedPalette + '-' + this.selectedHue,
+            bg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette)[this.selectedHue],
+            fg     : this.selectedPalette === '' ? '' : MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]
+        };
+
+        // Emit the color changed event
+        this.colorChanged.emit(this.selectedColor);
+
+        // Mark the model as touched
+        this._modelTouched(this.selectedColor.class);
+
+        // Update the model
+        this._modelChange(this.selectedColor.class);
+    }
+
+    /**
+     * Go to palettes view
+     *
+     * @param event
+     */
+    goToPalettesView(event): void
+    {
+        // Stop propagation
+        event.stopPropagation();
+
         this.view = 'palettes';
     }
 
-    updateSelectedColor()
-    {
-        setTimeout(() => {
-
-            if ( this.selectedColor && this.selectedPalette === this.selectedColor.palette && this.selectedHue === this.selectedColor.hue )
-            {
-                return;
-            }
-
-            if ( this.selectedPalette !== '' && this.selectedHue !== '' )
-            {
-                this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue];
-                this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue];
-                this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg';
-            }
-            else
-            {
-                this.selectedBg = '';
-                this.selectedFg = '';
-            }
-
-            this.selectedColor = {
-                palette: this.selectedPalette,
-                hue    : this.selectedHue,
-                class  : this.selectedClass,
-                bg     : this.selectedBg,
-                fg     : this.selectedFg
-            };
-
-            this.selectedPaletteChange.emit(this.selectedPalette);
-            this.selectedHueChange.emit(this.selectedHue);
-            this.selectedClassChange.emit(this.selectedClass);
-            this.selectedBgChange.emit(this.selectedBg);
-            this.selectedFgChange.emit(this.selectedFg);
-
-            this.value = this.selectedColor;
-            this.onValueChange.emit(this.selectedColor);
-        });
-    }
-
-    backToPaletteSelection()
-    {
-        this.view = 'palettes';
-    }
-
-    onMenuOpen()
+    /**
+     * On menu open
+     */
+    onMenuOpen(): void
     {
         if ( this.selectedPalette === '' )
         {

src/@fuse/components/material-color-picker/material-color-picker.module.ts

@@ -1,8 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
-
-import { MatButtonModule, MatIconModule, MatMenuModule, MatRippleModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { FusePipesModule } from '@fuse/pipes/pipes.module';
 
@@ -20,7 +22,7 @@ import { FuseMaterialColorPickerComponent } from '@fuse/components/material-colo
         MatButtonModule,
         MatIconModule,
         MatMenuModule,
-        MatRippleModule,
+        MatTooltipModule,
 
         FusePipesModule
     ],

src/@fuse/components/material-color-picker/material-color-picker.theme.scss

@@ -0,0 +1,14 @@
+@mixin fuse-material-color-picker-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    .fuse-material-color-picker-menu {
+
+        .mat-menu-content {
+
+            .views {
+                background: #303030;
+            }
+        }
+    }
+}

src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html

@@ -0,0 +1,69 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapse -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <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>
+        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
+    </ng-template>
+
+    <div class="children" [ngClass]="{'open': isOpen}">
+
+        <div class="{{fuseConfig.layout.navbar.primaryBackground}}">
+
+            <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-collapsable *ngIf="item.type=='collapsable'"
+                                                 [item]="item"></fuse-nav-horizontal-collapsable>
+                <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'"
+                                                 [item]="item"></fuse-nav-horizontal-collapsable>
+            </ng-container>
+
+        </div>
+
+    </div>
+
+</ng-container>

src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.ts

@@ -0,0 +1,86 @@
+import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfigService } from '@fuse/services/config.service';
+
+@Component({
+    selector   : 'fuse-nav-horizontal-collapsable',
+    templateUrl: './collapsable.component.html',
+    styleUrls  : ['./collapsable.component.scss'],
+    animations : fuseAnimations
+})
+export class FuseNavHorizontalCollapsableComponent implements OnInit, OnDestroy
+{
+    fuseConfig: any;
+    isOpen = false;
+
+    @HostBinding('class')
+    classes = 'nav-collapsable nav-item';
+
+    @Input()
+    item: any;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    constructor(
+        private _fuseConfigService: FuseConfigService
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(
+                (config) => {
+                    this.fuseConfig = config;
+                }
+            );
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open
+     */
+    @HostListener('mouseenter')
+    open(): void
+    {
+        this.isOpen = true;
+    }
+
+    /**
+     * Close
+     */
+    @HostListener('mouseleave')
+    close(): void
+    {
+        this.isOpen = false;
+    }
+}

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

@@ -0,0 +1,48 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- item.url -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <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/horizontal/item/item.component.ts

@@ -0,0 +1,23 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-horizontal-item',
+    templateUrl: './item.component.html',
+    styleUrls  : ['./item.component.scss']
+})
+export class FuseNavHorizontalItemComponent
+{
+    @HostBinding('class')
+    classes = 'nav-item';
+
+    @Input()
+    item: any;
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}

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

@@ -1,52 +0,0 @@
-<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>
-
-    <!-- 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>
-        <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
-    </ng-template>
-
-    <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>
-
-</ng-container>

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

@@ -1,51 +0,0 @@
-import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { fuseAnimations } from '../../../../animations/index';
-import { FuseConfigService } from '../../../../services/config.service';
-
-@Component({
-    selector   : 'fuse-nav-horizontal-collapse',
-    templateUrl: './nav-horizontal-collapse.component.html',
-    styleUrls  : ['./nav-horizontal-collapse.component.scss'],
-    animations : fuseAnimations
-})
-export class FuseNavHorizontalCollapseComponent implements OnDestroy
-{
-    onConfigChanged: Subscription;
-    fuseSettings: any;
-    isOpen = false;
-
-    @HostBinding('class') classes = 'nav-item nav-collapse';
-    @Input() item: any;
-
-    @HostListener('mouseenter')
-    open()
-    {
-        this.isOpen = true;
-    }
-
-    @HostListener('mouseleave')
-    close()
-    {
-        this.isOpen = false;
-    }
-
-    constructor(
-        private fuseConfig: FuseConfigService
-    )
-    {
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
-                .subscribe(
-                    (newSettings) => {
-                        this.fuseSettings = newSettings;
-                    }
-                );
-    }
-
-    ngOnDestroy()
-    {
-        this.onConfigChanged.unsubscribe();
-    }
-}

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

@@ -1,30 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <!-- 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>
-
-    <!-- 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/horizontal/nav-item/nav-horizontal-item.component.ts

@@ -1,12 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-horizontal-item',
-    templateUrl: './nav-horizontal-item.component.html',
-    styleUrls  : ['./nav-horizontal-item.component.scss']
-})
-export class FuseNavHorizontalItemComponent
-{
-    @HostBinding('class') classes = 'nav-item';
-    @Input() item: any;
-}

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

@@ -1,5 +1,4 @@
-<div id="main-navigation" class="nav"
-     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
+<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
 
     <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
@@ -7,7 +6,8 @@
         <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
+                                           [item]="item"></fuse-nav-vertical-collapsable>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
 
         </ng-container>
@@ -20,8 +20,9 @@
 
         <ng-container *ngFor="let item of navigation">
 
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
+                                             [item]="item"></fuse-nav-horizontal-collapsable>
             <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
 
         </ng-container>

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

@@ -4,7 +4,7 @@ fuse-navigation {
     display: flex;
     flex: 1 0 auto;
 
-    #main-navigation {
+    > .nav {
         margin: 0;
         padding: 0;
         width: 100%;

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

@@ -1,18 +1,75 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
-    selector     : 'fuse-navigation',
-    templateUrl  : './navigation.component.html',
-    styleUrls    : ['./navigation.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    selector       : 'fuse-navigation',
+    templateUrl    : './navigation.component.html',
+    styleUrls      : ['./navigation.component.scss'],
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FuseNavigationComponent
+export class FuseNavigationComponent implements OnInit
 {
-    @Input() layout = 'vertical';
-    @Input() navigation: any;
+    @Input()
+    layout = 'vertical';
 
-    constructor()
+    @Input()
+    navigation: any;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Load the navigation either from the input or from the service
+        this.navigation = this.navigation || this._fuseNavigationService.getCurrentNavigation();
+
+        // Subscribe to the current navigation changes
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+
+                // Load the navigation
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
     }
 }

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

@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MatIconModule, MatRippleModule } from '@angular/material';
+import { MatRippleModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
 
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FuseNavigationComponent } from './navigation.component';
-import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
-import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
-import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
-import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
-import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
+import { FuseNavVerticalItemComponent } from './vertical/item/item.component';
+import { FuseNavVerticalCollapsableComponent } from './vertical/collapsable/collapsable.component';
+import { FuseNavVerticalGroupComponent } from './vertical/group/group.component';
+import { FuseNavHorizontalItemComponent } from './horizontal/item/item.component';
+import { FuseNavHorizontalCollapsableComponent } from './horizontal/collapsable/collapsable.component';
 
 @NgModule({
     imports     : [
@@ -29,9 +30,9 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
         FuseNavigationComponent,
         FuseNavVerticalGroupComponent,
         FuseNavVerticalItemComponent,
-        FuseNavVerticalCollapseComponent,
+        FuseNavVerticalCollapsableComponent,
         FuseNavHorizontalItemComponent,
-        FuseNavHorizontalCollapseComponent
+        FuseNavHorizontalCollapsableComponent
     ]
 })
 export class FuseNavigationModule

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

@@ -1,48 +1,425 @@
 import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import * as _ from 'lodash';
 
-@Injectable()
+import { FuseNavigationItem } from '@fuse/types';
+
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseNavigationService
 {
-    flatNavigation: any[] = [];
+    onItemCollapsed: Subject<any>;
+    onItemCollapseToggled: Subject<any>;
 
-    onItemCollapsed: Subject<any> = new Subject;
-    onItemCollapseToggled: Subject<any> = new Subject;
+    // Private
+    private _onNavigationChanged: BehaviorSubject<any>;
+    private _onNavigationRegistered: BehaviorSubject<any>;
+    private _onNavigationUnregistered: BehaviorSubject<any>;
+    private _onNavigationItemAdded: BehaviorSubject<any>;
+    private _onNavigationItemUpdated: BehaviorSubject<any>;
+    private _onNavigationItemRemoved: BehaviorSubject<any>;
 
+    private _currentNavigationKey: string;
+    private _registry: { [key: string]: any } = {};
+
+    /**
+     * Constructor
+     */
     constructor()
     {
+        // Set the defaults
+        this.onItemCollapsed = new Subject();
+        this.onItemCollapseToggled = new Subject();
+
+        // Set the private defaults
+        this._currentNavigationKey = null;
+        this._onNavigationChanged = new BehaviorSubject(null);
+        this._onNavigationRegistered = new BehaviorSubject(null);
+        this._onNavigationUnregistered = new BehaviorSubject(null);
+        this._onNavigationItemAdded = new BehaviorSubject(null);
+        this._onNavigationItemUpdated = new BehaviorSubject(null);
+        this._onNavigationItemRemoved = new BehaviorSubject(null);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get onNavigationChanged
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationChanged(): Observable<any>
+    {
+        return this._onNavigationChanged.asObservable();
+    }
+
+    /**
+     * Get onNavigationRegistered
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationRegistered(): Observable<any>
+    {
+        return this._onNavigationRegistered.asObservable();
+    }
+
+    /**
+     * Get onNavigationUnregistered
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationUnregistered(): Observable<any>
+    {
+        return this._onNavigationUnregistered.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemAdded
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemAdded(): Observable<any>
+    {
+        return this._onNavigationItemAdded.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemUpdated
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemUpdated(): Observable<any>
+    {
+        return this._onNavigationItemUpdated.asObservable();
+    }
+
+    /**
+     * Get onNavigationItemRemoved
+     *
+     * @returns {Observable<any>}
+     */
+    get onNavigationItemRemoved(): Observable<any>
+    {
+        return this._onNavigationItemRemoved.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register the given navigation
+     * with the given key
+     *
+     * @param key
+     * @param navigation
+     */
+    register(key, navigation): void
+    {
+        // Check if the key already being used
+        if ( this._registry[key] )
+        {
+            console.error(`The navigation with the key '${key}' already exists. Either unregister it first or use a unique key.`);
+
+            return;
+        }
+
+        // Add to the registry
+        this._registry[key] = navigation;
+
+        // Notify the subject
+        this._onNavigationRegistered.next([key, navigation]);
+    }
+
+    /**
+     * Unregister the navigation from the registry
+     * @param key
+     */
+    unregister(key): void
+    {
+        // Check if the navigation exists
+        if ( !this._registry[key] )
+        {
+            console.warn(`The navigation with the key '${key}' doesn't exist in the registry.`);
+        }
+
+        // Unregister the sidebar
+        delete this._registry[key];
+
+        // Notify the subject
+        this._onNavigationUnregistered.next(key);
+    }
+
+    /**
+     * Get navigation from registry by key
+     *
+     * @param key
+     * @returns {any}
+     */
+    getNavigation(key): any
+    {
+        // Check if the navigation exists
+        if ( !this._registry[key] )
+        {
+            console.warn(`The navigation with the key '${key}' doesn't exist in the registry.`);
+
+            return;
+        }
+
+        // Return the sidebar
+        return this._registry[key];
     }
 
     /**
      * Get flattened navigation array
+     *
      * @param navigation
+     * @param flatNavigation
      * @returns {any[]}
      */
-    getFlatNavigation(navigation)
+    getFlatNavigation(navigation, flatNavigation: FuseNavigationItem[] = []): any
     {
-        for ( const navItem of navigation )
+        for ( const item of navigation )
         {
-            if ( navItem.type === 'item' )
+            if ( item.type === 'item' )
             {
-                this.flatNavigation.push({
-                    title: navItem.title,
-                    type : navItem.type,
-                    icon : navItem.icon || false,
-                    url  : navItem.url
-                });
+                flatNavigation.push(item);
 
                 continue;
             }
 
-            if ( navItem.type === 'collapse' || navItem.type === 'group' )
+            if ( item.type === 'collapsable' || item.type === 'group' )
             {
-                if ( navItem.children )
+                if ( item.children )
                 {
-                    this.getFlatNavigation(navItem.children);
+                    this.getFlatNavigation(item.children, flatNavigation);
                 }
             }
         }
 
-        return this.flatNavigation;
+        return flatNavigation;
+    }
+
+    /**
+     * Get the current navigation
+     *
+     * @returns {any}
+     */
+    getCurrentNavigation(): any
+    {
+        if ( !this._currentNavigationKey )
+        {
+            console.warn(`The current navigation is not set.`);
+
+            return;
+        }
+
+        return this.getNavigation(this._currentNavigationKey);
+    }
+
+    /**
+     * Set the navigation with the key
+     * as the current navigation
+     *
+     * @param key
+     */
+    setCurrentNavigation(key): void
+    {
+        // Check if the sidebar exists
+        if ( !this._registry[key] )
+        {
+            console.warn(`The navigation with the key '${key}' doesn't exist in the registry.`);
+
+            return;
+        }
+
+        // Set the current navigation key
+        this._currentNavigationKey = key;
+
+        // Notify the subject
+        this._onNavigationChanged.next(key);
+    }
+
+    /**
+     * Get navigation item by id from the
+     * current navigation
+     *
+     * @param id
+     * @param {any} navigation
+     * @returns {any | boolean}
+     */
+    getNavigationItem(id, navigation = null): any | boolean
+    {
+        if ( !navigation )
+        {
+            navigation = this.getCurrentNavigation();
+        }
+
+        for ( const item of navigation )
+        {
+            if ( item.id === id )
+            {
+                return item;
+            }
+
+            if ( item.children )
+            {
+                const childItem = this.getNavigationItem(id, item.children);
+
+                if ( childItem )
+                {
+                    return childItem;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Get the parent of the navigation item
+     * with the id
+     *
+     * @param id
+     * @param {any} navigation
+     * @param parent
+     */
+    getNavigationItemParent(id, navigation = null, parent = null): any
+    {
+        if ( !navigation )
+        {
+            navigation = this.getCurrentNavigation();
+            parent = navigation;
+        }
+
+        for ( const item of navigation )
+        {
+            if ( item.id === id )
+            {
+                return parent;
+            }
+
+            if ( item.children )
+            {
+                const childItem = this.getNavigationItemParent(id, item.children, item);
+
+                if ( childItem )
+                {
+                    return childItem;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Add a navigation item to the specified location
+     *
+     * @param item
+     * @param id
+     */
+    addNavigationItem(item, id): void
+    {
+        // Get the current navigation
+        const navigation: any[] = this.getCurrentNavigation();
+
+        // Add to the end of the navigation
+        if ( id === 'end' )
+        {
+            navigation.push(item);
+
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
+            return;
+        }
+
+        // Add to the start of the navigation
+        if ( id === 'start' )
+        {
+            navigation.unshift(item);
+
+            // Trigger the observable
+            this._onNavigationItemAdded.next(true);
+
+            return;
+        }
+
+        // Add it to a specific location
+        const parent: any = this.getNavigationItem(id);
+
+        if ( parent )
+        {
+            // Check if parent has a children entry,
+            // and add it if it doesn't
+            if ( !parent.children )
+            {
+                parent.children = [];
+            }
+
+            // Add the item
+            parent.children.push(item);
+        }
+
+        // Trigger the observable
+        this._onNavigationItemAdded.next(true);
+    }
+
+    /**
+     * Update navigation item with the given id
+     *
+     * @param id
+     * @param properties
+     */
+    updateNavigationItem(id, properties): void
+    {
+        // Get the navigation item
+        const navigationItem = this.getNavigationItem(id);
+
+        // If there is no navigation with the give id, return
+        if ( !navigationItem )
+        {
+            return;
+        }
+
+        // Merge the navigation properties
+        _.merge(navigationItem, properties);
+
+        // Trigger the observable
+        this._onNavigationItemUpdated.next(true);
+    }
+
+    /**
+     * Remove navigation item with the given id
+     *
+     * @param id
+     */
+    removeNavigationItem(id): void
+    {
+        const item = this.getNavigationItem(id);
+
+        // Return, if there is not such an item
+        if ( !item )
+        {
+            return;
+        }
+
+        // Get the parent of the item
+        let parent = this.getNavigationItemParent(id);
+
+        // This check is required because of the first level
+        // of the navigation, since the first level is not
+        // inside the 'children' array
+        parent = parent.children || parent;
+
+        // Remove the item
+        parent.splice(parent.indexOf(item), 1);
+
+        // Trigger the observable
+        this._onNavigationItemRemoved.next(true);
     }
 }

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html

@@ -0,0 +1,65 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- normal collapsable -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
+       (click)="toggleOpen($event)">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.url -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       (click)="toggleOpen($event)"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       (click)="toggleOpen($event)"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="toggleOpen($event);item.function()">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="toggleOpen($event);item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="toggleOpen($event);item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <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>
+        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
+    </ng-template>
+
+    <div class="children" [@slideInOut]="isOpen">
+        <ng-container *ngFor="let item of item.children">
+            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
+                                           [item]="item"></fuse-nav-vertical-collapsable>
+            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
+        </ng-container>
+    </div>
+
+</ng-container>

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.scss

@@ -20,7 +20,7 @@
 
     .nav-link {
 
-        .collapse-arrow {
+        .collapsable-arrow {
             transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;
             transform: rotate(0);
         }
@@ -34,13 +34,9 @@
 
         > .nav-link {
 
-            .collapse-arrow {
+            .collapsable-arrow {
                 transform: rotate(90deg);
             }
         }
-
-        > .children {
-        }
-
     }
 }

src/@fuse/components/navigation/vertical/collapsable/collapsable.component.ts

@@ -0,0 +1,268 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { merge, Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationItem } from '@fuse/types';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
+@Component({
+    selector   : 'fuse-nav-vertical-collapsable',
+    templateUrl: './collapsable.component.html',
+    styleUrls  : ['./collapsable.component.scss'],
+    animations : fuseAnimations
+})
+export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
+{
+    @Input()
+    item: FuseNavigationItem;
+
+    @HostBinding('class')
+    classes = 'nav-collapsable nav-item';
+
+    @HostBinding('class.open')
+    public isOpen = false;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {Router} _router
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService,
+        private _router: Router
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Listen for router events
+        this._router.events
+            .pipe(
+                filter(event => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe((event: NavigationEnd) => {
+
+                // Check if the url can be found in
+                // one of the children of this item
+                if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
+                {
+                    this.expand();
+                }
+                else
+                {
+                    this.collapse();
+                }
+            });
+
+        // Listen for collapsing of any navigation item
+        this._fuseNavigationService.onItemCollapsed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(
+                (clickedItem) => {
+                    if ( clickedItem && clickedItem.children )
+                    {
+                        // Check if the clicked item is one
+                        // of the children of this item
+                        if ( this.isChildrenOf(this.item, clickedItem) )
+                        {
+                            return;
+                        }
+
+                        // Check if the url can be found in
+                        // one of the children of this item
+                        if ( this.isUrlInChildren(this.item, this._router.url) )
+                        {
+                            return;
+                        }
+
+                        // If the clicked item is not this item, collapse...
+                        if ( this.item !== clickedItem )
+                        {
+                            this.collapse();
+                        }
+                    }
+                }
+            );
+
+        // Check if the url can be found in
+        // one of the children of this item
+        if ( this.isUrlInChildren(this.item, this._router.url) )
+        {
+            this.expand();
+        }
+        else
+        {
+            this.collapse();
+        }
+
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle collapse
+     *
+     * @param ev
+     */
+    toggleOpen(ev): void
+    {
+        ev.preventDefault();
+
+        this.isOpen = !this.isOpen;
+
+        // Navigation collapse toggled...
+        this._fuseNavigationService.onItemCollapsed.next(this.item);
+        this._fuseNavigationService.onItemCollapseToggled.next();
+    }
+
+    /**
+     * Expand the collapsable navigation
+     */
+    expand(): void
+    {
+        if ( this.isOpen )
+        {
+            return;
+        }
+
+        this.isOpen = true;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        this._fuseNavigationService.onItemCollapseToggled.next();
+    }
+
+    /**
+     * Collapse the collapsable navigation
+     */
+    collapse(): void
+    {
+        if ( !this.isOpen )
+        {
+            return;
+        }
+
+        this.isOpen = false;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+
+        this._fuseNavigationService.onItemCollapseToggled.next();
+    }
+
+    /**
+     * Check if the given parent has the
+     * given item in one of its children
+     *
+     * @param parent
+     * @param item
+     * @returns {boolean}
+     */
+    isChildrenOf(parent, item): boolean
+    {
+        const children = parent.children;
+
+        if ( !children )
+        {
+            return false;
+        }
+
+        if ( children.indexOf(item) > -1 )
+        {
+            return true;
+        }
+
+        for ( const child of children )
+        {
+            if ( child.children )
+            {
+                if ( this.isChildrenOf(child, item) )
+                {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Check if the given url can be found
+     * in one of the given parent's children
+     *
+     * @param parent
+     * @param url
+     * @returns {boolean}
+     */
+    isUrlInChildren(parent, url): boolean
+    {
+        const children = parent.children;
+
+        if ( !children )
+        {
+            return false;
+        }
+
+        for ( const child of children )
+        {
+            if ( child.children )
+            {
+                if ( this.isUrlInChildren(child, url) )
+                {
+                    return true;
+                }
+            }
+
+            if ( child.url === url || url.includes(child.url) )
+            {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+}

src/@fuse/components/navigation/vertical/group/group.component.html

@@ -1,13 +1,14 @@
 <ng-container *ngIf="!item.hidden">
 
-    <div class="group-title">
+    <div class="group-title" [ngClass]="item.classes">
         <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
     </div>
 
     <div class="group-items">
         <ng-container *ngFor="let item of item.children">
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
+                                           [item]="item"></fuse-nav-vertical-collapsable>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
         </ng-container>
     </div>

src/@fuse/components/navigation/vertical/group/group.component.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
+@Component({
+    selector   : 'fuse-nav-vertical-group',
+    templateUrl: './group.component.html',
+    styleUrls  : ['./group.component.scss']
+})
+export class FuseNavVerticalGroupComponent implements OnInit, OnDestroy
+{
+    @HostBinding('class')
+    classes = 'nav-group nav-item';
+
+    @Input()
+    item: FuseNavigationItem;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     */
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+}

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

@@ -0,0 +1,48 @@
+<ng-container *ngIf="!item.hidden">
+
+    <!-- item.url -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'">
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
+        <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/vertical/item/item.component.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationItem } from '@fuse/types';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
+@Component({
+    selector   : 'fuse-nav-vertical-item',
+    templateUrl: './item.component.html',
+    styleUrls  : ['./item.component.scss']
+})
+export class FuseNavVerticalItemComponent implements OnInit, OnDestroy
+{
+    @HostBinding('class')
+    classes = 'nav-item';
+
+    @Input()
+    item: FuseNavigationItem;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     */
+
+    /**
+     *
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {FuseNavigationService} _fuseNavigationService
+     */
+    constructor(
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseNavigationService: FuseNavigationService
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to navigation item
+        merge(
+            this._fuseNavigationService.onNavigationItemAdded,
+            this._fuseNavigationService.onNavigationItemUpdated,
+            this._fuseNavigationService.onNavigationItemRemoved
+        ).pipe(takeUntil(this._unsubscribeAll))
+         .subscribe(() => {
+
+             // Mark for check
+             this._changeDetectorRef.markForCheck();
+         });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}

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

@@ -1,45 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <!-- 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"
-              [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>
-
-    <div class="children" [@slideInOut]="isOpen">
-        <ng-container *ngFor="let item of item.children">
-            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
-            <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-        </ng-container>
-    </div>
-
-</ng-container>

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

@@ -1,193 +0,0 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { FuseNavigationService } from '../../navigation.service';
-import { NavigationEnd, Router } from '@angular/router';
-import { fuseAnimations } from '../../../../animations/index';
-
-@Component({
-    selector   : 'fuse-nav-vertical-collapse',
-    templateUrl: './nav-vertical-collapse.component.html',
-    styleUrls  : ['./nav-vertical-collapse.component.scss'],
-    animations : fuseAnimations
-})
-export class FuseNavVerticalCollapseComponent implements OnInit
-{
-    @Input() item: any;
-    @HostBinding('class') classes = 'nav-collapse nav-item';
-    @HostBinding('class.open') public isOpen = false;
-
-    constructor(
-        private navigationService: FuseNavigationService,
-        private router: Router
-    )
-    {
-        // Listen for route changes
-        router.events.subscribe(
-            (event) => {
-                if ( event instanceof NavigationEnd )
-                {
-                    // Check if the url can be found in
-                    // one of the children of this item
-                    if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
-                    {
-                        this.expand();
-                    }
-                    else
-                    {
-                        this.collapse();
-                    }
-                }
-            }
-        );
-
-        // Listen for collapsing of any navigation item
-        this.navigationService.onItemCollapsed
-            .subscribe(
-                (clickedItem) => {
-                    if ( clickedItem && clickedItem.children )
-                    {
-                        // Check if the clicked item is one
-                        // of the children of this item
-                        if ( this.isChildrenOf(this.item, clickedItem) )
-                        {
-                            return;
-                        }
-
-                        // Check if the url can be found in
-                        // one of the children of this item
-                        if ( this.isUrlInChildren(this.item, this.router.url) )
-                        {
-                            return;
-                        }
-
-                        // If the clicked item is not this item, collapse...
-                        if ( this.item !== clickedItem )
-                        {
-                            this.collapse();
-                        }
-                    }
-                }
-            );
-    }
-
-    ngOnInit()
-    {
-        // Check if the url can be found in
-        // one of the children of this item
-        if ( this.isUrlInChildren(this.item, this.router.url) )
-        {
-            this.expand();
-        }
-        else
-        {
-            this.collapse();
-        }
-    }
-
-    /**
-     * Toggle collapse
-     *
-     * @param ev
-     */
-    toggleOpen(ev)
-    {
-        ev.preventDefault();
-
-        this.isOpen = !this.isOpen;
-
-        // Navigation collapse toggled...
-        this.navigationService.onItemCollapsed.next(this.item);
-        this.navigationService.onItemCollapseToggled.next();
-    }
-
-    /**
-     * Expand the collapsable navigation
-     */
-    expand()
-    {
-        if ( this.isOpen )
-        {
-            return;
-        }
-
-        this.isOpen = true;
-        this.navigationService.onItemCollapseToggled.next();
-    }
-
-    /**
-     * Collapse the collapsable navigation
-     */
-    collapse()
-    {
-        if ( !this.isOpen )
-        {
-            return;
-        }
-
-        this.isOpen = false;
-        this.navigationService.onItemCollapseToggled.next();
-    }
-
-    /**
-     * Check if the given parent has the
-     * given item in one of its children
-     *
-     * @param parent
-     * @param item
-     * @return {any}
-     */
-    isChildrenOf(parent, item)
-    {
-        if ( !parent.children )
-        {
-            return false;
-        }
-
-        if ( parent.children.indexOf(item) !== -1 )
-        {
-            return true;
-        }
-
-        for ( const children of parent.children )
-        {
-            if ( children.children )
-            {
-                return this.isChildrenOf(children, item);
-            }
-        }
-    }
-
-    /**
-     * Check if the given url can be found
-     * in one of the given parent's children
-     *
-     * @param parent
-     * @param url
-     * @returns {any}
-     */
-    isUrlInChildren(parent, url)
-    {
-        if ( !parent.children )
-        {
-            return false;
-        }
-
-        for ( let i = 0; i < parent.children.length; i++ )
-        {
-            if ( parent.children[i].children )
-            {
-                if ( this.isUrlInChildren(parent.children[i], url) )
-                {
-                    return true;
-                }
-            }
-
-            if ( parent.children[i].url === url || url.includes(parent.children[i].url) )
-            {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-}

src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts

@@ -1,17 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-vertical-group',
-    templateUrl: './nav-vertical-group.component.html',
-    styleUrls  : ['./nav-vertical-group.component.scss']
-})
-export class FuseNavVerticalGroupComponent
-{
-    @HostBinding('class') classes = 'nav-group nav-item';
-    @Input() item: any;
-
-    constructor()
-    {
-    }
-
-}

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

@@ -1,31 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <!-- 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>
-
-    <!-- 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/vertical/nav-item/nav-vertical-item.component.ts

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

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

@@ -0,0 +1,5 @@
+<ng-container *ngIf="visible">
+
+    <mat-progress-bar color="accent" [bufferValue]="bufferValue" [mode]="mode" [value]="value"></mat-progress-bar>
+
+</ng-container>

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

@@ -0,0 +1,17 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 99998;
+
+    mat-progress-bar {
+
+        .mat-progress-bar-buffer {
+            background-color: #C5C6CB !important;
+        }
+    }
+}

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

@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
+
+@Component({
+    selector     : 'fuse-progress-bar',
+    templateUrl  : './progress-bar.component.html',
+    styleUrls    : ['./progress-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseProgressBarComponent implements OnInit, OnDestroy
+{
+    bufferValue: number;
+    mode: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+    value: number;
+    visible: boolean;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseProgressBarService} _fuseProgressBarService
+     */
+    constructor(
+        private _fuseProgressBarService: FuseProgressBarService
+    )
+    {
+        // Set the defaults
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the progress bar service properties
+
+        // Buffer value
+        this._fuseProgressBarService.bufferValue
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((bufferValue) => {
+                this.bufferValue = bufferValue;
+            });
+
+        // Mode
+        this._fuseProgressBarService.mode
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((mode) => {
+                this.mode = mode;
+            });
+
+        // Value
+        this._fuseProgressBarService.value
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.value = value;
+            });
+
+        // Visible
+        this._fuseProgressBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.visible = visible;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}

src/@fuse/components/progress-bar/progress-bar.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+import { FuseProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseProgressBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseProgressBarComponent
+    ]
+})
+export class FuseProgressBarModule
+{
+}

src/@fuse/components/progress-bar/progress-bar.service.ts

@@ -0,0 +1,132 @@
+import { Injectable } from '@angular/core';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseProgressBarService
+{
+    // Private
+    private _bufferValue: BehaviorSubject<number>;
+    private _mode: BehaviorSubject<string>;
+    private _value: BehaviorSubject<number>;
+    private _visible: BehaviorSubject<boolean>;
+
+    /**
+     * Constructor
+     *
+     * @param {Router} _router
+     */
+    constructor(
+        private _router: Router
+    )
+    {
+        // Initialize the service
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Buffer value
+     */
+    get bufferValue(): Observable<any>
+    {
+        return this._bufferValue.asObservable();
+    }
+
+    setBufferValue(value: number): void
+    {
+        this._bufferValue.next(value);
+    }
+
+    /**
+     * Mode
+     */
+    get mode(): Observable<any>
+    {
+        return this._mode.asObservable();
+    }
+
+    setMode(value: 'determinate' | 'indeterminate' | 'buffer' | 'query'): void
+    {
+        this._mode.next(value);
+    }
+
+    /**
+     * Value
+     */
+    get value(): Observable<any>
+    {
+        return this._value.asObservable();
+    }
+
+    setValue(value: number): void
+    {
+        this._value.next(value);
+    }
+
+    /**
+     * Visible
+     */
+    get visible(): Observable<any>
+    {
+        return this._visible.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Initialize the behavior subjects
+        this._bufferValue = new BehaviorSubject(0);
+        this._mode = new BehaviorSubject('indeterminate');
+        this._value = new BehaviorSubject(0);
+        this._visible = new BehaviorSubject(false);
+
+        // Subscribe to the router events to show/hide the loading bar
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationStart))
+            .subscribe(() => {
+                this.show();
+            });
+
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel))
+            .subscribe(() => {
+                this.hide();
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the progress bar
+     */
+    show(): void
+    {
+        this._visible.next(true);
+    }
+
+    /**
+     * Hide the progress bar
+     */
+    hide(): void
+    {
+        this._visible.next(false);
+    }
+}
+

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

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

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

@@ -9,7 +9,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('sm') {
+        @include media-breakpoint('xs') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('sm') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('sm') {
+                @include media-breakpoint('xs') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -53,8 +53,9 @@
                 display: none;
                 flex: 1 0 auto;
                 min-height: 64px;
-                background-color: transparent;
                 font-size: 16px;
+                background-color: transparent;
+                color: currentColor;
             }
         }
 

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

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
@@ -8,42 +9,91 @@ import { FuseConfigService } from '@fuse/services/config.service';
     templateUrl: './search-bar.component.html',
     styleUrls  : ['./search-bar.component.scss']
 })
-export class FuseSearchBarComponent
+export class FuseSearchBarComponent implements OnInit, OnDestroy
 {
     collapsed: boolean;
-    toolbarColor: string;
-    @Output() onInput: EventEmitter<any> = new EventEmitter();
-    onConfigChanged: Subscription;
+    fuseConfig: any;
 
+    @Output()
+    input: EventEmitter<any>;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseConfigService} _fuseConfigService
+     */
     constructor(
-        private fuseConfig: FuseConfigService
+        private _fuseConfigService: FuseConfigService
     )
     {
+        // Set the defaults
+        this.input = new EventEmitter();
         this.collapsed = true;
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
-                .subscribe(
-                    (newSettings) => {
-                        this.toolbarColor = newSettings.colorClasses.toolbar;
-                    }
-                );
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    collapse()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(
+                (config) => {
+                    this.fuseConfig = config;
+                }
+            );
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Collapse
+     */
+    collapse(): void
     {
         this.collapsed = true;
     }
 
-    expand()
+    /**
+     * Expand
+     */
+    expand(): void
     {
         this.collapsed = false;
     }
 
-    search(event)
+    /**
+     * Search
+     *
+     * @param event
+     */
+    search(event): void
     {
-        const value = event.target.value;
-
-        this.onInput.emit(value);
+        this.input.emit(event.target.value);
     }
 
 }

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

@@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { MatButtonModule, MatIconModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 import { FuseSearchBarComponent } from './search-bar.component';
 

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

@@ -0,0 +1,11 @@
+@mixin fuse-search-bar-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    .fuse-search-bar {
+
+        &.expanded {
+            background-color: map-get($background, background);
+        }
+    }
+}

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

@@ -7,7 +7,7 @@
         </button>
     </div>
 
-    <div class="shortcuts" fxHide fxShow.gt-sm [ngClass]="toolbarColor">
+    <div class="shortcuts" fxLayout="row" fxHide fxShow.gt-sm>
 
         <div fxLayout="row" fxLayoutAlign="space-between center" fxFlex="0 1 auto">
 

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

@@ -2,7 +2,7 @@
 
 :host {
 
-    @include media-breakpoint-down('sm') {
+    @include media-breakpoint('lt-md') {
 
         #fuse-shortcuts {
 
@@ -19,6 +19,10 @@
                     display: flex !important;
                     flex: 1;
                     height: 100%;
+
+                    > div {
+                        flex: 1 1 auto !important;
+                    }
                 }
             }
         }

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

@@ -1,109 +1,145 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { ObservableMedia } from '@angular/flex-layout';
-
-import { Subscription } from 'rxjs';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { MediaObserver } from '@angular/flex-layout';
 import { CookieService } from 'ngx-cookie-service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
     selector   : 'fuse-shortcuts',
     templateUrl: './shortcuts.component.html',
     styleUrls  : ['./shortcuts.component.scss']
 })
-export class FuseShortcutsComponent implements OnInit, OnDestroy
+export class FuseShortcutsComponent implements OnInit, AfterViewInit, OnDestroy
 {
-    shortcutItems: any[] = [];
+    shortcutItems: any[];
     navigationItems: any[];
     filteredNavigationItems: any[];
-    searching = false;
-    mobileShortcutsPanelActive = false;
-    toolbarColor: string;
-    matchMediaSubscription: Subscription;
-    onConfigChanged: Subscription;
+    searching: boolean;
+    mobileShortcutsPanelActive: boolean;
 
-    @Input() navigation: any;
+    @Input()
+    navigation: any;
 
-    @ViewChild('searchInput') searchInputField;
-    @ViewChild('shortcuts') shortcutsEl: ElementRef;
+    @ViewChild('searchInput', {static: false})
+    searchInputField;
 
+    @ViewChild('shortcuts', {static: false})
+    shortcutsEl: ElementRef;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {CookieService} _cookieService
+     * @param {FuseMatchMediaService} _fuseMatchMediaService
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {MediaObserver} _mediaObserver
+     * @param {Renderer2} _renderer
+     */
     constructor(
-        private renderer: Renderer2,
-        private observableMedia: ObservableMedia,
-        private fuseMatchMedia: FuseMatchMediaService,
-        private fuseNavigationService: FuseNavigationService,
-        private fuseConfig: FuseConfigService,
-        private cookieService: CookieService
+        private _cookieService: CookieService,
+        private _fuseMatchMediaService: FuseMatchMediaService,
+        private _fuseNavigationService: FuseNavigationService,
+        private _mediaObserver: MediaObserver,
+        private _renderer: Renderer2
     )
     {
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
-                .subscribe(
-                    (newSettings) => {
-                        this.toolbarColor = newSettings.colorClasses.toolbar;
-                    }
-                );
+        // Set the defaults
+        this.shortcutItems = [];
+        this.searching = false;
+        this.mobileShortcutsPanelActive = false;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
         // Get the navigation items and flatten them
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(this.navigation);
+        this.filteredNavigationItems = this.navigationItems = this._fuseNavigationService.getFlatNavigation(this.navigation);
 
-        const cookieExists = this.cookieService.check('FUSE2.shortcuts');
-
-        if ( cookieExists )
+        if ( this._cookieService.check('FUSE2.shortcuts') )
         {
-            this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
+            this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
         }
         else
         {
             // User's shortcut items
             this.shortcutItems = [
                 {
-                    'title': 'Calendar',
-                    'type' : 'nav-item',
-                    'icon' : 'today',
-                    'url'  : '/apps/calendar'
+                    title: 'Calendar',
+                    type : 'item',
+                    icon : 'today',
+                    url  : '/apps/calendar'
                 },
                 {
-                    'title': 'Mail',
-                    'type' : 'nav-item',
-                    'icon' : 'email',
-                    'url'  : '/apps/mail'
+                    title: 'Mail',
+                    type : 'item',
+                    icon : 'email',
+                    url  : '/apps/mail'
                 },
                 {
-                    'title': 'Contacts',
-                    'type' : 'nav-item',
-                    'icon' : 'account_box',
-                    'url'  : '/apps/contacts'
+                    title: 'Contacts',
+                    type : 'item',
+                    icon : 'account_box',
+                    url  : '/apps/contacts'
                 },
                 {
-                    'title': 'To-Do',
-                    'type' : 'nav-item',
-                    'icon' : 'check_box',
-                    'url'  : '/apps/todo'
+                    title: 'To-Do',
+                    type : 'item',
+                    icon : 'check_box',
+                    url  : '/apps/todo'
                 }
             ];
         }
 
-        this.matchMediaSubscription =
-            this.fuseMatchMedia.onMediaChange.subscribe(() => {
-                if ( this.observableMedia.isActive('gt-sm') )
+    }
+
+    ngAfterViewInit(): void
+    {
+        // Subscribe to media changes
+        this._fuseMatchMediaService.onMediaChange
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                if ( this._mediaObserver.isActive('gt-sm') )
                 {
                     this.hideMobileShortcutsPanel();
                 }
             });
     }
 
-    ngOnDestroy()
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
     {
-        this.matchMediaSubscription.unsubscribe();
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 
-    search(event)
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Search
+     *
+     * @param event
+     */
+    search(event): void
     {
         const value = event.target.value.toLowerCase();
 
@@ -122,7 +158,13 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         });
     }
 
-    toggleShortcut(event, itemToToggle)
+    /**
+     * Toggle shortcut
+     *
+     * @param event
+     * @param itemToToggle
+     */
+    toggleShortcut(event, itemToToggle): void
     {
         event.stopPropagation();
 
@@ -133,7 +175,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
                 this.shortcutItems.splice(i, 1);
 
                 // Save to the cookies
-                this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
+                this._cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
 
                 return;
             }
@@ -142,32 +184,47 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         this.shortcutItems.push(itemToToggle);
 
         // Save to the cookies
-        this.cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
+        this._cookieService.set('FUSE2.shortcuts', JSON.stringify(this.shortcutItems));
     }
 
-    isInShortcuts(navigationItem)
+    /**
+     * Is in shortcuts?
+     *
+     * @param navigationItem
+     * @returns {any}
+     */
+    isInShortcuts(navigationItem): any
     {
         return this.shortcutItems.find(item => {
             return item.url === navigationItem.url;
         });
     }
 
-    onMenuOpen()
+    /**
+     * On menu open
+     */
+    onMenuOpen(): void
     {
         setTimeout(() => {
             this.searchInputField.nativeElement.focus();
         });
     }
 
-    showMobileShortcutsPanel()
+    /**
+     * Show mobile shortcuts
+     */
+    showMobileShortcutsPanel(): void
     {
         this.mobileShortcutsPanelActive = true;
-        this.renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
+        this._renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
     }
 
-    hideMobileShortcutsPanel()
+    /**
+     * Hide mobile shortcuts
+     */
+    hideMobileShortcutsPanel(): void
     {
         this.mobileShortcutsPanelActive = false;
-        this.renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
+        this._renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
     }
 }

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

@@ -2,7 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { CookieService } from 'ngx-cookie-service';
 
 import { FuseShortcutsComponent } from './shortcuts.component';

src/@fuse/components/shortcuts/shortcuts.theme.scss

@@ -0,0 +1,11 @@
+@mixin fuse-shortcuts-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    #fuse-shortcuts {
+
+        &.show-mobile-panel {
+            background-color: map-get($background, background);
+        }
+    }
+}

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

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
     display: flex;
     flex-direction: column;
@@ -7,21 +9,25 @@ fuse-sidebar {
     bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     width: 280px;
     min-width: 280px;
     max-width: 280px;
     z-index: 1000;
-    transition-property: transform, width, min-width, max-width;
-    transition-duration: 150ms;
-    transition-timing-function: ease-in-out;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
 
-    &.left-aligned {
+    @include media-breakpoint('xs') {
+        min-width: 0 !important;
+        max-width: 80vw !important;
+        width: 80vw !important;
+    }
+
+    &.left-positioned {
         left: 0;
         transform: translateX(-100%);
     }
 
-    &.right-aligned {
+    &.right-positioned {
         right: 0;
         transform: translateX(100%);
     }
@@ -39,12 +45,12 @@ fuse-sidebar {
         position: absolute !important;
         top: 0;
         bottom: 0;
+    }
 
-        &:not(.unfolded) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-        }
+    &.animations-enabled {
+        transition-property: transform, width, min-width, max-width;
+        transition-duration: 150ms;
+        transition-timing-function: ease-in-out;
     }
 }
 
@@ -54,7 +60,6 @@ fuse-sidebar {
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 3;
-    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 999;
     opacity: 0;
 }

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

@@ -1,7 +1,10 @@
-import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, ViewEncapsulation
+} from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
-import { ObservableMedia } from '@angular/flex-layout';
-import { Subscription } from 'rxjs';
+import { MediaObserver } from '@angular/flex-layout';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@@ -19,9 +22,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @Input()
     name: string;
 
-    // Align
+    // Key
     @Input()
-    align: 'left' | 'right';
+    key: string;
+
+    // Position
+    @Input()
+    position: 'left' | 'right';
 
     // Open
     @HostBinding('class.open')
@@ -35,37 +42,118 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostBinding('class.locked-open')
     isLockedOpen: boolean;
 
-    // Folded
-    @HostBinding('class.folded')
+    // Folded width
+    @Input()
+    foldedWidth: number;
+
+    // Folded auto trigger on hover
+    @Input()
+    foldedAutoTriggerOnHover: boolean;
+
+    // Folded unfolded
+    @HostBinding('class.unfolded')
+    unfolded: boolean;
+
+    // Invisible overlay
+    @Input()
+    invisibleOverlay: boolean;
+
+    // Folded changed
+    @Output()
+    foldedChanged: EventEmitter<boolean>;
+
+    // Opened changed
+    @Output()
+    openedChanged: EventEmitter<boolean>;
+
+    // Private
+    private _folded: boolean;
+    private _fuseConfig: any;
+    private _wasActive: boolean;
+    private _wasFolded: boolean;
+    private _backdrop: HTMLElement | null = null;
+    private _player: AnimationPlayer;
+    private _unsubscribeAll: Subject<any>;
+
+    @HostBinding('class.animations-enabled')
+    private _animationsEnabled: boolean;
+
+    /**
+     * Constructor
+     *
+     * @param {AnimationBuilder} _animationBuilder
+     * @param {ChangeDetectorRef} _changeDetectorRef
+     * @param {ElementRef} _elementRef
+     * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseMatchMediaService} _fuseMatchMediaService
+     * @param {FuseSidebarService} _fuseSidebarService
+     * @param {MediaObserver} _mediaObserver
+     * @param {Renderer2} _renderer
+     */
+    constructor(
+        private _animationBuilder: AnimationBuilder,
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _elementRef: ElementRef,
+        private _fuseConfigService: FuseConfigService,
+        private _fuseMatchMediaService: FuseMatchMediaService,
+        private _fuseSidebarService: FuseSidebarService,
+        private _mediaObserver: MediaObserver,
+        private _renderer: Renderer2
+    )
+    {
+        // Set the defaults
+        this.foldedAutoTriggerOnHover = true;
+        this.foldedWidth = 64;
+        this.foldedChanged = new EventEmitter();
+        this.openedChanged = new EventEmitter();
+        this.opened = false;
+        this.position = 'left';
+        this.invisibleOverlay = false;
+
+        // Set the private defaults
+        this._animationsEnabled = false;
+        this._folded = false;
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Folded
+     *
+     * @param {boolean} value
+     */
     @Input()
     set folded(value: boolean)
     {
-        // Only work if the sidebar is not closed
+        // Set the folded
+        this._folded = value;
+
+        // Return if the sidebar is closed
         if ( !this.opened )
         {
             return;
         }
 
-        // Set the folded
-        this._folded = value;
-
-        // Programmatically add/remove margin to the element
-        // that comes after or before based on the alignment
+        // Programmatically add/remove padding to the element
+        // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
-        if ( this.align === 'left' )
+        if ( this.position === 'left' )
         {
-            sibling = this.elementRef.nativeElement.nextElementSibling;
-            styleRule = 'marginLeft';
+            sibling = this._elementRef.nativeElement.nextElementSibling;
+            styleRule = 'padding-left';
         }
         else
         {
-            sibling = this.elementRef.nativeElement.previousElementSibling;
-            styleRule = 'marginRight';
+            sibling = this._elementRef.nativeElement.previousElementSibling;
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -77,15 +165,36 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // If folded...
         if ( value )
         {
-            // Set the style
-            this.renderer.setStyle(sibling, styleRule, styleValue);
+            // Fold the sidebar
+            this.fold();
+
+            // Set the folded width
+            this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+            // Set the style and class
+            this._renderer.setStyle(sibling, styleRule, styleValue);
+            this._renderer.addClass(this._elementRef.nativeElement, 'folded');
         }
         // If unfolded...
         else
         {
-            // Remove the style
-            this.renderer.removeStyle(sibling, styleRule);
+            // Unfold the sidebar
+            this.unfold();
+
+            // Remove the folded width
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
+            // Remove the style and class
+            this._renderer.removeStyle(sibling, styleRule);
+            this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
         }
+
+        // Emit the 'foldedChanged' event
+        this.foldedChanged.emit(this.folded);
     }
 
     get folded(): boolean
@@ -93,57 +202,36 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         return this._folded;
     }
 
-    // Folded unfolded
-    @HostBinding('class.unfolded')
-    unfolded: boolean;
-
-    // Private
-    private _folded: boolean;
-    private _wasActive: boolean;
-    private _backdrop: HTMLElement | null = null;
-    private _player: AnimationPlayer;
-    private _onMediaChangeSubscription: Subscription;
-
-    /**
-     * Constructor
-     *
-     * @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 observableMedia: ObservableMedia,
-        private fuseConfigService: FuseConfigService,
-        private fuseSidebarService: FuseSidebarService,
-        private fuseMatchMediaService: FuseMatchMediaService
-    )
-    {
-        // Set the defaults
-        this.opened = false;
-        this.folded = false;
-        this.align = 'left';
-    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
 
     /**
      * On init
      */
     ngOnInit(): void
     {
-        // Register the sidebar
-        this.fuseSidebarService.register(this.name, this);
+        // Subscribe to config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this._fuseConfig = config;
+            });
 
-        // Setup alignment
-        this._setupAlignment();
+        // Register the sidebar
+        this._fuseSidebarService.register(this.name, this);
+
+        // Setup visibility
+        this._setupVisibility();
+
+        // Setup position
+        this._setupPosition();
 
         // Setup lockedOpen
         this._setupLockedOpen();
+
+        // Setup folded
+        this._setupFolded();
     }
 
     /**
@@ -158,28 +246,47 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         }
 
         // Unregister the sidebar
-        this.fuseSidebarService.unregister(this.name);
+        this._fuseSidebarService.unregister(this.name);
 
-        // Unsubscribe from the media watcher subscription
-        this._onMediaChangeSubscription.unsubscribe();
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
     /**
-     * Set the sidebar alignment
+     * Setup the visibility of the sidebar
      *
      * @private
      */
-    private _setupAlignment(): void
+    private _setupVisibility(): void
+    {
+        // Remove the existing box-shadow
+        this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none');
+
+        // Make the sidebar invisible
+        this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
+    }
+
+    /**
+     * Setup the sidebar position
+     *
+     * @private
+     */
+    private _setupPosition(): void
     {
         // Add the correct class name to the sidebar
-        // element depending on the align attribute
-        if ( this.align === 'right' )
+        // element depending on the position attribute
+        if ( this.position === 'right' )
         {
-            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
+            this._renderer.addClass(this._elementRef.nativeElement, 'right-positioned');
         }
         else
         {
-            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
+            this._renderer.addClass(this._elementRef.nativeElement, 'left-positioned');
         }
     }
 
@@ -193,19 +300,26 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Return if the lockedOpen wasn't set
         if ( !this.lockedOpen )
         {
+            // Return
             return;
         }
 
         // Set the wasActive for the first time
         this._wasActive = false;
 
-        // Act on every media change
-        this._onMediaChangeSubscription =
+        // Set the wasFolded
+        this._wasFolded = this.folded;
 
-            this.fuseMatchMediaService.onMediaChange.subscribe(() => {
+        // Show the sidebar
+        this._showSidebar();
+
+        // Act on every media change
+        this._fuseMatchMediaService.onMediaChange
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
 
                 // Get the active status
-                const isActive = this.observableMedia.isActive(this.lockedOpen);
+                const isActive = this._mediaObserver.isActive(this.lockedOpen);
 
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
@@ -219,18 +333,30 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                     // Set the lockedOpen status
                     this.isLockedOpen = true;
 
+                    // Show the sidebar
+                    this._showSidebar();
+
                     // 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 )
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
+                    // If the sidebar was folded, forcefully fold it again
+                    if ( this._wasFolded )
                     {
-                        this.fold();
+                        // Enable the animations
+                        this._enableAnimations();
+
+                        // Fold
+                        this.folded = true;
+
+                        // Mark for check
+                        this._changeDetectorRef.markForCheck();
                     }
 
                     // Hide the backdrop if any exists
-                    this.hideBackdrop();
+                    this._hideBackdrop();
                 }
                 // De-Activate the lockedOpen
                 else
@@ -243,6 +369,12 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
 
                     // Force the the opened status to close
                     this.opened = false;
+
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
+                    // Hide the sidebar
+                    this._hideSidebar();
                 }
 
                 // Store the new active status
@@ -250,6 +382,209 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             });
     }
 
+    /**
+     * Setup the initial folded status
+     *
+     * @private
+     */
+    private _setupFolded(): void
+    {
+        // Return, if sidebar is not folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Return if the sidebar is closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Programmatically add/remove padding to the element
+        // that comes after or before based on the position
+        let sibling,
+            styleRule;
+
+        const styleValue = this.foldedWidth + 'px';
+
+        // Get the sibling and set the style rule
+        if ( this.position === 'left' )
+        {
+            sibling = this._elementRef.nativeElement.nextElementSibling;
+            styleRule = 'padding-left';
+        }
+        else
+        {
+            sibling = this._elementRef.nativeElement.previousElementSibling;
+            styleRule = 'padding-right';
+        }
+
+        // If there is no sibling, return...
+        if ( !sibling )
+        {
+            return;
+        }
+
+        // Fold the sidebar
+        this.fold();
+
+        // Set the folded width
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+        // Set the style and class
+        this._renderer.setStyle(sibling, styleRule, styleValue);
+        this._renderer.addClass(this._elementRef.nativeElement, 'folded');
+    }
+
+    /**
+     * Show the backdrop
+     *
+     * @private
+     */
+    private _showBackdrop(): void
+    {
+        // Create the backdrop element
+        this._backdrop = this._renderer.createElement('div');
+
+        // Add a class to the backdrop element
+        this._backdrop.classList.add('fuse-sidebar-overlay');
+
+        // Add a class depending on the invisibleOverlay option
+        if ( this.invisibleOverlay )
+        {
+            this._backdrop.classList.add('fuse-sidebar-overlay-invisible');
+        }
+
+        // Append the backdrop to the parent of the sidebar
+        this._renderer.appendChild(this._elementRef.nativeElement.parentElement, this._backdrop);
+
+        // Create the enter animation and attach it to the player
+        this._player =
+            this._animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 1}))
+                ]).create(this._backdrop);
+
+        // Play the animation
+        this._player.play();
+
+        // Add an event listener to the overlay
+        this._backdrop.addEventListener('click', () => {
+                this.close();
+            }
+        );
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Hide the backdrop
+     *
+     * @private
+     */
+    private _hideBackdrop(): void
+    {
+        if ( !this._backdrop )
+        {
+            return;
+        }
+
+        // Create the leave animation and attach it to the player
+        this._player =
+            this._animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 0}))
+                ]).create(this._backdrop);
+
+        // Play the animation
+        this._player.play();
+
+        // Once the animation is done...
+        this._player.onDone(() => {
+
+            // If the backdrop still exists...
+            if ( this._backdrop )
+            {
+                // Remove the backdrop
+                this._backdrop.parentNode.removeChild(this._backdrop);
+                this._backdrop = null;
+            }
+        });
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Change some properties of the sidebar
+     * and make it visible
+     *
+     * @private
+     */
+    private _showSidebar(): void
+    {
+        // Remove the box-shadow style
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'box-shadow');
+
+        // Make the sidebar invisible
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'visibility');
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Change some properties of the sidebar
+     * and make it invisible
+     *
+     * @private
+     */
+    private _hideSidebar(delay = true): void
+    {
+        const delayAmount = delay ? 300 : 0;
+
+        // Add a delay so close animation can play
+        setTimeout(() => {
+
+            // Remove the box-shadow
+            this._renderer.setStyle(this._elementRef.nativeElement, 'box-shadow', 'none');
+
+            // Make the sidebar invisible
+            this._renderer.setStyle(this._elementRef.nativeElement, 'visibility', 'hidden');
+        }, delayAmount);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Enable the animations
+     *
+     * @private
+     */
+    private _enableAnimations(): void
+    {
+        // Return if animations already enabled
+        if ( this._animationsEnabled )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._animationsEnabled = true;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
     /**
      * Open the sidebar
      */
@@ -260,11 +595,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
+        // Enable the animations
+        this._enableAnimations();
+
+        // Show the sidebar
+        this._showSidebar();
+
         // Show the backdrop
-        this.showBackdrop();
+        this._showBackdrop();
 
         // Set the opened status
         this.opened = true;
+
+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -277,11 +624,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
+        // Enable the animations
+        this._enableAnimations();
+
         // Hide the backdrop
-        this.hideBackdrop();
+        this._hideBackdrop();
 
         // Set the opened status
         this.opened = false;
+
+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
+        // Hide the sidebar
+        this._hideSidebar();
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -305,14 +664,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseenter')
     onMouseEnter(): void
     {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        // Only work if the auto trigger is enabled
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
+        this.unfoldTemporarily();
     }
 
     /**
@@ -321,14 +679,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseleave')
     onMouseLeave(): void
     {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        // Only work if the auto trigger is enabled
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Fold the sidebar back
-        this.unfolded = false;
+        this.foldTemporarily();
     }
 
     /**
@@ -342,8 +699,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
+        // Enable the animations
+        this._enableAnimations();
+
         // Fold
         this.folded = true;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -357,8 +720,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
+        // Enable the animations
+        this._enableAnimations();
+
         // Unfold
         this.folded = false;
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -377,66 +746,56 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     }
 
     /**
-     * Show the backdrop
+     * Fold the temporarily unfolded sidebar back
      */
-    showBackdrop(): void
+    foldTemporarily(): void
     {
-        // Create the backdrop element
-        this._backdrop = this.renderer.createElement('div');
-
-        // Add a class to the backdrop element
-        this._backdrop.classList.add('fuse-sidebar-overlay');
-
-        // Append the backdrop to the parent of the sidebar
-        this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop);
-
-        // Create the enter animation and attach it to the player
-        this._player =
-            this.animationBuilder
-                .build([
-                    animate('300ms ease', style({opacity: 1}))
-                ]).create(this._backdrop);
-
-        // Play the animation
-        this._player.play();
-
-        // Add an event listener to the overlay
-        this._backdrop.addEventListener('click', () => {
-                this.close();
-            }
-        );
-    }
-
-    /**
-     * Hide the backdrop
-     */
-    hideBackdrop(): void
-    {
-        if ( !this._backdrop )
+        // Only work if the sidebar is folded
+        if ( !this.folded )
         {
             return;
         }
 
-        // Create the leave animation and attach it to the player
-        this._player =
-            this.animationBuilder
-                .build([
-                    animate('300ms ease', style({opacity: 0}))
-                ]).create(this._backdrop);
+        // Enable the animations
+        this._enableAnimations();
 
-        // Play the animation
-        this._player.play();
+        // Fold the sidebar back
+        this.unfolded = false;
 
-        // Once the animation is done...
-        this._player.onDone(() => {
+        // Set the folded width
+        const styleValue = this.foldedWidth + 'px';
 
-            // If the backdrop still exists...
-            if ( this._backdrop )
-            {
-                // Remove the backdrop
-                this._backdrop.parentNode.removeChild(this._backdrop);
-                this._backdrop = null;
-            }
-        });
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
+
+        // Remove the folded width
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
     }
 }

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

@@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
 
 import { FuseSidebarComponent } from './sidebar.component';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseSidebarService
 {
     // Private

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

@@ -0,0 +1,16 @@
+@mixin fuse-sidebar-theme($theme) {
+
+    $background: map-get($theme, background);
+
+    fuse-sidebar {
+        background: map-get($background, background);
+    }
+
+    .fuse-sidebar-overlay {
+        background-color: rgba(0, 0, 0, 0.6);
+
+        &.fuse-sidebar-overlay-invisible {
+            background-color: transparent;
+        }
+    }
+}

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

@@ -1,105 +1,547 @@
-<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
-    <mat-icon>settings</mat-icon>
-</button>
+<div class="theme-options-panel" fusePerfectScrollbar>
 
-<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
+    <div class="header">
 
-<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
+        <span class="title">Theme Options</span>
 
-    <button mat-icon-button class="close-button" (click)="closeBar()">
-        <mat-icon>close</mat-icon>
-    </button>
+        <button mat-icon-button class="close-button" (click)="toggleSidebarOpen('themeOptionsPanel')">
+            <mat-icon>close</mat-icon>
+        </button>
 
-    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
+    </div>
 
-        <h3>Navigation:</h3>
-        <mat-radio-group [(ngModel)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
-            <mat-radio-button class="mr-8 mb-8" value="top">Top</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="left">Left</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="right">Right</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-        </mat-radio-group>
+    <form [formGroup]="form">
 
-        <h3>Navigation Fold (for vertical navigation):</h3>
-        <mat-slide-toggle [(ngModel)]="config.layout.navigationFolded"
-                          (change)="onSettingsChange()">
-            Folded
-        </mat-slide-toggle>
+        <!-- COLOR THEME -->
+        <div class="group">
 
-        <h3 class="mt-24">Toolbar:</h3>
-        <mat-radio-group [(ngModel)]="config.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign="start start">
-            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-        </mat-radio-group>
+            <h2>Color themes</h2>
 
-        <h3 class="mt-24">Footer:</h3>
-        <mat-radio-group [(ngModel)]="config.layout.footer" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row  wrap" fxLayoutAlign="start start">
-            <mat-radio-button class="mr-8 mb-8" value="below">Below</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="above">Above</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="none">None</mat-radio-button>
-        </mat-radio-group>
-
-        <h3 class="mt-24">Layout Mode:</h3>
-        <mat-radio-group [(ngModel)]="config.layout.mode" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row  wrap" fxLayoutAlign="start start">
-            <mat-radio-button class="mr-8 mb-8" value="boxed">Boxed</mat-radio-button>
-            <mat-radio-button class="mr-8 mb-8" value="fullwidth">Fullwidth</mat-radio-button>
-        </mat-radio-group>
-
-        <mat-divider></mat-divider>
-
-        <h3>Colors:</h3>
-        <div class="colors">
-
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.toolbar"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
-            </div>
-
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Navigation Bar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.navbar"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
-            </div>
-
-            <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mr-8">Footer Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.footer"
-                                            (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
-            </div>
+            <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
+                <mat-radio-button class="mb-12" value="theme-default">Default Light</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-blue-gray-dark">Blue-Gray Dark</mat-radio-button>
+                <mat-radio-button class="mb-12" value="theme-pink-dark">Pink Dark</mat-radio-button>
+            </mat-radio-group>
 
         </div>
 
-        <mat-divider></mat-divider>
+        <!-- LAYOUT STYLES -->
+        <div class="group" formGroupName="layout">
 
-        <h3>Router Animation:</h3>
-        <mat-form-field class="w-100-p">
-            <mat-select class="p-0" [(ngModel)]="config.routerAnimation">
-                <mat-option value="none">
-                    None
-                </mat-option>
-                <mat-option value="slideUp">
-                    Slide up
-                </mat-option>
-                <mat-option value="slideDown">
-                    Slide down
-                </mat-option>
-                <mat-option value="slideRight">
-                    Slide right
-                </mat-option>
-                <mat-option value="slideLeft">
-                    Slide left
-                </mat-option>
-                <mat-option value="fadeIn">
-                    Fade in
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
+            <h2>Layout Styles</h2>
+
+            <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
+
+                <mat-radio-button class="mb-12" value="vertical-layout-1">
+                    Vertical Layout #1
+                </mat-radio-button>
+
+                <mat-radio-button class="mb-12" value="vertical-layout-2">
+                    Vertical Layout #2
+                </mat-radio-button>
+
+                <mat-radio-button class="mb-12" value="vertical-layout-3">
+                    Vertical Layout #3
+                </mat-radio-button>
+
+                <mat-radio-button class="mb-12" value="horizontal-layout-1">
+                    Horizontal Layout #1
+                </mat-radio-button>
+
+            </mat-radio-group>
+
+            <!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
+            <ng-container [ngSwitch]="fuseConfig.layout.style">
+
+                <!-- VERTICAL LAYOUT #1 -->
+                <ng-container *ngSwitchCase="'vertical-layout-1'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-32">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
+                            Folded
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+                <!-- VERTICAL LAYOUT #2 -->
+                <ng-container *ngSwitchCase="'vertical-layout-2'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-32">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
+                            Folded
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+                <!-- VERTICAL LAYOUT #3 -->
+                <ng-container *ngSwitchCase="'vertical-layout-3'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-32">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <mat-slide-toggle class="mt-24" formControlName="folded">
+                            Folded
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="primaryBackground"></fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+                <!-- HORIZONTAL LAYOUT #1 -->
+                <ng-container *ngSwitchCase="'horizontal-layout-1'">
+
+                    <!-- LAYOUT WIDTH -->
+                    <div class="group mt-32">
+
+                        <h2>Layout Width</h2>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
+                            <mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                    <!-- NAVBAR -->
+                    <div class="group" formGroupName="navbar">
+
+                        <h2>Navbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-8">Variant (Vertical):</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-16 mb-8">Primary background:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="primaryBackground">
+                        </fuse-material-color-picker>
+
+                        <h3 class="mt-16 mb-8">Secondary background (Vertical):</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="secondaryBackground">
+                        </fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- TOOLBAR -->
+                    <div class="group" formGroupName="toolbar">
+
+                        <h2>Toolbar</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- FOOTER -->
+                    <div class="group" formGroupName="footer">
+
+                        <h2>Footer</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
+                        </mat-radio-group>
+
+                        <mat-checkbox class="mt-24" formControlName="customBackgroundColor">
+                            Use custom background color
+                        </mat-checkbox>
+
+                        <h3 class="mt-24 mb-8">Background color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    formControlName="background"></fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
+                </ng-container>
+
+            </ng-container>
+
+        </div>
+
+        <!-- CUSTOM SCROLLBARS -->
+        <div class="group">
+
+            <h2>Custom scrollbars</h2>
+
+            <mat-slide-toggle class="mb-12" formControlName="customScrollbars">
+                Enable custom scrollbars
+            </mat-slide-toggle>
+
+        </div>
+
+    </form>
 
 </div>

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

@@ -9,107 +9,67 @@
     }
 }
 
-:host {
-    position: fixed;
-    display: block;
-    right: 0;
-    top: 160px;
-    z-index: 998;
-
-    &.bar-closed .theme-options-panel {
-        display: none;
-    }
+fuse-theme-options {
+    display: flex;
+    overflow: hidden;
 
     .theme-options-panel {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 360px;
-        transform: translate3d(100%, 0, 0);
-        z-index: 999;
-        max-height: calc(100vh - 200px);
-        padding: 24px;
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 auto;
+        padding: 40px 24px 24px 24px;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
-        @include media-breakpoint-down('xs') {
-            top: -120px;
-            max-height: calc(100vh - 100px);
-            width: 90vw;
+        .header {
+            display: flex;
+            flex: 0 1 auto;
+            margin-bottom: 32px;
+            align-items: center;
+            justify-content: space-between;
+
+            .title {
+                font-size: 20px;
+                font-weight: 600;
+                padding-left: 4px;
+            }
         }
 
-        .close-button {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-        }
+        form {
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
 
-        h3 {
-            font-size: 14px;
-            font-weight: 500;
-            color: rgba(0, 0, 0, 0.54);
-        }
+            .group {
+                display: flex;
+                flex: 1 0 auto;
+                flex-direction: column;
+                position: relative;
+                border-radius: 2px;
+                padding: 28px 16px 8px 16px;
+                margin: 16px 0;
 
-        .mat-divider {
-            display: block !important;
-            width: 100%;
-            margin: 24px 0 16px 0;
-        }
+                h2 {
+                    position: absolute;
+                    top: -11px;
+                    left: 8px;
+                    margin: 0;
+                    padding: 0 8px;
+                    font-size: 16px;
+                    font-weight: 600;
+                }
 
-        .colors {
-            display: block !important;
-            width: 100%;
+                h3 {
+                    font-size: 14px;
+                    font-weight: 600;
+                    margin: 24px 0 16px 0;
+                    padding: 0;
+
+                    &:first-of-type {
+                        margin-top: 0;
+                    }
+                }
+            }
         }
     }
-
-    .theme-options-panel-overlay {
-        position: fixed;
-        display: block;
-        background: rgba(0, 0, 0, 0);
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        z-index: 998;
-
-        @include media-breakpoint-down('sm') {
-            background: rgba(0, 0, 0, 0.37);
-        }
-
-        &.hidden {
-            display: none;
-        }
-    }
-
-    .mat-list .mat-list-item {
-        font-size: 15px;
-    }
-
-    .mat-divider {
-        margin: 16px;
-    }
-
-    .open-button {
-        position: absolute;
-        top: 0;
-        left: -48px;
-        width: 48px;
-        height: 48px;
-        line-height: 48px;
-        text-align: center;
-        cursor: pointer;
-        border-radius: 0;
-        margin: 0;
-        pointer-events: auto;
-        opacity: .75;
-        z-index: 998;
-
-        mat-icon {
-            animation: rotating 3s linear infinite;
-        }
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
 }

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

@@ -1,114 +1,341 @@
-import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
-import { Subscription } from 'rxjs';
+import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 @Component({
-    selector   : 'fuse-theme-options',
-    templateUrl: './theme-options.component.html',
-    styleUrls  : ['./theme-options.component.scss'],
-    animations : fuseAnimations
+    selector     : 'fuse-theme-options',
+    templateUrl  : './theme-options.component.html',
+    styleUrls    : ['./theme-options.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
-    @Input() navigation;
-    @ViewChild('openButton') openButton;
-    @ViewChild('panel') panel;
-    @ViewChild('overlay') overlay: ElementRef;
+    fuseConfig: any;
+    form: FormGroup;
 
-    public player: AnimationPlayer;
-    config: any;
+    @HostBinding('class.bar-closed')
+    barClosed: boolean;
 
-    onConfigChanged: Subscription;
-
-    @HostBinding('class.bar-closed') barClosed: boolean;
+    // Private
+    private _unsubscribeAll: Subject<any>;
 
+    /**
+     * Constructor
+     *
+     * @param {DOCUMENT} document
+     * @param {FormBuilder} _formBuilder
+     * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     * @param {Renderer2} _renderer
+     */
     constructor(
-        private animationBuilder: AnimationBuilder,
-        private fuseConfig: FuseConfigService,
-        private navigationService: FuseNavigationService,
-        private renderer: Renderer2
+        @Inject(DOCUMENT) private document: any,
+        private _formBuilder: FormBuilder,
+        private _fuseConfigService: FuseConfigService,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService,
+        private _renderer: Renderer2
     )
     {
+        // Set the defaults
         this.barClosed = true;
 
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
-                .subscribe(
-                    (newConfig) => {
-                        this.config = newConfig;
-                    }
-                );
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
     {
-        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
-            this.closeBar();
+        // Build the config form
+        // noinspection TypeScriptValidateTypes
+        this.form = this._formBuilder.group({
+            colorTheme      : new FormControl(),
+            customScrollbars: new FormControl(),
+            layout          : this._formBuilder.group({
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
+                    primaryBackground  : new FormControl(),
+                    secondaryBackground: new FormControl(),
+                    folded             : new FormControl(),
+                    hidden             : new FormControl(),
+                    position           : new FormControl(),
+                    variant            : new FormControl()
+                }),
+                toolbar  : this._formBuilder.group({
+                    background           : new FormControl(),
+                    customBackgroundColor: new FormControl(),
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
+                }),
+                footer   : this._formBuilder.group({
+                    background           : new FormControl(),
+                    customBackgroundColor: new FormControl(),
+                    hidden               : new FormControl(),
+                    position             : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden  : new FormControl(),
+                    position: new FormControl()
+                })
+            })
         });
 
-        // Get the nav model and add customize nav item
-        // that opens the bar programmatically
-        const nav: any = this.navigation;
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
 
-        nav.push({
-            'id'      : 'custom-function',
-            'title'   : 'Custom Function',
-            'type'    : 'group',
-            'children': [
+                // Update the stored config
+                this.fuseConfig = config;
+
+                // Set the config form values without emitting an event
+                // so that we don't end up with an infinite loop
+                this.form.setValue(config, {emitEvent: false});
+            });
+
+        // Subscribe to the specific form value changes (layout.style)
+        this.form.get('layout.style').valueChanges
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+
+                // Reset the form values based on the
+                // selected layout style
+                this._resetFormValues(value);
+            });
+
+        // Subscribe to the form value changes
+        this.form.valueChanges
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+
+                // Update the config
+                this._fuseConfigService.config = config;
+            });
+
+        // Add customize nav item that opens the bar programmatically
+        const customFunctionNavItem = {
+            id      : 'custom-function',
+            title   : 'Custom Function',
+            type    : 'group',
+            icon    : 'settings',
+            children: [
                 {
-                    'id'      : 'customize',
-                    'title'   : 'Customize',
-                    'type'    : 'item',
-                    'icon'    : 'settings',
-                    'function': () => {
-                        this.openBar();
+                    id      : 'customize',
+                    title   : 'Customize',
+                    type    : 'item',
+                    icon    : 'settings',
+                    function: () => {
+                        this.toggleSidebarOpen('themeOptionsPanel');
                     }
                 }
             ]
-        });
+        };
+
+        this._fuseNavigationService.addNavigationItem(customFunctionNavItem, 'end');
     }
 
-    ngOnDestroy()
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
     {
-        this.onConfigChanged.unsubscribe();
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+
+        // Remove the custom function menu
+        this._fuseNavigationService.removeNavigationItem('custom-function');
     }
 
-    onSettingsChange()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Reset the form values based on the
+     * selected layout style
+     *
+     * @param value
+     * @private
+     */
+    private _resetFormValues(value): void
     {
-        this.fuseConfig.setConfig(this.config);
+        switch ( value )
+        {
+            // Vertical Layout #1
+            case 'vertical-layout-1':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
+                        },
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'below-static'
+                        },
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'below-static'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
+                        }
+                    }
+                });
+
+                break;
+            }
+
+            // Vertical Layout #2
+            case 'vertical-layout-2':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            variant            : 'vertical-style-1'
+                        },
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'below'
+                        },
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'below'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
+                        }
+                    }
+                });
+
+                break;
+            }
+
+            // Vertical Layout #3
+            case 'vertical-layout-3':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'left',
+                            layout             : 'vertical-style-1'
+                        },
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'above-static'
+                        },
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'above-static'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
+                        }
+                    }
+                });
+
+                break;
+            }
+
+            // Horizontal Layout #1
+            case 'horizontal-layout-1':
+            {
+                this.form.patchValue({
+                    layout: {
+                        width    : 'fullwidth',
+                        navbar   : {
+                            primaryBackground  : 'fuse-navy-700',
+                            secondaryBackground: 'fuse-navy-900',
+                            folded             : false,
+                            hidden             : false,
+                            position           : 'top',
+                            variant            : 'vertical-style-1'
+                        },
+                        toolbar  : {
+                            background           : 'fuse-white-500',
+                            customBackgroundColor: false,
+                            hidden               : false,
+                            position             : 'above'
+                        },
+                        footer   : {
+                            background           : 'fuse-navy-900',
+                            customBackgroundColor: true,
+                            hidden               : false,
+                            position             : 'above-fixed'
+                        },
+                        sidepanel: {
+                            hidden  : false,
+                            position: 'right'
+                        }
+                    }
+                });
+
+                break;
+            }
+        }
     }
 
-    closeBar()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar open
+     *
+     * @param key
+     */
+    toggleSidebarOpen(key): void
     {
-        this.player =
-            this.animationBuilder
-                .build([
-                    style({transform: 'translate3d(0,0,0)'}),
-                    animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
-                ]).create(this.panel.nativeElement);
-
-        this.player.play();
-
-        this.player.onDone(() => {
-            this.barClosed = true;
-        });
-    }
-
-    openBar()
-    {
-        this.barClosed = false;
-
-        this.player =
-            this.animationBuilder
-                .build([
-                    style({transform: 'translate3d(100%,0,0)'}),
-                    animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
-                ]).create(this.panel.nativeElement);
-
-        this.player.play();
+        this._fuseSidebarService.getSidebar(key).toggleOpen();
     }
 }

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

@@ -1,10 +1,21 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
+import { FuseDirectivesModule } from '@fuse/directives/directives';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
+import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
+
 import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
 
 @NgModule({
@@ -14,10 +25,12 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
     imports     : [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
 
         FlexLayoutModule,
 
         MatButtonModule,
+        MatCheckboxModule,
         MatDividerModule,
         MatFormFieldModule,
         MatIconModule,
@@ -26,7 +39,9 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
         MatSelectModule,
         MatSlideToggleModule,
 
-        FuseMaterialColorPickerModule
+        FuseDirectivesModule,
+        FuseMaterialColorPickerModule,
+        FuseSidebarModule
     ],
     exports     : [
         FuseThemeOptionsComponent

src/@fuse/components/theme-options/theme-options.theme.scss

@@ -0,0 +1,27 @@
+@mixin fuse-theme-options-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    fuse-theme-options {
+
+        .theme-options-panel {
+
+            form {
+
+                .group {
+                    border: 1px solid map-get($foreground, divider);
+
+                    h2 {
+                        background: map-get($background, background);
+                        color: map-get($foreground, secondary-text);
+                    }
+
+                    h3 {
+                        color: map-get($foreground, secondary-text);
+                    }
+                }
+            }
+        }
+    }
+}

src/@fuse/components/widget/widget-toggle.directive.ts

@@ -5,7 +5,14 @@ import { Directive, ElementRef } from '@angular/core';
 })
 export class FuseWidgetToggleDirective
 {
-    constructor(public el: ElementRef)
+    /**
+     * Constructor
+     *
+     * @param {ElementRef} elementRef
+     */
+    constructor(
+        public elementRef: ElementRef
+    )
     {
     }
 }

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

@@ -20,11 +20,13 @@ fuse-widget {
         width: 100%;
         opacity: 1;
         z-index: 10;
-        border-radius: 2px;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(0deg);
         backface-visibility: hidden;
+        border: 1px solid;
     }
+
     > .fuse-widget-back {
         display: block;
         position: absolute;
@@ -36,9 +38,11 @@ fuse-widget {
         visibility: hidden;
         opacity: 0;
         z-index: 10;
+        border-radius: 8px;
         transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s, opacity 0s ease-in 0.2s;
         transform: rotateY(180deg);
         backface-visibility: hidden;
+        border: 1px solid;
 
         [fuseWidgetToggle] {
             position: absolute;

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

@@ -10,19 +10,38 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
 
 export class FuseWidgetComponent implements AfterContentInit
 {
-    @HostBinding('class.flipped') flipped = false;
-    @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
+    @HostBinding('class.flipped')
+    flipped = false;
 
-    constructor(private el: ElementRef, private renderer: Renderer2)
+    @ContentChildren(FuseWidgetToggleDirective, {descendants: true})
+    toggleButtons: QueryList<FuseWidgetToggleDirective>;
+
+    /**
+     * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {Renderer2} _renderer
+     */
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    )
     {
     }
 
-    ngAfterContentInit()
-    {
-        setTimeout(() => {
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * After content init
+     */
+    ngAfterContentInit(): void
+    {
+        // Listen for the flip button click
+        setTimeout(() => {
             this.toggleButtons.forEach(flipButton => {
-                this.renderer.listen(flipButton.el.nativeElement, 'click', (event) => {
+                this._renderer.listen(flipButton.elementRef.nativeElement, 'click', (event) => {
                     event.preventDefault();
                     event.stopPropagation();
                     this.toggle();
@@ -31,7 +50,14 @@ export class FuseWidgetComponent implements AfterContentInit
         });
     }
 
-    toggle()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle the flipped status
+     */
+    toggle(): void
     {
         this.flipped = !this.flipped;
     }

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

@@ -0,0 +1,14 @@
+@mixin fuse-widget-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    fuse-widget {
+
+        > .fuse-widget-front,
+        > .fuse-widget-back {
+            background: map-get($background, card);
+            border-color: map-get($foreground, divider);
+        }
+    }
+}

src/@fuse/directives/directives.ts

@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 
 import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive';
+import { FuseInnerScrollDirective } from '@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive';
 import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive';
 
 @NgModule({
     declarations: [
         FuseIfOnDomDirective,
+        FuseInnerScrollDirective,
         FuseMatSidenavHelperDirective,
         FuseMatSidenavTogglerDirective,
         FusePerfectScrollbarDirective
@@ -14,6 +16,7 @@ import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '@
     imports     : [],
     exports     : [
         FuseIfOnDomDirective,
+        FuseInnerScrollDirective,
         FuseMatSidenavHelperDirective,
         FuseMatSidenavTogglerDirective,
         FusePerfectScrollbarDirective

src/@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts

@@ -5,28 +5,44 @@ import { AfterContentChecked, Directive, ElementRef, TemplateRef, ViewContainerR
 })
 export class FuseIfOnDomDirective implements AfterContentChecked
 {
-    isCreated = false;
+    isCreated: boolean;
 
+    /**
+     * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {TemplateRef<any>} _templateRef
+     * @param {ViewContainerRef} _viewContainerRef
+     */
     constructor(
-        private templateRef: TemplateRef<any>,
-        private viewContainer: ViewContainerRef,
-        private element: ElementRef
+        private _elementRef: ElementRef,
+        private _templateRef: TemplateRef<any>,
+        private _viewContainerRef: ViewContainerRef
     )
     {
+        // Set the defaults
+        this.isCreated = false;
     }
 
-    ngAfterContentChecked()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * After content checked
+     */
+    ngAfterContentChecked(): void
     {
-        if ( document.body.contains(this.element.nativeElement) && !this.isCreated )
+        if ( document.body.contains(this._elementRef.nativeElement) && !this.isCreated )
         {
             setTimeout(() => {
-                this.viewContainer.createEmbeddedView(this.templateRef);
+                this._viewContainerRef.createEmbeddedView(this._templateRef);
             }, 300);
             this.isCreated = true;
         }
-        else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )
+        else if ( this.isCreated && !document.body.contains(this._elementRef.nativeElement) )
         {
-            this.viewContainer.clear();
+            this._viewContainerRef.clear();
             this.isCreated = false;
         }
     }

src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts

@@ -0,0 +1,115 @@
+import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+
+@Directive({
+    selector: '.inner-scroll'
+})
+export class FuseInnerScrollDirective implements OnInit, OnDestroy
+{
+    // Private
+    private _parent: any;
+    private _grandParent: any;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {FuseMatchMediaService} _fuseMediaMatchService
+     * @param {Renderer2} _renderer
+     */
+    constructor(
+        private _elementRef: ElementRef,
+        private _fuseMediaMatchService: FuseMatchMediaService,
+        private _renderer: Renderer2
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the parent
+        this._parent = this._renderer.parentNode(this._elementRef.nativeElement);
+
+        // Return, if there is no parent
+        if ( !this._parent )
+        {
+            return;
+        }
+
+        // Get the grand parent
+        this._grandParent = this._renderer.parentNode(this._parent);
+
+        // Register to the media query changes
+        this._fuseMediaMatchService.onMediaChange
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((alias) => {
+
+                if ( alias === 'xs' )
+                {
+                    this._removeClass();
+                }
+                else
+                {
+                    this._addClass();
+                }
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Return, if there is no parent
+        if ( !this._parent )
+        {
+            return;
+        }
+
+        // Remove the class
+        this._removeClass();
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Add the class name
+     *
+     * @private
+     */
+    private _addClass(): void
+    {
+        // Add the inner-scroll class
+        this._renderer.addClass(this._grandParent, 'inner-scroll');
+    }
+
+    /**
+     * Remove the class name
+     * @private
+     */
+    private _removeClass(): void
+    {
+
+        // Remove the inner-scroll class
+        this._renderer.removeClass(this._grandParent, 'inner-scroll');
+    }
+}

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

@@ -1,7 +1,8 @@
 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';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MediaObserver } from '@angular/flex-layout';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
@@ -11,56 +12,91 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f
 })
 export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 {
-    matchMediaSubscription: Subscription;
-    @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
-    @Input('fuseMatSidenavHelper') id: string;
-    @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
+    @HostBinding('class.mat-is-locked-open')
+    isLockedOpen: boolean;
 
+    @Input()
+    fuseMatSidenavHelper: string;
+
+    @Input()
+    matIsLockedOpen: string;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseMatchMediaService} _fuseMatchMediaService
+     * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
+     * @param {MatSidenav} _matSidenav
+     * @param {MediaObserver} _mediaObserver
+     */
     constructor(
-        private fuseMatSidenavService: FuseMatSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMediaService,
-        private observableMedia: ObservableMedia,
-        private matSidenav: MatSidenav
+        private _fuseMatchMediaService: FuseMatchMediaService,
+        private _fuseMatSidenavHelperService: FuseMatSidenavHelperService,
+        private _matSidenav: MatSidenav,
+        private _mediaObserver: MediaObserver
     )
     {
+        // Set the defaults
+        this.isLockedOpen = true;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
-    {
-        this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav);
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
 
-        if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Register the sidenav to the service
+        this._fuseMatSidenavHelperService.setSidenav(this.fuseMatSidenavHelper, this._matSidenav);
+
+        if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
         {
             this.isLockedOpen = true;
-            this.matSidenav.mode = 'side';
-            this.matSidenav.toggle(true);
+            this._matSidenav.mode = 'side';
+            this._matSidenav.toggle(true);
         }
         else
         {
             this.isLockedOpen = false;
-            this.matSidenav.mode = 'over';
-            this.matSidenav.toggle(false);
+            this._matSidenav.mode = 'over';
+            this._matSidenav.toggle(false);
         }
 
-        this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
-            if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
-            {
-                this.isLockedOpen = true;
-                this.matSidenav.mode = 'side';
-                this.matSidenav.toggle(true);
-            }
-            else
-            {
-                this.isLockedOpen = false;
-                this.matSidenav.mode = 'over';
-                this.matSidenav.toggle(false);
-            }
-        });
+        this._fuseMatchMediaService.onMediaChange
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                if ( this.matIsLockedOpen && this._mediaObserver.isActive(this.matIsLockedOpen) )
+                {
+                    this.isLockedOpen = true;
+                    this._matSidenav.mode = 'side';
+                    this._matSidenav.toggle(true);
+                }
+                else
+                {
+                    this.isLockedOpen = false;
+                    this._matSidenav.mode = 'over';
+                    this._matSidenav.toggle(false);
+                }
+            });
     }
 
-    ngOnDestroy()
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
     {
-        this.matchMediaSubscription.unsubscribe();
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
     }
 }
 
@@ -69,15 +105,29 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 })
 export class FuseMatSidenavTogglerDirective
 {
-    @Input('fuseMatSidenavToggler') id;
+    @Input()
+    fuseMatSidenavToggler: string;
 
-    constructor(private fuseMatSidenavService: FuseMatSidenavHelperService)
+    /**
+     * Constructor
+     *
+     * @param {FuseMatSidenavHelperService} _fuseMatSidenavHelperService
+     */
+    constructor(
+        private _fuseMatSidenavHelperService: FuseMatSidenavHelperService)
     {
     }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On click
+     */
     @HostListener('click')
-    onClick()
+    onClick(): void
     {
-        this.fuseMatSidenavService.getSidenav(this.id).toggle();
+        this._fuseMatSidenavHelperService.getSidenav(this.fuseMatSidenavToggler).toggle();
     }
 }

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

@@ -1,22 +1,43 @@
 import { Injectable } from '@angular/core';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseMatSidenavHelperService
 {
     sidenavInstances: MatSidenav[];
 
+    /**
+     * Constructor
+     */
     constructor()
     {
         this.sidenavInstances = [];
     }
 
-    setSidenav(id, instance)
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Set sidenav
+     *
+     * @param id
+     * @param instance
+     */
+    setSidenav(id, instance): void
     {
         this.sidenavInstances[id] = instance;
     }
 
-    getSidenav(id)
+    /**
+     * Get sidenav
+     *
+     * @param id
+     * @returns {any}
+     */
+    getSidenav(id): any
     {
         return this.sidenavInstances[id];
     }

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

@@ -1,9 +1,11 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { Subscription } from 'rxjs';
-
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import PerfectScrollbar from 'perfect-scrollbar';
-
+import * as _ from 'lodash';
+import { FusePerfectScrollbarGeometry, FusePerfectScrollbarPosition } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.interfaces';
 import { FuseConfigService } from '@fuse/services/config.service';
 
 @Directive({
@@ -11,62 +13,277 @@ import { FuseConfigService } from '@fuse/services/config.service';
 })
 export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
-    onConfigChanged: Subscription;
-    isDisableCustomScrollbars = false;
-    isMobile = false;
-    isInitialized = true;
-    ps: PerfectScrollbar;
+    isInitialized: boolean;
+    isMobile: boolean;
+    ps: PerfectScrollbar | any;
 
+    // Private
+    private _animation: number | null;
+    private _enabled: boolean | '';
+    private _debouncedUpdate: any;
+    private _options: any;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ElementRef} elementRef
+     * @param {FuseConfigService} _fuseConfigService
+     * @param {Platform} _platform
+     * @param {Router} _router
+     */
     constructor(
-        public element: ElementRef,
-        private fuseConfig: FuseConfigService,
-        private platform: Platform
+        public elementRef: ElementRef,
+        private _fuseConfigService: FuseConfigService,
+        private _platform: Platform,
+        private _router: Router
     )
     {
+        // Set the defaults
+        this.isInitialized = false;
+        this.isMobile = false;
+
+        // Set the private defaults
+        this._animation = null;
+        this._enabled = false;
+        this._debouncedUpdate = _.debounce(this.update, 150);
+        this._options = {
+            updateOnRouteChange: false
+        };
+        this._unsubscribeAll = new Subject();
     }
 
-    ngOnInit()
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Perfect Scrollbar options
+     *
+     * @param value
+     */
+    @Input()
+    set fusePerfectScrollbarOptions(value)
     {
-        this.onConfigChanged =
-            this.fuseConfig.onConfigChanged.subscribe(
-                (settings) => {
-                    this.isDisableCustomScrollbars = !settings.customScrollbars;
-                }
-            );
+        // Merge the options
+        this._options = _.merge({}, this._options, value);
 
-        if ( this.platform.ANDROID || this.platform.IOS )
-        {
-            this.isMobile = true;
-        }
-    }
+        // Destroy and re-init the PerfectScrollbar to update its options
+        setTimeout(() => {
+            this._destroy();
+        });
 
-    ngAfterViewInit()
-    {
-        if ( this.isMobile || this.isDisableCustomScrollbars )
-        {
-            this.isInitialized = false;
-            return;
-        }
-
-        // Initialize the perfect-scrollbar
-        this.ps = new PerfectScrollbar(this.element.nativeElement, {
-            wheelPropagation: true
+        setTimeout(() => {
+            this._init();
         });
     }
 
-    ngOnDestroy()
+    get fusePerfectScrollbarOptions(): any
+    {
+        // Return the options
+        return this._options;
+    }
+
+    /**
+     * Is enabled
+     *
+     * @param {boolean | ""} value
+     */
+    @Input('fusePerfectScrollbar')
+    set enabled(value: boolean | '')
+    {
+        // If nothing is provided with the directive (empty string),
+        // we will take that as a true
+        if ( value === '' )
+        {
+            value = true;
+        }
+
+        // Return, if both values are the same
+        if ( this.enabled === value )
+        {
+            return;
+        }
+
+        // Store the value
+        this._enabled = value;
+
+        // If enabled...
+        if ( this.enabled )
+        {
+            // Init the directive
+            this._init();
+        }
+        else
+        {
+            // Otherwise destroy it
+            this._destroy();
+        }
+    }
+
+    get enabled(): boolean | ''
+    {
+        // Return the enabled status
+        return this._enabled;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to window resize event
+        fromEvent(window, 'resize')
+            .pipe(
+                takeUntil(this._unsubscribeAll),
+                debounceTime(150)
+            )
+            .subscribe(() => {
+
+                // Update the PerfectScrollbar
+                this.update();
+            });
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Check if scrollbars enabled or not from the main config
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(
+                (settings) => {
+                    this.enabled = settings.customScrollbars;
+                }
+            );
+
+        // Scroll to the top on every route change
+        if ( this.fusePerfectScrollbarOptions.updateOnRouteChange )
+        {
+            this._router.events
+                .pipe(
+                    takeUntil(this._unsubscribeAll),
+                    filter(event => event instanceof NavigationEnd)
+                )
+                .subscribe(() => {
+                    setTimeout(() => {
+                        this.scrollToTop();
+                        this.update();
+                    }, 0);
+                });
+        }
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        this._destroy();
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    _init(): void
+    {
+        // Return, if already initialized
+        if ( this.isInitialized )
+        {
+            return;
+        }
+
+        // Check if is mobile
+        if ( this._platform.ANDROID || this._platform.IOS )
+        {
+            this.isMobile = true;
+        }
+
+        // Return if it's mobile
+        if ( this.isMobile )
+        {
+            // Return...
+            return;
+        }
+
+        // Set as initialized
+        this.isInitialized = true;
+
+        // Initialize the perfect-scrollbar
+        this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
+            ...this.fusePerfectScrollbarOptions
+        });
+
+        // Unbind 'keydown' events of PerfectScrollbar since it causes an extremely
+        // high CPU usage on Angular Material inputs.
+        // Loop through all the event elements of this PerfectScrollbar instance
+        this.ps.event.eventElements.forEach((eventElement) => {
+
+            // If we hit to the element with a 'keydown' event...
+            if ( typeof eventElement.handlers['keydown'] !== 'undefined' )
+            {
+                // Unbind it
+                eventElement.element.removeEventListener('keydown', eventElement.handlers['keydown'][0]);
+            }
+        });
+    }
+
+    /**
+     * Destroy
+     *
+     * @private
+     */
+    _destroy(): void
     {
         if ( !this.isInitialized || !this.ps )
         {
             return;
         }
 
-        this.onConfigChanged.unsubscribe();
-
         // Destroy the perfect-scrollbar
         this.ps.destroy();
+
+        // Clean up
+        this.ps = null;
+        this.isInitialized = false;
     }
 
+    /**
+     * Update scrollbars on window resize
+     *
+     * @private
+     */
+    @HostListener('window:resize')
+    _updateOnResize(): void
+    {
+        this._debouncedUpdate();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Document click
+     *
+     * @param {Event} event
+     */
     @HostListener('document:click', ['$event'])
     documentClick(event: Event): void
     {
@@ -82,7 +299,10 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.ps.update();
     }
 
-    update()
+    /**
+     * Update the scrollbar
+     */
+    update(): void
     {
         if ( !this.isInitialized )
         {
@@ -93,89 +313,232 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
         this.ps.update();
     }
 
-    destroy()
+    /**
+     * Destroy the scrollbar
+     */
+    destroy(): void
     {
         this.ngOnDestroy();
     }
 
-    scrollToX(x: number, speed?: number)
+    /**
+     * Returns the geometry of the scrollable element
+     *
+     * @param prefix
+     */
+    geometry(prefix: string = 'scroll'): FusePerfectScrollbarGeometry
+    {
+        return new FusePerfectScrollbarGeometry(
+            this.elementRef.nativeElement[prefix + 'Left'],
+            this.elementRef.nativeElement[prefix + 'Top'],
+            this.elementRef.nativeElement[prefix + 'Width'],
+            this.elementRef.nativeElement[prefix + 'Height']
+        );
+    }
+
+    /**
+     * Returns the position of the scrollable element
+     *
+     * @param absolute
+     */
+    position(absolute: boolean = false): FusePerfectScrollbarPosition
+    {
+        if ( !absolute && this.ps )
+        {
+            return new FusePerfectScrollbarPosition(
+                this.ps.reach.x || 0,
+                this.ps.reach.y || 0
+            );
+        }
+        else
+        {
+            return new FusePerfectScrollbarPosition(
+                this.elementRef.nativeElement.scrollLeft,
+                this.elementRef.nativeElement.scrollTop
+            );
+        }
+    }
+
+    /**
+     * Scroll to
+     *
+     * @param x
+     * @param y
+     * @param speed
+     */
+    scrollTo(x: number, y?: number, speed?: number): void
+    {
+        if ( y == null && speed == null )
+        {
+            this.animateScrolling('scrollTop', x, speed);
+        }
+        else
+        {
+            if ( x != null )
+            {
+                this.animateScrolling('scrollLeft', x, speed);
+            }
+
+            if ( y != null )
+            {
+                this.animateScrolling('scrollTop', y, speed);
+            }
+        }
+    }
+
+    /**
+     * Scroll to X
+     *
+     * @param {number} x
+     * @param {number} speed
+     */
+    scrollToX(x: number, speed?: number): void
     {
         this.animateScrolling('scrollLeft', x, speed);
     }
 
-    scrollToY(y: number, speed?: number)
+    /**
+     * Scroll to Y
+     *
+     * @param {number} y
+     * @param {number} speed
+     */
+    scrollToY(y: number, speed?: number): void
     {
         this.animateScrolling('scrollTop', y, speed);
     }
 
-    scrollToTop(offset?: number, speed?: number)
+    /**
+     * Scroll to top
+     *
+     * @param {number} offset
+     * @param {number} speed
+     */
+    scrollToTop(offset?: number, speed?: number): void
     {
         this.animateScrolling('scrollTop', (offset || 0), speed);
     }
 
-    scrollToLeft(offset?: number, speed?: number)
+    /**
+     * Scroll to left
+     *
+     * @param {number} offset
+     * @param {number} speed
+     */
+    scrollToLeft(offset?: number, speed?: number): void
     {
         this.animateScrolling('scrollLeft', (offset || 0), speed);
     }
 
-    scrollToRight(offset?: number, speed?: number)
+    /**
+     * Scroll to right
+     *
+     * @param {number} offset
+     * @param {number} speed
+     */
+    scrollToRight(offset?: number, speed?: number): void
     {
-        const width = this.element.nativeElement.scrollWidth;
-
-        this.animateScrolling('scrollLeft', width - (offset || 0), speed);
+        const left = this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.clientWidth;
+        this.animateScrolling('scrollLeft', left - (offset || 0), speed);
     }
 
-    scrollToBottom(offset?: number, speed?: number)
+    /**
+     * Scroll to bottom
+     *
+     * @param {number} offset
+     * @param {number} speed
+     */
+    scrollToBottom(offset?: number, speed?: number): void
     {
-        const height = this.element.nativeElement.scrollHeight;
-
-        this.animateScrolling('scrollTop', height - (offset || 0), speed);
+        const top = this.elementRef.nativeElement.scrollHeight - this.elementRef.nativeElement.clientHeight;
+        this.animateScrolling('scrollTop', top - (offset || 0), speed);
     }
 
-    animateScrolling(target: string, value: number, speed?: number)
+    /**
+     * Scroll to element
+     *
+     * @param qs
+     * @param offset
+     * @param speed
+     */
+    scrollToElement(qs: string, offset?: number, speed?: number): void
     {
-        if ( !speed )
+        const element = this.elementRef.nativeElement.querySelector(qs);
+
+        if ( !element )
         {
-            this.element.nativeElement[target] = value;
-
-            // PS has weird event sending order, this is a workaround for that
-            this.update();
-            this.update();
+            return;
         }
-        else if ( value !== this.element.nativeElement[target] )
+
+        const elementPos = element.getBoundingClientRect();
+        const scrollerPos = this.elementRef.nativeElement.getBoundingClientRect();
+
+        if ( this.elementRef.nativeElement.classList.contains('ps--active-x') )
+        {
+            const currentPos = this.elementRef.nativeElement['scrollLeft'];
+            const position = elementPos.left - scrollerPos.left + currentPos;
+
+            this.animateScrolling('scrollLeft', position + (offset || 0), speed);
+        }
+
+        if ( this.elementRef.nativeElement.classList.contains('ps--active-y') )
+        {
+            const currentPos = this.elementRef.nativeElement['scrollTop'];
+            const position = elementPos.top - scrollerPos.top + currentPos;
+
+            this.animateScrolling('scrollTop', position + (offset || 0), speed);
+        }
+    }
+
+    /**
+     * Animate scrolling
+     *
+     * @param target
+     * @param value
+     * @param speed
+     */
+    animateScrolling(target: string, value: number, speed?: number): void
+    {
+        if ( this._animation )
+        {
+            window.cancelAnimationFrame(this._animation);
+            this._animation = null;
+        }
+
+        if ( !speed || typeof window === 'undefined' )
+        {
+            this.elementRef.nativeElement[target] = value;
+        }
+        else if ( value !== this.elementRef.nativeElement[target] )
         {
             let newValue = 0;
             let scrollCount = 0;
 
             let oldTimestamp = performance.now();
-            let oldValue = this.element.nativeElement[target];
+            let oldValue = this.elementRef.nativeElement[target];
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp) => {
+            const step = (newTimestamp: number) => {
                 scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
-
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 
                 // Only continue animation if scroll position has not changed
-                if ( this.element.nativeElement[target] === oldValue )
+                if ( this.elementRef.nativeElement[target] === oldValue )
                 {
                     if ( scrollCount >= Math.PI )
                     {
-                        this.element.nativeElement[target] = value;
-
-                        // PS has weird event sending order, this is a workaround for that
-                        this.update();
-
-                        this.update();
+                        this.animateScrolling(target, value, 0);
                     }
                     else
                     {
-                        this.element.nativeElement[target] = oldValue = newValue;
+                        this.elementRef.nativeElement[target] = newValue;
 
+                        // On a zoomed out page the resulting offset may differ
+                        oldValue = this.elementRef.nativeElement[target];
                         oldTimestamp = newTimestamp;
 
-                        window.requestAnimationFrame(step);
+                        this._animation = window.requestAnimationFrame(step);
                     }
                 }
             };

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

@@ -0,0 +1,28 @@
+export class FusePerfectScrollbarGeometry
+{
+    public x: number;
+    public y: number;
+
+    public w: number;
+    public h: number;
+
+    constructor(x: number, y: number, w: number, h: number)
+    {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+    }
+}
+
+export class FusePerfectScrollbarPosition
+{
+    public x: number | 'start' | 'end';
+    public y: number | 'start' | 'end';
+
+    constructor(x: number | 'start' | 'end', y: number | 'start' | 'end')
+    {
+        this.x = x;
+        this.y = y;
+    }
+}