Merge branch 'master' into skeleton

+ Added translation example to the sample page

.editorconfig

@@ -1,6 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
 [*]
-charset=utf-8
-end_of_line=lf
-insert_final_newline=false
-indent_style=space
-indent_size=4
+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

README.md

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

angular.json

@@ -24,8 +24,7 @@
                         "tsConfig": "src/tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
-                            "src/assets",
-                            "src/app/main/angular-material-elements"
+                            "src/assets"
                         ],
                         "styles": [
                             "src/styles.scss"
@@ -49,18 +48,6 @@
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true
-                        },
-                        "ec": {
-                            "sourceMap": true,
-                            "extractCss": true
-                        },
-                        "hmr": {
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.hmr.ts"
-                                }
-                            ]
                         }
                     }
                 },
@@ -75,10 +62,12 @@
                         },
                         "hmr": {
                             "hmr": true,
-                            "browserTarget": "fuse:build:hmr"
-                        },
-                        "ec": {
-                            "browserTarget": "fuse:build:ec"
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
                         }
                     }
                 },
@@ -113,9 +102,7 @@
                             "src/tsconfig.spec.json"
                         ],
                         "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
+                            "**/node_modules/**"
                         ]
                     }
                 }
@@ -137,9 +124,7 @@
                     "options": {
                         "tsConfig": "e2e/tsconfig.e2e.json",
                         "exclude": [
-                            "**/node_modules/**",
-                            "**/src/app/fake-db/**/*",
-                            "**/src/assets/angular-material-examples/**/*"
+                            "**/node_modules/**"
                         ]
                     }
                 }

package.json

@@ -1,12 +1,12 @@
 {
   "name": "fuse",
-  "version": "6.2.1",
+  "version": "6.0.1",
   "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",
+    "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",
@@ -18,71 +18,71 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.0.7",
-    "@angular/cdk": "6.3.3",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/core": "6.0.7",
-    "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.7",
-    "@angular/http": "6.0.7",
-    "@angular/material": "6.3.3",
-    "@angular/material-moment-adapter": "6.3.3",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
-    "@ngrx/effects": "6.0.1",
-    "@ngrx/router-store": "6.0.1",
-    "@ngrx/store": "6.0.1",
-    "@ngrx/store-devtools": "6.0.1",
-    "@ngx-translate/core": "10.0.2",
-    "@swimlane/ngx-charts": "8.1.0",
-    "@swimlane/ngx-datatable": "13.0.1",
+    "@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.25.2",
+    "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.7",
-    "d3": "5.5.0",
+    "core-js": "2.5.6",
+    "d3": "5.2.0",
     "hammerjs": "2.0.8",
     "lodash": "4.17.10",
-    "moment": "2.22.2",
+    "moment": "2.22.1",
     "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.4.0",
+    "ngrx-store-freeze": "0.2.2",
+    "ngx-color-picker": "6.0.0",
     "ngx-cookie-service": "1.0.10",
-    "perfect-scrollbar": "1.4.0",
-    "prismjs": "1.15.0",
-    "rxjs": "6.2.1",
-    "rxjs-compat": "6.2.1",
+    "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.8",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/language-service": "6.0.7",
-    "@angular-devkit/build-angular": "0.6.8",
+    "@angular/cli": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "0.6.0",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.8",
+    "@types/jasmine": "2.8.7",
     "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.110",
+    "@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": "2.0.1",
+    "karma-coverage-istanbul-reporter": "1.4.2",
     "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.3.2",
+    "protractor": "5.3.1",
     "ts-node": "5.0.1",
     "tslint": "5.9.1",
     "typescript": "2.7.2",
-    "webpack-bundle-analyzer": "2.13.1"
+    "webpack-bundle-analyzer": "2.11.1"
   }
 }

src/@fuse/animations/index.ts

@@ -187,14 +187,10 @@ export const fuseAnimations = [
         transition('* => void', animate('300ms ease-in'))
     ]),
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Router animations
-    // -----------------------------------------------------------------------------------------------------
-    
     trigger('routerTransitionLeft', [
 
         transition('* => *', [
-            query('content > :enter, content > :leave', [
+            query('fuse-content > :enter, fuse-content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -203,7 +199,7 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('content > :enter', [
+            query('fuse-content > :enter', [
                 style({
                     transform: 'translateX(100%)',
                     opacity  : 0
@@ -211,7 +207,7 @@ export const fuseAnimations = [
             ], {optional: true}),
             sequence([
                 group([
-                    query('content > :leave', [
+                    query('fuse-content > :leave', [
                         style({
                             transform: 'translateX(0)',
                             opacity  : 1
@@ -222,7 +218,7 @@ export const fuseAnimations = [
                                 opacity  : 0
                             }))
                     ], {optional: true}),
-                    query('content > :enter', [
+                    query('fuse-content > :enter', [
                         style({transform: 'translateX(100%)'}),
                         animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
@@ -231,8 +227,8 @@ export const fuseAnimations = [
                             }))
                     ], {optional: true})
                 ]),
-                query('content > :leave', animateChild(), {optional: true}),
-                query('content > :enter', animateChild(), {optional: true})
+                query('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
     ]),
@@ -240,7 +236,7 @@ export const fuseAnimations = [
     trigger('routerTransitionRight', [
 
         transition('* => *', [
-            query('content > :enter, content > :leave', [
+            query('fuse-content > :enter, fuse-content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -249,7 +245,7 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('content > :enter', [
+            query('fuse-content > :enter', [
                 style({
                     transform: 'translateX(-100%)',
                     opacity  : 0
@@ -257,7 +253,7 @@ export const fuseAnimations = [
             ], {optional: true}),
             sequence([
                 group([
-                    query('content > :leave', [
+                    query('fuse-content > :leave', [
                         style({
                             transform: 'translateX(0)',
                             opacity  : 1
@@ -268,7 +264,7 @@ export const fuseAnimations = [
                                 opacity  : 0
                             }))
                     ], {optional: true}),
-                    query('content > :enter', [
+                    query('fuse-content > :enter', [
                         style({transform: 'translateX(-100%)'}),
                         animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
@@ -277,8 +273,8 @@ export const fuseAnimations = [
                             }))
                     ], {optional: true})
                 ]),
-                query('content > :leave', animateChild(), {optional: true}),
-                query('content > :enter', animateChild(), {optional: true})
+                query('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
     ]),
@@ -286,7 +282,7 @@ export const fuseAnimations = [
     trigger('routerTransitionUp', [
 
         transition('* => *', [
-            query('content > :enter, content > :leave', [
+            query('fuse-content > :enter, fuse-content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -295,14 +291,14 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('content > :enter', [
+            query('fuse-content > :enter', [
                 style({
                     transform: 'translateY(100%)',
                     opacity  : 0
                 })
             ], {optional: true}),
             group([
-                query('content > :leave', [
+                query('fuse-content > :leave', [
                     style({
                         transform: 'translateY(0)',
                         opacity  : 1
@@ -313,7 +309,7 @@ export const fuseAnimations = [
                             opacity  : 0
                         }))
                 ], {optional: true}),
-                query('content > :enter', [
+                query('fuse-content > :enter', [
                     style({transform: 'translateY(100%)'}),
                     animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                         style({
@@ -322,15 +318,15 @@ export const fuseAnimations = [
                         }))
                 ], {optional: true})
             ]),
-            query('content > :leave', animateChild(), {optional: true}),
-            query('content > :enter', animateChild(), {optional: true})
+            query('fuse-content > :leave', animateChild(), {optional: true}),
+            query('fuse-content > :enter', animateChild(), {optional: true})
         ])
     ]),
 
     trigger('routerTransitionDown', [
 
         transition('* => *', [
-            query('content > :enter, content > :leave', [
+            query('fuse-content > :enter, fuse-content > :leave', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -339,7 +335,7 @@ export const fuseAnimations = [
                     right   : 0
                 })
             ], {optional: true}),
-            query('content > :enter', [
+            query('fuse-content > :enter', [
                 style({
                     transform: 'translateY(-100%)',
                     opacity  : 0
@@ -347,7 +343,7 @@ export const fuseAnimations = [
             ], {optional: true}),
             sequence([
                 group([
-                    query('content > :leave', [
+                    query('fuse-content > :leave', [
                         style({
                             transform: 'translateY(0)',
                             opacity  : 1
@@ -358,7 +354,7 @@ export const fuseAnimations = [
                                 opacity  : 0
                             }))
                     ], {optional: true}),
-                    query('content > :enter', [
+                    query('fuse-content > :enter', [
                         style({transform: 'translateY(-100%)'}),
                         animate('600ms cubic-bezier(0.0, 0.0, 0.2, 1)',
                             style({
@@ -367,8 +363,8 @@ export const fuseAnimations = [
                             }))
                     ], {optional: true})
                 ]),
-                query('content > :leave', animateChild(), {optional: true}),
-                query('content > :enter', animateChild(), {optional: true})
+                query('fuse-content > :leave', animateChild(), {optional: true}),
+                query('fuse-content > :enter', animateChild(), {optional: true})
             ])
         ])
     ]),
@@ -377,7 +373,7 @@ export const fuseAnimations = [
 
         transition('* => *', group([
 
-            query('content > :enter, content > :leave ', [
+            query('fuse-content > :enter, fuse-content > :leave ', [
                 style({
                     position: 'absolute',
                     top     : 0,
@@ -387,12 +383,12 @@ export const fuseAnimations = [
                 })
             ], {optional: true}),
 
-            query('content > :enter', [
+            query('fuse-content > :enter', [
                 style({
                     opacity: 0
                 })
             ], {optional: true}),
-            query('content > :leave', [
+            query('fuse-content > :leave', [
                 style({
                     opacity: 1
                 }),
@@ -401,7 +397,7 @@ export const fuseAnimations = [
                         opacity: 0
                     }))
             ], {optional: true}),
-            query('content > :enter', [
+            query('fuse-content > :enter', [
                 style({
                     opacity: 0
                 }),
@@ -410,8 +406,8 @@ export const fuseAnimations = [
                         opacity: 1
                     }))
             ], {optional: true}),
-            query('content > :enter', animateChild(), {optional: true}),
-            query('content > :leave', animateChild(), {optional: true})
+            query('fuse-content > :enter', animateChild(), {optional: true}),
+            query('fuse-content > :leave', animateChild(), {optional: true})
         ]))
     ])
 ];

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

@@ -10,14 +10,7 @@ export class FuseConfirmDialogComponent
 {
     public confirmMessage: string;
 
-    /**
-     * Constructor
-     *
-     * @param {MatDialogRef<FuseConfirmDialogComponent>} dialogRef
-     */
-    constructor(
-        public dialogRef: MatDialogRef<FuseConfirmDialogComponent>
-    )
+    constructor(public dialogRef: MatDialogRef<FuseConfirmDialogComponent>)
     {
     }
 

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

@@ -1,6 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { interval, Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { Component, Input, OnInit } from '@angular/core';
+
+import { interval } from 'rxjs';
+import { map } from 'rxjs/operators';
+
 import * as moment from 'moment';
 
 @Component({
@@ -8,82 +10,46 @@ import * as moment from 'moment';
     templateUrl: './countdown.component.html',
     styleUrls  : ['./countdown.component.scss']
 })
-export class FuseCountdownComponent implements OnInit, OnDestroy
+export class FuseCountdownComponent implements OnInit
 {
-    // Event date
-    @Input('eventDate')
-    eventDate;
-
+    @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();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
+    ngOnInit()
     {
         const currDate = moment();
         const eventDate = moment(this.eventDate);
 
-        // Get the difference in between the current date and event date
         let diff = eventDate.diff(currDate, 'seconds');
 
-        // Create a subscribable interval
-        const countDown = interval(1000)
-            .pipe(
-                map(value => {
-                    return diff = diff - 1;
-                }),
-                map(value => {
-                    const timeLeft = moment.duration(value, 'seconds');
+        const countDown = interval(1000).pipe(
+            map(value => {
+                return diff = diff - 1;
+            }),
+            map(value => {
+                const timeLeft = moment.duration(value, 'seconds');
 
-                    return {
-                        days   : timeLeft.asDays().toFixed(0),
-                        hours  : timeLeft.hours(),
-                        minutes: timeLeft.minutes(),
-                        seconds: timeLeft.seconds()
-                    };
-                })
-            );
+                return {
+                    days   : timeLeft.asDays().toFixed(0),
+                    hours  : timeLeft.hours(),
+                    minutes: timeLeft.minutes(),
+                    seconds: timeLeft.seconds()
+                };
+            })
+        );
 
-        // 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();
+        countDown.subscribe(value => {
+            this.countdown = value;
+        });
     }
 }

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

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

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

@@ -1,16 +0,0 @@
-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.html

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

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

@@ -0,0 +1,13 @@
+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

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

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

@@ -3,5 +3,4 @@
     padding: 8px;
     background: #263238;
     cursor: text;
-    overflow: auto;
 }

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

@@ -1,55 +1,28 @@
-import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, ContentChild, ElementRef, Input, 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 '@fuse/components/highlight/prism-languages';
+import './prism-languages';
 
 @Component({
     selector : 'fuse-highlight',
-    template : '',
+    template : ' ',
     styleUrls: ['./highlight.component.scss']
 })
-export class FuseHighlightComponent implements OnInit, OnDestroy
+export class FuseHighlightComponent implements OnInit
 {
-    // Source
-    @ContentChild('source')
-    source: ElementRef;
+    @ContentChild('source') source: ElementRef;
+    @Input('lang') lang: string;
+    @Input('path') path: string;
 
-    // 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 _httpClient: HttpClient
+        private elementRef: ElementRef,
+        private http: HttpClient
     )
     {
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
+    ngOnInit()
     {
         // If there is no language defined, return...
         if ( !this.lang )
@@ -61,13 +34,11 @@ export class FuseHighlightComponent implements OnInit, OnDestroy
         if ( this.path )
         {
             // Get the source
-            this._httpClient.get(this.path, {responseType: 'text'})
-                .pipe(takeUntil(this._unsubscribeAll))
-                .subscribe((response) => {
+            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
 
-                    // Highlight it
-                    this.highlight(response);
-                });
+                // Highlight it
+                this.highlight(response);
+            });
         }
 
         // If the path is not defined and the source element exists...
@@ -78,26 +49,7 @@ export class FuseHighlightComponent implements OnInit, OnDestroy
         }
     }
 
-    /**
-     * 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
+    highlight(sourceCode)
     {
         // Split the source into lines
         const sourceLines = sourceCode.split('\n');
@@ -142,8 +94,9 @@ export class FuseHighlightComponent implements OnInit, OnDestroy
         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,5 +1,4 @@
 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/material-color-picker/material-color-picker.component.ts

@@ -13,78 +13,22 @@ import { MatColors } from '@fuse/mat-colors';
 export class FuseMaterialColorPickerComponent implements OnChanges
 {
     colors: any;
-    hues: string[];
     selectedColor: any;
-    view: string;
+    hues: string[];
+    view = 'palettes';
 
-    @Input()
-    selectedPalette: 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();
 
-    @Input()
-    selectedHue: string;
-
-    @Input()
-    selectedFg: string;
-
-    @Input()
-    value: any;
-
-    @Output()
-    onValueChange: EventEmitter<any>;
-
-    @Output()
-    selectedPaletteChange: EventEmitter<any>;
-
-    @Output()
-    selectedHueChange: EventEmitter<any>;
-
-    @Output()
-    selectedClassChange: EventEmitter<any>;
-
-    @Output()
-    selectedBgChange: EventEmitter<any>;
-
-    @Output()
-    selectedFgChange: EventEmitter<any>;
-
-    // Private
-    _selectedClass: string;
-    _selectedBg: string;
-
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-        // Set the defaults
-        this.colors = MatColors.all;
-        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
-        this.selectedFg = '';
-        this.selectedHue = '';
-        this.selectedPalette = '';
-        this.view = 'palettes';
-
-        this.onValueChange = new EventEmitter();
-        this.selectedPaletteChange = new EventEmitter();
-        this.selectedHueChange = new EventEmitter();
-        this.selectedClassChange = new EventEmitter();
-        this.selectedBgChange = new EventEmitter();
-        this.selectedFgChange = new EventEmitter();
-
-        // Set the private defaults
-        this._selectedClass = '';
-        this._selectedBg = '';
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Selected class
-     *
-     * @param value
-     */
+    _selectedClass = '';
     @Input()
     set selectedClass(value)
     {
@@ -110,11 +54,7 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         return this._selectedClass;
     }
 
-    /**
-     * Selected bg
-     *
-     * @param value
-     */
+    _selectedBg = '';
     @Input()
     set selectedBg(value)
     {
@@ -146,16 +86,13 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         return this._selectedBg;
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
+    constructor()
+    {
+        this.colors = MatColors.all;
+        this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
+    }
 
-    /**
-     * On changes
-     *
-     * @param changes
-     */
-    ngOnChanges(changes: any): void
+    ngOnChanges(changes: any)
     {
         if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
             changes.selectedClass && changes.selectedClass.currentValue === '' ||
@@ -169,38 +106,21 @@ export class FuseMaterialColorPickerComponent implements OnChanges
             this.updateSelectedColor();
         }
     }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Select palette
-     *
-     * @param palette
-     */
-    selectPalette(palette): void
+    
+    selectPalette(palette)
     {
         this.selectedPalette = palette;
         this.updateSelectedColor();
         this.view = 'hues';
     }
 
-    /**
-     * Select hue
-     *
-     * @param hue
-     */
-    selectHue(hue): void
+    selectHue(hue)
     {
         this.selectedHue = hue;
         this.updateSelectedColor();
     }
 
-    /**
-     * Remove color
-     */
-    removeColor(): void
+    removeColor()
     {
         this.selectedPalette = '';
         this.selectedHue = '';
@@ -208,10 +128,7 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         this.view = 'palettes';
     }
 
-    /**
-     * Update selected color
-     */
-    updateSelectedColor(): void
+    updateSelectedColor()
     {
         setTimeout(() => {
 
@@ -251,18 +168,12 @@ export class FuseMaterialColorPickerComponent implements OnChanges
         });
     }
 
-    /**
-     * Go back to palette selection
-     */
-    backToPaletteSelection(): void
+    backToPaletteSelection()
     {
         this.view = 'palettes';
     }
 
-    /**
-     * On menu open
-     */
-    onMenuOpen(): void
+    onMenuOpen()
     {
         if ( this.selectedPalette === '' )
         {

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

@@ -1,6 +1,7 @@
 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 { FusePipesModule } from '@fuse/pipes/pipes.module';

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

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

@@ -1,86 +0,0 @@
-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

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

@@ -1,23 +0,0 @@
-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

@@ -0,0 +1,52 @@
+<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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,30 @@
+<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

@@ -0,0 +1,12 @@
+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,4 +1,5 @@
-<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
+<div id="main-navigation" class="nav"
+     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
 
     <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
@@ -6,7 +7,7 @@
         <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapsable>
+            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
 
         </ng-container>
@@ -19,9 +20,8 @@
 
         <ng-container *ngFor="let item of navigation">
 
-            <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
-            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'"
-                                             [item]="item"></fuse-nav-horizontal-collapsable>
+            <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-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;
 
-    > .nav {
+    #main-navigation {
         margin: 0;
         padding: 0;
         width: 100%;

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

@@ -1,8 +1,4 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector     : 'fuse-navigation',
@@ -10,45 +6,13 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
     styleUrls    : ['./navigation.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent implements OnInit
+export class FuseNavigationComponent
 {
-    @Input()
-    layout = 'vertical';
+    @Input() layout = 'vertical';
+    @Input() navigation: any;
 
-    @Input()
-    navigation: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _fuseNavigationService: FuseNavigationService
-    )
+    constructor()
     {
-        // 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(() => {
-                this.navigation = this._fuseNavigationService.getCurrentNavigation();
-            });
     }
 }

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

@@ -6,11 +6,11 @@ import { MatIconModule, MatRippleModule } from '@angular/material';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FuseNavigationComponent } from './navigation.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';
+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';
 
 @NgModule({
     imports     : [
@@ -29,9 +29,9 @@ import { FuseNavHorizontalCollapsableComponent } from './horizontal/collapsable/
         FuseNavigationComponent,
         FuseNavVerticalGroupComponent,
         FuseNavVerticalItemComponent,
-        FuseNavVerticalCollapsableComponent,
+        FuseNavVerticalCollapseComponent,
         FuseNavHorizontalItemComponent,
-        FuseNavHorizontalCollapsableComponent
+        FuseNavHorizontalCollapseComponent
     ]
 })
 export class FuseNavigationModule

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

@@ -1,350 +1,48 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 
-import { FuseNavigationItem } from '@fuse/types';
-
-@Injectable({
-    providedIn: 'root'
-})
+@Injectable()
 export class FuseNavigationService
 {
-    onItemCollapsed: Subject<any>;
-    onItemCollapseToggled: Subject<any>;
+    flatNavigation: any[] = [];
 
-    // Private
-    private _onNavigationChanged: BehaviorSubject<any>;
-    private _onNavigationRegistered: BehaviorSubject<any>;
-    private _onNavigationUnregistered: BehaviorSubject<any>;
+    onItemCollapsed: Subject<any> = new Subject;
+    onItemCollapseToggled: Subject<any> = new Subject;
 
-    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);
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ 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();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ 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, flatNavigation: FuseNavigationItem[] = []): any
+    getFlatNavigation(navigation)
     {
-        for ( const item of navigation )
+        for ( const navItem of navigation )
         {
-            if ( item.type === 'item' )
+            if ( navItem.type === 'item' )
             {
-                flatNavigation.push(item);
+                this.flatNavigation.push({
+                    title: navItem.title,
+                    type : navItem.type,
+                    icon : navItem.icon || false,
+                    url  : navItem.url
+                });
 
                 continue;
             }
 
-            if ( item.type === 'collapsable' || item.type === 'group' )
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
             {
-                if ( item.children )
+                if ( navItem.children )
                 {
-                    this.getFlatNavigation(item.children, flatNavigation);
+                    this.getFlatNavigation(navItem.children);
                 }
             }
         }
 
-        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);
-
-            return;
-        }
-
-        // Add to the start of the navigation
-        if ( id === 'start' )
-        {
-            navigation.unshift(item);
-        }
-
-        // 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);
-        }
-    }
-
-    /**
-     * 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);
+        return this.flatNavigation;
     }
 }

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

@@ -1,65 +0,0 @@
-<ng-container *ngIf="!item.hidden">
-
-    <!-- normal collapse -->
-    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
-       (click)="toggleOpen($event)" matRipple>
-        <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', 'mat-accent-bg']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
-       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
-        <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'" matRipple>
-        <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()" matRipple>
-        <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', 'mat-accent-bg']"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
-        <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'" 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="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/group/group.component.ts

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

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

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

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

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

@@ -0,0 +1,45 @@
+<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.scss

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

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

@@ -1,79 +1,46 @@
-import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { 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';
+import { fuseAnimations } from '../../../../animations/index';
 
 @Component({
-    selector   : 'fuse-nav-vertical-collapsable',
-    templateUrl: './collapsable.component.html',
-    styleUrls  : ['./collapsable.component.scss'],
+    selector   : 'fuse-nav-vertical-collapse',
+    templateUrl: './nav-vertical-collapse.component.html',
+    styleUrls  : ['./nav-vertical-collapse.component.scss'],
     animations : fuseAnimations
 })
-export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
+export class FuseNavVerticalCollapseComponent implements OnInit
 {
-    @Input()
-    item: FuseNavigationItem;
+    @Input() item: any;
+    @HostBinding('class') classes = 'nav-collapse nav-item';
+    @HostBinding('class.open') public isOpen = false;
 
-    @HostBinding('class')
-    classes = 'nav-collapsable nav-item';
-
-    @HostBinding('class.open')
-    public isOpen = false;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {Router} _router
-     */
     constructor(
-        private _fuseNavigationService: FuseNavigationService,
-        private _router: Router
+        private navigationService: 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) )
+        // Listen for route changes
+        router.events.subscribe(
+            (event) => {
+                if ( event instanceof NavigationEnd )
                 {
-                    this.expand();
+                    // 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();
+                    }
                 }
-                else
-                {
-                    this.collapse();
-                }
-            });
+            }
+        );
 
         // Listen for collapsing of any navigation item
-        this._fuseNavigationService.onItemCollapsed
-            .pipe(takeUntil(this._unsubscribeAll))
+        this.navigationService.onItemCollapsed
             .subscribe(
                 (clickedItem) => {
                     if ( clickedItem && clickedItem.children )
@@ -87,7 +54,7 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
 
                         // Check if the url can be found in
                         // one of the children of this item
-                        if ( this.isUrlInChildren(this.item, this._router.url) )
+                        if ( this.isUrlInChildren(this.item, this.router.url) )
                         {
                             return;
                         }
@@ -100,10 +67,13 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
                     }
                 }
             );
+    }
 
+    ngOnInit()
+    {
         // Check if the url can be found in
         // one of the children of this item
-        if ( this.isUrlInChildren(this.item, this._router.url) )
+        if ( this.isUrlInChildren(this.item, this.router.url) )
         {
             this.expand();
         }
@@ -113,40 +83,26 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
     }
 
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
     /**
      * Toggle collapse
      *
      * @param ev
      */
-    toggleOpen(ev): void
+    toggleOpen(ev)
     {
         ev.preventDefault();
 
         this.isOpen = !this.isOpen;
 
         // Navigation collapse toggled...
-        this._fuseNavigationService.onItemCollapsed.next(this.item);
-        this._fuseNavigationService.onItemCollapseToggled.next();
+        this.navigationService.onItemCollapsed.next(this.item);
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
      * Expand the collapsable navigation
      */
-    expand(): void
+    expand()
     {
         if ( this.isOpen )
         {
@@ -154,13 +110,13 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = true;
-        this._fuseNavigationService.onItemCollapseToggled.next();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
      * Collapse the collapsable navigation
      */
-    collapse(): void
+    collapse()
     {
         if ( !this.isOpen )
         {
@@ -168,7 +124,7 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
         }
 
         this.isOpen = false;
-        this._fuseNavigationService.onItemCollapseToggled.next();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
@@ -177,9 +133,9 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
      *
      * @param parent
      * @param item
-     * @returns {boolean}
+     * @return {any}
      */
-    isChildrenOf(parent, item): boolean
+    isChildrenOf(parent, item)
     {
         if ( !parent.children )
         {
@@ -206,9 +162,9 @@ export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
      *
      * @param parent
      * @param url
-     * @returns {boolean}
+     * @returns {any}
      */
-    isUrlInChildren(parent, url): boolean
+    isUrlInChildren(parent, url)
     {
         if ( !parent.children )
         {

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

@@ -1,14 +1,13 @@
 <ng-container *ngIf="!item.hidden">
 
-    <div class="group-title" [ngClass]="item.classes">
+    <div class="group-title">
         <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-collapsable *ngIf="item.type=='collapsable'"
-                                           [item]="item"></fuse-nav-vertical-collapsable>
+            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
         </ng-container>
     </div>

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,16 @@
+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/search-bar/search-bar.component.html

@@ -1,11 +1,11 @@
 <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
 
-    <div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background">
+    <div class="fuse-search-bar-content" [ngClass]="toolbarColor">
 
         <label for="fuse-search-bar-input">
             <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
                     *ngIf="collapsed">
-                <mat-icon class="s-24 secondary-text">search</mat-icon>
+                <mat-icon class="s-24">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>
@@ -17,7 +17,7 @@
 
         <button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
                 aria-label="Collapse Search Bar">
-            <mat-icon class="s-24 secondary-text">close</mat-icon>
+            <mat-icon class="s-24">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('xs') {
+        @include media-breakpoint-down('sm') {
             height: 56px;
         }
 
@@ -28,7 +28,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint-down('sm') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }
@@ -39,7 +39,7 @@
                 height: 64px !important;
                 line-height: 64px !important;
 
-                @include media-breakpoint-down('xs') {
+                @include media-breakpoint-down('sm') {
                     height: 56px !important;
                     line-height: 56px !important;
                 }

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

@@ -1,6 +1,5 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
@@ -9,91 +8,42 @@ import { FuseConfigService } from '@fuse/services/config.service';
     templateUrl: './search-bar.component.html',
     styleUrls  : ['./search-bar.component.scss']
 })
-export class FuseSearchBarComponent implements OnInit, OnDestroy
+export class FuseSearchBarComponent
 {
     collapsed: boolean;
-    fuseConfig: any;
+    toolbarColor: string;
+    @Output() onInput: EventEmitter<any> = new EventEmitter();
+    onConfigChanged: Subscription;
 
-    @Output()
-    input: EventEmitter<any>;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param {FuseConfigService} _fuseConfigService
-     */
     constructor(
-        private _fuseConfigService: FuseConfigService
+        private fuseConfig: FuseConfigService
     )
     {
-        // Set the defaults
-        this.input = new EventEmitter();
         this.collapsed = true;
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
+                .subscribe(
+                    (newSettings) => {
+                        this.toolbarColor = newSettings.colorClasses.toolbar;
+                    }
+                );
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ 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
+    collapse()
     {
         this.collapsed = true;
     }
 
-    /**
-     * Expand
-     */
-    expand(): void
+    expand()
     {
         this.collapsed = false;
     }
 
-    /**
-     * Search
-     *
-     * @param event
-     */
-    search(event): void
+    search(event)
     {
-        this.input.emit(event.target.value);
+        const value = event.target.value;
+
+        this.onInput.emit(value);
     }
 
 }

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

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

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

@@ -1,11 +1,12 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { ObservableMedia } from '@angular/flex-layout';
+
+import { Subscription } from 'rxjs';
 import { CookieService } from 'ngx-cookie-service';
-import { 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',
@@ -14,67 +15,48 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
 })
 export class FuseShortcutsComponent implements OnInit, OnDestroy
 {
-    shortcutItems: any[];
+    shortcutItems: any[] = [];
     navigationItems: any[];
     filteredNavigationItems: any[];
-    searching: boolean;
-    mobileShortcutsPanelActive: boolean;
+    searching = false;
+    mobileShortcutsPanelActive = false;
+    toolbarColor: string;
+    matchMediaSubscription: Subscription;
+    onConfigChanged: Subscription;
 
-    @Input()
-    navigation: any;
+    @Input() navigation: any;
 
-    @ViewChild('searchInput')
-    searchInputField;
+    @ViewChild('searchInput') searchInputField;
+    @ViewChild('shortcuts') shortcutsEl: ElementRef;
 
-    @ViewChild('shortcuts')
-    shortcutsEl: ElementRef;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param {Renderer2} _renderer
-     * @param {CookieService} _cookieService
-     * @param {FuseMatchMediaService} _fuseMatchMediaService
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {ObservableMedia} _observableMedia
-     */
     constructor(
-        private _cookieService: CookieService,
-        private _fuseMatchMediaService: FuseMatchMediaService,
-        private _fuseNavigationService: FuseNavigationService,
-        private _observableMedia: ObservableMedia,
-        private _renderer: Renderer2
+        private renderer: Renderer2,
+        private observableMedia: ObservableMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
+        private fuseNavigationService: FuseNavigationService,
+        private fuseConfig: FuseConfigService,
+        private cookieService: CookieService
     )
     {
-        // Set the defaults
-        this.shortcutItems = [];
-        this.searching = false;
-        this.mobileShortcutsPanelActive = false;
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
+                .subscribe(
+                    (newSettings) => {
+                        this.toolbarColor = newSettings.colorClasses.toolbar;
+                    }
+                );
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
+    ngOnInit()
     {
         // 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');
+        const cookieExists = this.cookieService.check('FUSE2.shortcuts');
 
         if ( cookieExists )
         {
-            this.shortcutItems = JSON.parse(this._cookieService.get('FUSE2.shortcuts'));
+            this.shortcutItems = JSON.parse(this.cookieService.get('FUSE2.shortcuts'));
         }
         else
         {
@@ -82,61 +64,46 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             this.shortcutItems = [
                 {
                     'title': 'Calendar',
-                    'type' : 'item',
+                    'type' : 'nav-item',
                     'icon' : 'today',
                     'url'  : '/apps/calendar'
                 },
                 {
                     'title': 'Mail',
-                    'type' : 'item',
+                    'type' : 'nav-item',
                     'icon' : 'email',
                     'url'  : '/apps/mail'
                 },
                 {
                     'title': 'Contacts',
-                    'type' : 'item',
+                    'type' : 'nav-item',
                     'icon' : 'account_box',
                     'url'  : '/apps/contacts'
                 },
                 {
                     'title': 'To-Do',
-                    'type' : 'item',
+                    'type' : 'nav-item',
                     'icon' : 'check_box',
                     'url'  : '/apps/todo'
                 }
             ];
         }
 
-        this._fuseMatchMediaService.onMediaChange
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                if ( this._observableMedia.isActive('gt-sm') )
+        this.matchMediaSubscription =
+            this.fuseMatchMedia.onMediaChange.subscribe(() => {
+                if ( this.observableMedia.isActive('gt-sm') )
                 {
                     this.hideMobileShortcutsPanel();
                 }
             });
     }
 
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
+    ngOnDestroy()
     {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
+        this.matchMediaSubscription.unsubscribe();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Search
-     *
-     * @param event
-     */
-    search(event): void
+    search(event)
     {
         const value = event.target.value.toLowerCase();
 
@@ -155,13 +122,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         });
     }
 
-    /**
-     * Toggle shortcut
-     *
-     * @param event
-     * @param itemToToggle
-     */
-    toggleShortcut(event, itemToToggle): void
+    toggleShortcut(event, itemToToggle)
     {
         event.stopPropagation();
 
@@ -172,7 +133,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;
             }
@@ -181,47 +142,32 @@ 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));
     }
 
-    /**
-     * Is in shortcuts?
-     *
-     * @param navigationItem
-     * @returns {any}
-     */
-    isInShortcuts(navigationItem): any
+    isInShortcuts(navigationItem)
     {
         return this.shortcutItems.find(item => {
             return item.url === navigationItem.url;
         });
     }
 
-    /**
-     * On menu open
-     */
-    onMenuOpen(): void
+    onMenuOpen()
     {
         setTimeout(() => {
             this.searchInputField.nativeElement.focus();
         });
     }
 
-    /**
-     * Show mobile shortcuts
-     */
-    showMobileShortcutsPanel(): void
+    showMobileShortcutsPanel()
     {
         this.mobileShortcutsPanelActive = true;
-        this._renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
+        this.renderer.addClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
     }
 
-    /**
-     * Hide mobile shortcuts
-     */
-    hideMobileShortcutsPanel(): void
+    hideMobileShortcutsPanel()
     {
         this.mobileShortcutsPanelActive = false;
-        this._renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
+        this.renderer.removeClass(this.shortcutsEl.nativeElement, 'show-mobile-panel');
     }
 }

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

@@ -1,5 +1,3 @@
-@import "src/@fuse/scss/fuse";
-
 fuse-sidebar {
     display: flex;
     flex-direction: column;
@@ -13,21 +11,17 @@ fuse-sidebar {
     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);
-    background: white;
 
-    @include media-breakpoint-down('xs') {
-        min-width: 0 !important;
-        max-width: 80vw !important;
-        width: 80vw !important;
-    }
-
-    &.left-positioned {
+    &.left-aligned {
         left: 0;
         transform: translateX(-100%);
     }
 
-    &.right-positioned {
+    &.right-aligned {
         right: 0;
         transform: translateX(100%);
     }
@@ -45,12 +39,12 @@ fuse-sidebar {
         position: absolute !important;
         top: 0;
         bottom: 0;
-    }
 
-    &.animations-enabled {
-        transition-property: transform, width, min-width, max-width;
-        transition-duration: 150ms;
-        transition-timing-function: ease-in-out;
+        &:not(.unfolded) {
+            width: 64px;
+            min-width: 64px;
+            max-width: 64px;
+        }
     }
 }
 
@@ -60,11 +54,7 @@ fuse-sidebar {
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 999;
+    z-index: 3;
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
-
-    &.fuse-sidebar-overlay-invisible {
-        background-color: transparent;
-    }
 }

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

@@ -1,8 +1,7 @@
-import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@@ -20,13 +19,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @Input()
     name: string;
 
-    // Key
+    // Align
     @Input()
-    key: string;
-
-    // Position
-    @Input()
-    position: 'left' | 'right';
+    align: 'left' | 'right';
 
     // Open
     @HostBinding('class.open')
@@ -40,118 +35,37 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostBinding('class.locked-open')
     isLockedOpen: boolean;
 
-    // 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 {ObservableMedia} _observableMedia
-     * @param {Renderer2} _renderer
-     */
-    constructor(
-        private _animationBuilder: AnimationBuilder,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _elementRef: ElementRef,
-        private _fuseConfigService: FuseConfigService,
-        private _fuseMatchMediaService: FuseMatchMediaService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _observableMedia: ObservableMedia,
-        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
-     */
+    // Folded
+    @HostBinding('class.folded')
     @Input()
     set folded(value: boolean)
     {
-        // Set the folded
-        this._folded = value;
-
-        // Return if the sidebar is closed
+        // Only work if the sidebar is not closed
         if ( !this.opened )
         {
             return;
         }
 
-        // Programmatically add/remove padding to the element
-        // that comes after or before based on the position
+        // Set the folded
+        this._folded = value;
+
+        // Programmatically add/remove margin to the element
+        // that comes after or before based on the alignment
         let sibling,
             styleRule;
 
-        const styleValue = this.foldedWidth + 'px';
+        const styleValue = '64px';
 
         // Get the sibling and set the style rule
-        if ( this.position === 'left' )
+        if ( this.align === 'left' )
         {
-            sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'padding-left';
+            sibling = this.elementRef.nativeElement.nextElementSibling;
+            styleRule = 'marginLeft';
         }
         else
         {
-            sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'padding-right';
+            sibling = this.elementRef.nativeElement.previousElementSibling;
+            styleRule = 'marginRight';
         }
 
         // If there is no sibling, return...
@@ -163,36 +77,15 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // If folded...
         if ( value )
         {
-            // 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, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
-            this._renderer.addClass(this._elementRef.nativeElement, 'folded');
+            // Set the style
+            this.renderer.setStyle(sibling, styleRule, styleValue);
         }
         // If unfolded...
         else
         {
-            // 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');
+            // Remove the style
+            this.renderer.removeStyle(sibling, styleRule);
         }
-
-        // Emit the 'foldedChanged' event
-        this.foldedChanged.emit(this.folded);
     }
 
     get folded(): boolean
@@ -200,36 +93,57 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         return this._folded;
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
+    // 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';
+    }
 
     /**
      * On init
      */
     ngOnInit(): void
     {
-        // Subscribe to config changes
-        this._fuseConfigService.config
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((config) => {
-                this._fuseConfig = config;
-            });
-
         // Register the sidebar
-        this._fuseSidebarService.register(this.name, this);
+        this.fuseSidebarService.register(this.name, this);
 
-        // Setup visibility
-        this._setupVisibility();
-
-        // Setup position
-        this._setupPosition();
+        // Setup alignment
+        this._setupAlignment();
 
         // Setup lockedOpen
         this._setupLockedOpen();
-
-        // Setup folded
-        this._setupFolded();
     }
 
     /**
@@ -244,47 +158,28 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         }
 
         // Unregister the sidebar
-        this._fuseSidebarService.unregister(this.name);
+        this.fuseSidebarService.unregister(this.name);
 
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Setup the visibility of the sidebar
-     *
-     * @private
-     */
-    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');
+        // Unsubscribe from the media watcher subscription
+        this._onMediaChangeSubscription.unsubscribe();
     }
 
     /**
-     * Setup the sidebar position
+     * Set the sidebar alignment
      *
      * @private
      */
-    private _setupPosition(): void
+    private _setupAlignment(): void
     {
         // Add the correct class name to the sidebar
-        // element depending on the position attribute
-        if ( this.position === 'right' )
+        // element depending on the align attribute
+        if ( this.align === 'right' )
         {
-            this._renderer.addClass(this._elementRef.nativeElement, 'right-positioned');
+            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
         }
         else
         {
-            this._renderer.addClass(this._elementRef.nativeElement, 'left-positioned');
+            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
         }
     }
 
@@ -298,26 +193,19 @@ 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;
 
-        // Set the wasFolded
-        this._wasFolded = this.folded;
-
-        // Show the sidebar
-        this._showSidebar();
-
         // Act on every media change
-        this._fuseMatchMediaService.onMediaChange
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
+        this._onMediaChangeSubscription =
+
+            this.fuseMatchMediaService.onMediaChange.subscribe(() => {
 
                 // Get the active status
-                const isActive = this._observableMedia.isActive(this.lockedOpen);
+                const isActive = this.observableMedia.isActive(this.lockedOpen);
 
                 // If the both status are the same, don't act
                 if ( this._wasActive === isActive )
@@ -331,30 +219,18 @@ 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;
 
-                    // Emit the 'openedChanged' event
-                    this.openedChanged.emit(this.opened);
-
-                    // If the sidebar was folded, forcefully fold it again
-                    if ( this._wasFolded )
+                    // Read the folded setting from the config
+                    // and fold the sidebar if it's true
+                    if ( this.fuseConfigService.config.layout.navigationFolded )
                     {
-                        // Enable the animations
-                        this._enableAnimations();
-
-                        // Fold
-                        this.folded = true;
-
-                        // Mark for check
-                        this._changeDetectorRef.markForCheck();
+                        this.fold();
                     }
 
                     // Hide the backdrop if any exists
-                    this._hideBackdrop();
+                    this.hideBackdrop();
                 }
                 // De-Activate the lockedOpen
                 else
@@ -367,12 +243,6 @@ 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
@@ -380,209 +250,6 @@ 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, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
-        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
      */
@@ -593,23 +260,11 @@ 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();
     }
 
     /**
@@ -622,23 +277,11 @@ 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();
     }
 
     /**
@@ -662,13 +305,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseenter')
     onMouseEnter(): void
     {
-        // Only work if the auto trigger is enabled
-        if ( !this.foldedAutoTriggerOnHover )
+        // Only work if the sidebar is folded
+        if ( !this.folded )
         {
             return;
         }
 
-        this.unfoldTemporarily();
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
     }
 
     /**
@@ -677,13 +321,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseleave')
     onMouseLeave(): void
     {
-        // Only work if the auto trigger is enabled
-        if ( !this.foldedAutoTriggerOnHover )
+        // Only work if the sidebar is folded
+        if ( !this.folded )
         {
             return;
         }
 
-        this.foldTemporarily();
+        // Fold the sidebar back
+        this.unfolded = false;
     }
 
     /**
@@ -697,14 +342,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Enable the animations
-        this._enableAnimations();
-
         // Fold
         this.folded = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -718,14 +357,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Enable the animations
-        this._enableAnimations();
-
         // Unfold
         this.folded = false;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -744,56 +377,66 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     }
 
     /**
-     * Fold the temporarily unfolded sidebar back
+     * Show the backdrop
      */
-    foldTemporarily(): void
+    showBackdrop(): void
     {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
-        {
-            return;
-        }
+        // Create the backdrop element
+        this._backdrop = this.renderer.createElement('div');
 
-        // Enable the animations
-        this._enableAnimations();
+        // Add a class to the backdrop element
+        this._backdrop.classList.add('fuse-sidebar-overlay');
 
-        // Fold the sidebar back
-        this.unfolded = false;
+        // Append the backdrop to the parent of the sidebar
+        this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop);
 
-        // Set the folded width
-        const styleValue = this.foldedWidth + 'px';
+        // Create the enter animation and attach it to the player
+        this._player =
+            this.animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 1}))
+                ]).create(this._backdrop);
 
-        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);
+        // Play the animation
+        this._player.play();
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+        // Add an event listener to the overlay
+        this._backdrop.addEventListener('click', () => {
+                this.close();
+            }
+        );
     }
 
     /**
-     * Unfold the sidebar temporarily
+     * Hide the backdrop
      */
-    unfoldTemporarily(): void
+    hideBackdrop(): void
     {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        if ( !this._backdrop )
         {
             return;
         }
 
-        // Enable the animations
-        this._enableAnimations();
+        // Create the leave animation and attach it to the player
+        this._player =
+            this.animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 0}))
+                ]).create(this._backdrop);
 
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
+        // Play the animation
+        this._player.play();
 
-        // 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');
+        // Once the animation is done...
+        this._player.onDone(() => {
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+            // If the backdrop still exists...
+            if ( this._backdrop )
+            {
+                // Remove the backdrop
+                this._backdrop.parentNode.removeChild(this._backdrop);
+                this._backdrop = null;
+            }
+        });
     }
 }

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

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

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

@@ -1,427 +1,105 @@
-<div class="theme-options-panel" fusePerfectScrollbar>
+<button #openButton mat-icon-button class="open-button mat-primary-bg mat-elevation-z2" (click)="openBar()">
+    <mat-icon>settings</mat-icon>
+</button>
 
-    <div class="header">
+<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
 
-        <span class="title">Theme Options</span>
+<div #panel class="theme-options-panel mat-white-bg mat-elevation-z8">
 
-        <button mat-icon-button class="close-button" (click)="toggleSidebarOpen('themeOptionsPanel')">
-            <mat-icon>close</mat-icon>
-        </button>
+    <button mat-icon-button class="close-button" (click)="closeBar()">
+        <mat-icon>close</mat-icon>
+    </button>
 
+    <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
+
+        <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>
+
+        <h3>Navigation Fold (for vertical navigation):</h3>
+        <mat-slide-toggle [(ngModel)]="config.layout.navigationFolded"
+                          (change)="onSettingsChange()">
+            Folded
+        </mat-slide-toggle>
+
+        <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>
+
+        <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>
+
+        </div>
+
+        <mat-divider></mat-divider>
+
+        <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>
 
-    <form [formGroup]="form">
-
-        <!-- LAYOUT STYLES -->
-        <div class="group" formGroupName="layout">
-
-            <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-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
-
-                    </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-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
-
-                    </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-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
-
-                    </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-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
-                        </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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.toolbar.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>
-
-                        <h3 class="mt-24 mb-8">Color:</h3>
-                        <fuse-material-color-picker class="mb-16"
-                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
-                        </fuse-material-color-picker>
-
-                    </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

@@ -10,69 +10,106 @@
 }
 
 :host {
-    display: flex;
-    overflow: hidden;
+    position: fixed;
+    display: block;
+    right: 0;
+    top: 160px;
+    z-index: 998;
+
+    &.bar-closed .theme-options-panel {
+        display: none;
+    }
 
     .theme-options-panel {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 auto;
-        padding: 40px 24px 24px 24px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 360px;
+        transform: translate3d(100%, 0, 0);
+        z-index: 999;
+        max-height: calc(100vh - 200px);
+        padding: 24px;
         overflow: auto;
 
-        .header {
-            display: flex;
-            flex: 0 1 auto;
-            margin-bottom: 32px;
-            align-items: center;
-            justify-content: space-between;
-
-            .title {
-                font-size: 20px;
-                font-weight: 500;
-                padding-left: 4px;
-            }
+        @include media-breakpoint-down('xs') {
+            top: -120px;
+            max-height: calc(100vh - 100px);
+            width: 90vw;
         }
 
-        form {
-            display: flex;
-            flex: 1 1 auto;
-            flex-direction: column;
+        .close-button {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+        }
 
-            .group {
-                display: flex;
-                flex: 1 0 auto;
-                flex-direction: column;
-                position: relative;
-                border: 1px solid rgba(0, 0, 0, 0.12);
-                border-radius: 2px;
-                padding: 28px 16px 8px 16px;
-                margin: 16px 0;
+        h3 {
+            font-size: 14px;
+            font-weight: 500;
+            color: rgba(0, 0, 0, 0.54);
+        }
 
-                h2 {
-                    position: absolute;
-                    top: -11px;
-                    left: 8px;
-                    margin: 0;
-                    padding: 0 8px;
-                    font-size: 16px;
-                    font-weight: 500;
-                    background: white;
-                    color: rgba(0, 0, 0, 0.54);
-                }
+        .mat-divider {
+            display: block !important;
+            width: 100%;
+            margin: 24px 0 16px 0;
+        }
 
-                h3 {
-                    font-size: 14px;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 0.54);
-                    margin: 24px 0 16px 0;
-                    padding: 0;
-
-                    &:first-of-type {
-                        margin-top: 0;
-                    }
-                }
-            }
+        .colors {
+            display: block !important;
+            width: 100%;
         }
     }
+
+    .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,12 +1,10 @@
-import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+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 { 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',
@@ -16,114 +14,50 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
-    fuseConfig: any;
-    form: FormGroup;
+    @Input() navigation;
+    @ViewChild('openButton') openButton;
+    @ViewChild('panel') panel;
+    @ViewChild('overlay') overlay: ElementRef;
 
-    @HostBinding('class.bar-closed')
-    barClosed: boolean;
+    public player: AnimationPlayer;
+    config: any;
 
-    // Private
-    private _unsubscribeAll: Subject<any>;
+    onConfigChanged: Subscription;
+
+    @HostBinding('class.bar-closed') barClosed: boolean;
 
-    /**
-     * Constructor
-     *
-     * @param {FormBuilder} _formBuilder
-     * @param {FuseConfigService} _fuseConfigService
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Renderer2} _renderer
-     */
     constructor(
-        private _formBuilder: FormBuilder,
-        private _fuseConfigService: FuseConfigService,
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _renderer: Renderer2
+        private animationBuilder: AnimationBuilder,
+        private fuseConfig: FuseConfigService,
+        private navigationService: FuseNavigationService,
+        private renderer: Renderer2
     )
     {
-        // Set the defaults
         this.barClosed = true;
 
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged
+                .subscribe(
+                    (newConfig) => {
+                        this.config = newConfig;
+                    }
+                );
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
+    ngOnInit()
     {
-        // Build the config form
-        // noinspection TypeScriptValidateTypes
-        this.form = this._formBuilder.group({
-            layout          : this._formBuilder.group({
-                style  : new FormControl(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
-                    background: new FormControl(),
-                    folded    : new FormControl(),
-                    hidden    : new FormControl(),
-                    position  : new FormControl(),
-                    variant   : new FormControl()
-                }),
-                toolbar: this._formBuilder.group({
-                    background: new FormControl(),
-                    hidden    : new FormControl(),
-                    position  : new FormControl()
-                }),
-                footer : this._formBuilder.group({
-                    background: new FormControl(),
-                    hidden    : new FormControl(),
-                    position  : new FormControl()
-                })
-            }),
-            customScrollbars: new FormControl()
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
         });
 
-        // Subscribe to the config changes
-        this._fuseConfigService.config
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((config) => {
+        // Get the nav model and add customize nav item
+        // that opens the bar programmatically
+        const nav: any = this.navigation;
 
-                // 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 = {
+        nav.push({
             'id'      : 'custom-function',
             'title'   : 'Custom Function',
             'type'    : 'group',
-            'icon'    : 'settings',
             'children': [
                 {
                     'id'      : 'customize',
@@ -131,173 +65,50 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     'type'    : 'item',
                     'icon'    : 'settings',
                     'function': () => {
-                        this.toggleSidebarOpen('themeOptionsPanel');
+                        this.openBar();
                     }
                 }
             ]
-        };
-
-        this._fuseNavigationService.addNavigationItem(customFunctionNavItem, 'end');
+        });
     }
 
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
+    ngOnDestroy()
     {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-
-        // Remove the custom function menu
-        this._fuseNavigationService.removeNavigationItem('custom-function');
+        this.onConfigChanged.unsubscribe();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Reset the form values based on the
-     * selected layout style
-     *
-     * @param value
-     * @private
-     */
-    private _resetFormValues(value): void
+    onSettingsChange()
     {
-        switch ( value )
-        {
-            // Vertical Layout #1
-            case 'vertical-layout-1':
-            {
-                this.form.patchValue({
-                    layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'left',
-                            variant   : 'vertical-style-1'
-                        },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'below-static'
-                        },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'below-static'
-                        }
-                    }
-                });
-
-                break;
-            }
-
-            // Vertical Layout #2
-            case 'vertical-layout-2':
-            {
-                this.form.patchValue({
-                    layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'left',
-                            variant   : 'vertical-style-1'
-                        },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'below'
-                        },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'below'
-                        }
-                    }
-                });
-
-                break;
-            }
-
-            // Vertical Layout #3
-            case 'vertical-layout-3':
-            {
-                this.form.patchValue({
-                    layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'left',
-                            layout    : 'vertical-style-1'
-                        },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'above-static'
-                        },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'above-static'
-                        }
-                    }
-                });
-
-                break;
-            }
-
-            // Horizontal Layout #1
-            case 'horizontal-layout-1':
-            {
-                this.form.patchValue({
-                    layout: {
-                        width  : 'fullwidth',
-                        navbar : {
-                            background: 'mat-fuse-dark-700-bg',
-                            folded    : false,
-                            hidden    : false,
-                            position  : 'top',
-                            variant   : 'vertical-style-1'
-                        },
-                        toolbar: {
-                            background: 'mat-white-500-bg',
-                            hidden    : false,
-                            position  : 'above'
-                        },
-                        footer : {
-                            background: 'mat-fuse-dark-900-bg',
-                            hidden    : false,
-                            position  : 'above-fixed'
-                        }
-                    }
-                });
-
-                break;
-            }
-        }
+        this.fuseConfig.setConfig(this.config);
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle sidebar open
-     *
-     * @param key
-     */
-    toggleSidebarOpen(key): void
+    closeBar()
     {
-        this._fuseSidebarService.getSidebar(key).toggleOpen();
+        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();
+    }
 }

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

@@ -1,13 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
 
-import { FuseDirectivesModule } from '@fuse/directives/directives';
-import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
-
 import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
 
 @NgModule({
@@ -17,7 +14,6 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
     imports     : [
         CommonModule,
         FormsModule,
-        ReactiveFormsModule,
 
         FlexLayoutModule,
 
@@ -30,9 +26,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
         MatSelectModule,
         MatSlideToggleModule,
 
-        FuseDirectivesModule,
-        FuseMaterialColorPickerModule,
-        FuseSidebarModule
+        FuseMaterialColorPickerModule
     ],
     exports     : [
         FuseThemeOptionsComponent

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

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

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

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

src/@fuse/directives/directives.ts

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

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

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

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

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

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

@@ -1,247 +1,72 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+
 import PerfectScrollbar from 'perfect-scrollbar';
-import * as _ from 'lodash';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
-    isInitialized: boolean;
-    isMobile: boolean;
+    onConfigChanged: Subscription;
+    isDisableCustomScrollbars = false;
+    isMobile = false;
+    isInitialized = true;
     ps: PerfectScrollbar;
 
-    // Private
-    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 elementRef: ElementRef,
-        private _fuseConfigService: FuseConfigService,
-        private _platform: Platform,
-        private _router: Router
+        public element: ElementRef,
+        private fuseConfig: FuseConfigService,
+        private platform: Platform
     )
     {
-        // Set the defaults
-        this.isInitialized = false;
-        this.isMobile = false;
-
-        // Set the private defaults
-        this._enabled = false;
-        this._debouncedUpdate = _.debounce(this.update, 150);
-        this._options = {
-            updateOnRouteChange: false
-        };
-        this._unsubscribeAll = new Subject();
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Perfect Scrollbar options
-     *
-     * @param value
-     */
-    @Input()
-    set fusePerfectScrollbarOptions(value)
+    ngOnInit()
     {
-        // Merge the options
-        this._options = _.merge({}, this._options, value);
-    }
-
-    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
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * After view init
-     */
-    ngAfterViewInit(): void
-    {
-        // Check if scrollbars enabled or not from the main config
-        this._fuseConfigService.config
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged.subscribe(
                 (settings) => {
-                    this.enabled = settings.customScrollbars;
+                    this.isDisableCustomScrollbars = !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 )
+        if ( this.platform.ANDROID || this.platform.IOS )
         {
             this.isMobile = true;
         }
+    }
 
-        // Return if it's mobile
-        if ( this.isMobile )
+    ngAfterViewInit()
+    {
+        if ( this.isMobile || this.isDisableCustomScrollbars )
         {
-            // Return...
+            this.isInitialized = false;
             return;
         }
 
-        // Set as initialized
-        this.isInitialized = true;
-
         // Initialize the perfect-scrollbar
-        this.ps = new PerfectScrollbar(this.elementRef.nativeElement, {
-            ...this.fusePerfectScrollbarOptions
+        this.ps = new PerfectScrollbar(this.element.nativeElement, {
+            wheelPropagation: true
         });
     }
 
-    /**
-     * Destroy
-     *
-     * @private
-     */
-    _destroy(): void
+    ngOnDestroy()
     {
         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
     {
@@ -257,10 +82,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps.update();
     }
 
-    /**
-     * Update the scrollbar
-     */
-    update(): void
+    update()
     {
         if ( !this.isInitialized )
         {
@@ -271,108 +93,62 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         this.ps.update();
     }
 
-    /**
-     * Destroy the scrollbar
-     */
-    destroy(): void
+    destroy()
     {
         this.ngOnDestroy();
     }
 
-    /**
-     * Scroll to X
-     *
-     * @param {number} x
-     * @param {number} speed
-     */
-    scrollToX(x: number, speed?: number): void
+    scrollToX(x: number, speed?: number)
     {
         this.animateScrolling('scrollLeft', x, speed);
     }
 
-    /**
-     * Scroll to Y
-     *
-     * @param {number} y
-     * @param {number} speed
-     */
-    scrollToY(y: number, speed?: number): void
+    scrollToY(y: number, speed?: number)
     {
         this.animateScrolling('scrollTop', y, speed);
     }
 
-    /**
-     * Scroll to top
-     *
-     * @param {number} offset
-     * @param {number} speed
-     */
-    scrollToTop(offset?: number, speed?: number): void
+    scrollToTop(offset?: number, speed?: number)
     {
         this.animateScrolling('scrollTop', (offset || 0), speed);
     }
 
-    /**
-     * Scroll to left
-     *
-     * @param {number} offset
-     * @param {number} speed
-     */
-    scrollToLeft(offset?: number, speed?: number): void
+    scrollToLeft(offset?: number, speed?: number)
     {
         this.animateScrolling('scrollLeft', (offset || 0), speed);
     }
 
-    /**
-     * Scroll to right
-     *
-     * @param {number} offset
-     * @param {number} speed
-     */
-    scrollToRight(offset?: number, speed?: number): void
+    scrollToRight(offset?: number, speed?: number)
     {
-        const width = this.elementRef.nativeElement.scrollWidth;
+        const width = this.element.nativeElement.scrollWidth;
 
         this.animateScrolling('scrollLeft', width - (offset || 0), speed);
     }
 
-    /**
-     * Scroll to bottom
-     *
-     * @param {number} offset
-     * @param {number} speed
-     */
-    scrollToBottom(offset?: number, speed?: number): void
+    scrollToBottom(offset?: number, speed?: number)
     {
-        const height = this.elementRef.nativeElement.scrollHeight;
+        const height = this.element.nativeElement.scrollHeight;
 
         this.animateScrolling('scrollTop', height - (offset || 0), speed);
     }
 
-    /**
-     * Animate scrolling
-     *
-     * @param {string} target
-     * @param {number} value
-     * @param {number} speed
-     */
-    animateScrolling(target: string, value: number, speed?: number): void
+    animateScrolling(target: string, value: number, speed?: number)
     {
         if ( !speed )
         {
-            this.elementRef.nativeElement[target] = value;
+            this.element.nativeElement[target] = value;
 
             // PS has weird event sending order, this is a workaround for that
             this.update();
             this.update();
         }
-        else if ( value !== this.elementRef.nativeElement[target] )
+        else if ( value !== this.element.nativeElement[target] )
         {
             let newValue = 0;
             let scrollCount = 0;
 
             let oldTimestamp = performance.now();
-            let oldValue = this.elementRef.nativeElement[target];
+            let oldValue = this.element.nativeElement[target];
 
             const cosParameter = (oldValue - value) / 2;
 
@@ -382,11 +158,11 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 
                 // Only continue animation if scroll position has not changed
-                if ( this.elementRef.nativeElement[target] === oldValue )
+                if ( this.element.nativeElement[target] === oldValue )
                 {
                     if ( scrollCount >= Math.PI )
                     {
-                        this.elementRef.nativeElement[target] = value;
+                        this.element.nativeElement[target] = value;
 
                         // PS has weird event sending order, this is a workaround for that
                         this.update();
@@ -395,7 +171,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
                     }
                     else
                     {
-                        this.elementRef.nativeElement[target] = oldValue = newValue;
+                        this.element.nativeElement[target] = oldValue = newValue;
 
                         oldTimestamp = newTimestamp;
 

src/@fuse/fuse.module.ts

@@ -1,8 +1,27 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
 
-import { FUSE_CONFIG } from '@fuse/services/config.service';
+import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
+import { FuseCopierService } from '@fuse/services/copier.service';
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
+import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
 
-@NgModule()
+@NgModule({
+    entryComponents: [],
+    providers      : [
+        FuseConfigService,
+        FuseCopierService,
+        FuseMatchMediaService,
+        FuseMatSidenavHelperService,
+        FuseNavigationService,
+        FuseSidebarService,
+        FuseSplashScreenService,
+        FuseTranslationLoaderService
+    ]
+})
 export class FuseModule
 {
     constructor(@Optional() @SkipSelf() parentModule: FuseModule)

src/@fuse/pipes/camelCaseToDash.pipe.ts

@@ -3,14 +3,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({name: 'camelCaseToDash'})
 export class CamelCaseToDashPipe implements PipeTransform
 {
-    /**
-     * Transform
-     *
-     * @param {string} value
-     * @param {any[]} args
-     * @returns {string}
-     */
-    transform(value: string, args: any[] = []): string
+    transform(value: string, args: any[] = [])
     {
         return value ? String(value).replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : '';
     }

src/@fuse/pipes/filter.pipe.ts

@@ -4,14 +4,6 @@ import { FuseUtils } from '@fuse/utils';
 @Pipe({name: 'filter'})
 export class FilterPipe implements PipeTransform
 {
-    /**
-     * Transform
-     *
-     * @param {any[]} mainArr
-     * @param {string} searchText
-     * @param {string} property
-     * @returns {any}
-     */
     transform(mainArr: any[], searchText: string, property: string): any
     {
         return FuseUtils.filterArrayByString(mainArr, searchText);

src/@fuse/pipes/getById.pipe.ts

@@ -6,14 +6,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class GetByIdPipe implements PipeTransform
 {
-    /**
-     * Transform
-     *
-     * @param {any[]} value
-     * @param {number} id
-     * @param {string} property
-     * @returns {any}
-     */
     transform(value: any[], id: number, property: string): any
     {
         const foundItem = value.find(item => {

src/@fuse/pipes/htmlToPlaintext.pipe.ts

@@ -3,14 +3,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({name: 'htmlToPlaintext'})
 export class HtmlToPlaintextPipe implements PipeTransform
 {
-    /**
-     * Transform
-     *
-     * @param {string} value
-     * @param {any[]} args
-     * @returns {string}
-     */
-    transform(value: string, args: any[] = []): string
+    transform(value: string, args: any[] = [])
     {
         return value ? String(value).replace(/<[^>]+>/gm, '') : '';
     }

src/@fuse/pipes/keys.pipe.ts

@@ -3,13 +3,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({name: 'keys'})
 export class KeysPipe implements PipeTransform
 {
-    /**
-     * Transform
-     *
-     * @param value
-     * @param {string[]} args
-     * @returns {any}
-     */
     transform(value: any, args: string[]): any
     {
         const keys: any[] = [];

src/@fuse/scss/core.scss

@@ -30,7 +30,6 @@
 @import "partials/material";
 @import "partials/angular-material-fix";
 @import "partials/typography";
-@import "partials/docs";
 @import "partials/page-layouts";
 @import "partials/cards";
 @import "partials/navigation";

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

@@ -84,9 +84,4 @@ mat-chip {
         min-width: 0 !important;
         min-height: 0 !important;
     }
-}
-
-// Fix: Mat-card-image requires a bigger width than 100%
-.mat-card-image {
-    max-width: none !important;
 }

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

@@ -14,7 +14,7 @@ i {
 }
 
 // Material colors map
-$matPalettes: (
+$matColorsMap: (
     primary: $primary,
     accent: $accent,
     warn: $warn,
@@ -43,91 +43,75 @@ $matPalettes: (
 );
 
 // Material color hues list
-$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
 // Text color levels generator mixin
-@mixin generateTextColorLevels($classes, $contrast) {
+@mixin generateTextColorLevels($baseTextColor) {
 
-    // If the contrast is dark...
-    @if ($contrast == 'dark') {
+    // If the base text color is black...
+    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
 
-        // Put down the color classes
-        #{$classes} {
+        i,
+        .icon {
+            color: rgba(0, 0, 0, 0.54);
+        }
 
-            i,
-            .icon {
-                color: rgba(0, 0, 0, 0.54);
-            }
+        &.secondary-text,
+        .secondary-text {
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
 
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(0, 0, 0, 0.54) !important;
-            }
+        &.hint-text,
+        .hint-text,
+        &.disabled-text,
+        .disabled-text {
+            color: rgba(0, 0, 0, 0.38) !important;
+        }
 
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(0, 0, 0, 0.38) !important;
-            }
+        &.divider,
+        .divider {
+            color: rgba(0, 0, 0, 0.12) !important;
+        }
 
-            &.divider,
-            .divider {
-                color: rgba(0, 0, 0, 0.12) !important;
-            }
-
-            .mat-ripple-element {
-                background: rgba(0, 0, 0, 0.1);
-            }
-
-            .adaptive-border-color {
-                border-color: rgba(0, 0, 0, 0.12);
-            }
+        .mat-ripple-element {
+            background: rgba(0, 0, 0, 0.1);
         }
 
     }
         // If the base text color is white...
     @else {
 
-        // Put down the color classes
-        #{$classes} {
+        i,
+        .icon {
+            color: rgba(255, 255, 255, 1);
+        }
 
-            i,
-            .icon {
-                color: rgba(255, 255, 255, 1);
-            }
+        &.secondary-text,
+        .secondary-text {
+            color: rgba(255, 255, 255, 0.70) !important;
+        }
 
-            &.secondary-text,
-            .secondary-text {
-                color: rgba(255, 255, 255, 0.70) !important;
-            }
+        &.hint-text,
+        .hint-text,
+        &.disabled-text,
+        .disabled-text {
+            color: rgba(255, 255, 255, 0.50) !important;
+        }
 
-            &.hint-text,
-            .hint-text,
-            &.disabled-text,
-            .disabled-text {
-                color: rgba(255, 255, 255, 0.50) !important;
-            }
+        &.divider,
+        .divider {
+            color: rgba(255, 255, 255, 0.12) !important;
+        }
 
-            &.divider,
-            .divider {
-                color: rgba(255, 255, 255, 0.12) !important;
-            }
-
-            .mat-ripple-element {
-                background: rgba(255, 255, 255, 0.1);
-            }
-
-            .adaptive-border-color {
-                border-color: rgba(255, 255, 255, 0.12);
-            }
+        .mat-ripple-element {
+            background: rgba(255, 255, 255, 0.1);
         }
     }
 }
 
-@mixin generateMaterialElementColors($classes, $contrast) {
+@mixin generateMaterialElementColors($contrastColor) {
 
-    // If the contrast color is light...
+    // If the contrast color is white...
     $fuseForeground: (
         base: white,
         text: white,
@@ -135,8 +119,8 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
         divider: rgba(white, 0.12),
     );
 
-    // If the contrast color is dark...
-    @if ($contrast == 'dark') {
+    // If the contrast color is black...
+    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
 
         $fuseForeground: (
             base: black,
@@ -145,47 +129,43 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
         );
     }
 
-    // Put down the color classes
-    #{$classes} {
+    // Native Input
+    input[type="text"] {
+        color: map_get($fuseForeground, base);
+    }
 
-        // Native Input
-        input[type="text"] {
-            color: map_get($fuseForeground, base);
-        }
+    // Input
+    .mat-form-field-label {
+        color: map_get($fuseForeground, hint-text);
+    }
 
-        // Input
-        .mat-form-field-label {
-            color: map_get($fuseForeground, hint-text);
-        }
+    .mat-form-field-underline {
+        background-color: map_get($fuseForeground, divider);
+    }
 
-        .mat-form-field-underline {
-            background-color: map_get($fuseForeground, divider);
-        }
+    // Select
+    .mat-select-trigger,
+    .mat-select-arrow {
+        color: map_get($fuseForeground, hint-text);
+    }
 
-        // Select
-        .mat-select-trigger,
-        .mat-select-arrow {
-            color: map_get($fuseForeground, hint-text);
-        }
+    .mat-select-underline {
+        background-color: map_get($fuseForeground, divider);
+    }
 
-        .mat-select-underline {
-            background-color: map_get($fuseForeground, divider);
-        }
+    .mat-select-disabled .mat-select-value,
+    .mat-select-arrow,
+    .mat-select-trigger {
+        color: map_get($fuseForeground, hint-text);
+    }
 
-        .mat-select-disabled .mat-select-value,
-        .mat-select-arrow,
-        .mat-select-trigger {
-            color: map_get($fuseForeground, hint-text);
-        }
+    .mat-select-content,
+    .mat-select-panel-done-animating {
+        background: map_get($background, card);
+    }
 
-        .mat-select-content,
-        .mat-select-panel-done-animating {
-            background: map_get($background, card);
-        }
-
-        .mat-select-value {
-            color: map_get($fuseForeground, text);
-        }
+    .mat-select-value {
+        color: map_get($fuseForeground, text);
     }
 }
 
@@ -200,6 +180,14 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
         background-color: $color !important;
         color: $contrastColor !important;
 
+        // Generate text color levels
+        // based on current contrast color
+        @include generateTextColorLevels($contrastColor);
+
+        // Generate material element colors
+        // based on current contrast color
+        @include generateMaterialElementColors($contrastColor);
+
         &[disabled] {
             background-color: rgba($color, .12) !important;
             color: rgba($contrastColor, .26) !important;
@@ -208,6 +196,14 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
 
     .#{$colorName}#{$hue}-fg {
         color: $color !important;
+
+        // Generate text color levels
+        // based on current contrast color
+        @include generateTextColorLevels($color);
+
+        // Generate material element colors
+        // based on current contrast color
+        @include generateMaterialElementColors($color);
     }
 
     .#{$colorName}#{$hue}-border {
@@ -231,128 +227,22 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
     }
 }
 
-@mixin generateFuseColorClasses($primary, $accent, $warn) {
-
-    $palettes: (
-        primary: $primary,
-        accent: $accent,
-        warn: $warn
-    );
-
-    // Define contrast lists
-    $light-contrasting-classes: ();
-    $dark-contrasting-classes: ();
-
-    // Generate the color classes...
-    @each $paletteName, $palette in $palettes {
-
-        // Get the contrasts map
-        $contrasts: map-get($palette, 'contrast');
-
-        @each $hue in $matHues {
-
-            // Get the color and the contrasting color
-            $color: map-get($palette, $hue);
-            $contrast: map-get($contrasts, $hue);
-
-            @if ($color != null and $contrast != null) {
-
-                // Generate color classes
-                @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
-
-                // If the contrast color is dark
-                @if (rgba(black, 1) == rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-                }
-                    // if the contrast color is light
-                @else {
-                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-                }
-
-                // Run the generator one more time for default values (500)
-                @if ($hue == 500) {
-
-                    // Generate color classes
-                    @include generateColorClasses($paletteName, $color, $contrast, '');
-
-                    // Add color to the correct list depending on the contrasting color
-
-                    // If the contrast color is dark
-                    @if (rgba(black, 1) == rgba($contrast, 1)) {
-                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                    }
-                        // if the contrast color is light
-                    @else {
-                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                    }
-                }
-            }
-        }
-    }
-
-    // Generate contrasting colors
-    @include generateTextColorLevels($dark-contrasting-classes, 'dark');
-    @include generateTextColorLevels($light-contrasting-classes, 'light');
-    @include generateMaterialElementColors($dark-contrasting-classes, 'dark');
-    @include generateMaterialElementColors($light-contrasting-classes, 'light');
-}
-
 // Generate the color classes...
+@each $colorName, $colorMap in $matColorsMap {
 
-// Define contrast lists
-$light-contrasting-classes: ();
-$dark-contrasting-classes: ();
+    @each $hue in $matColorHues {
 
-@each $paletteName, $palette in $matPalettes {
+        $color: map-get($colorMap, $hue);
+        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
 
-    // Get the contrasts map
-    $contrasts: map-get($palette, 'contrast');
+        @if ($color != null and $contrastColor != null) {
 
-    @each $hue in $matHues {
-
-        // Get the color and the contrasting color
-        $color: map-get($palette, $hue);
-        $contrast: map-get($contrasts, $hue);
-
-        @if ($color != null and $contrast != null) {
-
-            // Generate color classes
-            @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
-
-            // Add color to the correct list depending on the contrasting color
-
-            // If the contrast color is dark
-            @if (rgba(black, 1) == rgba($contrast, 1)) {
-                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-            }
-                // if the contrast color is light
-            @else {
-                $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
-            }
+            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
 
             // Run the generator one more time for default values (500)
             @if ($hue == 500) {
-
-                // Generate color classes
-                @include generateColorClasses($paletteName, $color, $contrast, '');
-
-                // Add color to the correct list depending on the contrasting color
-
-                // If the contrast color is dark
-                @if (rgba(black, 1) == rgba($contrast, 1)) {
-                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                }
-                    // if the contrast color is light
-                @else {
-                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
-                }
+                @include generateColorClasses($colorName, $color, $contrastColor, '');
             }
         }
     }
 }
-
-// Generate contrasting colors
-@include generateTextColorLevels($dark-contrasting-classes, 'dark');
-@include generateTextColorLevels($light-contrasting-classes, 'light');
-@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
-@include generateMaterialElementColors($light-contrasting-classes, 'light');

src/@fuse/scss/partials/_docs.scss

@@ -1,42 +0,0 @@
-.docs {
-    font-size: 16px;
-
-    > .content {
-        max-width: 980px;
-
-        > .main-title {
-
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-    }
-
-    .main-title {
-        display: flex;
-        margin-top: 72px;
-        font-size: 24px;
-    }
-
-    .section-title {
-        display: inline-flex;
-        font-size: 18px;
-        margin-top: 24px;
-        border-bottom: 1px solid #F44336;
-        color: #F44336;
-    }
-
-    ol,
-    ul {
-        padding-left: 24px;
-
-        li {
-            margin-bottom: 12px;
-            line-height: 1.7;
-        }
-    }
-
-    p {
-        line-height: 1.7;
-    }
-}

src/@fuse/scss/partials/_global.scss

@@ -1,13 +1,6 @@
-html,
 body {
-    display: flex;
-    flex: 1 0 auto;
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    min-height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    background: #F5F5F5;
-}
+
+    > mat-sidenav-container {
+        height: 100%;
+    }
+}

src/@fuse/scss/partials/_navigation.scss

@@ -42,7 +42,7 @@
             color: currentColor;
 
             > .nav-link-title {
-                flex: 1 1 auto;
+                flex: 1;
                 white-space: nowrap;
             }
 
@@ -58,7 +58,7 @@
                 transition: opacity 0.2s ease-in-out 0.1s;
                 margin-left: 8px;
 
-                + .collapsable-arrow {
+                + .collapse-arrow {
                     margin-left: 8px;
                 }
             }
@@ -72,9 +72,14 @@
             }
 
             &.active {
+                background-color: mat-color($accent);
 
-                .nav-link-icon {
-                    opacity: 1;
+                .mat-ripple-element {
+                    background-color: mat-color($accent, default-contrast, 0.1);
+                }
+
+                &, .nav-link-icon {
+                    color: mat-color($accent, default-contrast);
                 }
 
                 .nav-link-badge {
@@ -85,11 +90,10 @@
 
             .nav-link-icon {
                 margin-right: 16px;
-                opacity: 0.7;
             }
 
             .nav-link-icon,
-            .collapsable-arrow {
+            .collapse-arrow {
                 font-size: 16px;
                 width: 16px;
                 height: 16px;
@@ -99,7 +103,7 @@
             }
         }
 
-        &.nav-collapsable {
+        &.nav-collapse {
             display: block;
 
             > .children {
@@ -131,7 +135,7 @@
 
     > .nav-item {
 
-        &.nav-collapsable {
+        &.nav-collapse {
             background: transparent;
             transition: background 200ms ease-in-out;
 
@@ -145,7 +149,7 @@
 
         > .group-items {
 
-            > .nav-collapsable {
+            > .nav-collapse {
                 background: transparent;
                 transition: background 200ms ease-in-out;
 
@@ -172,7 +176,7 @@
 
         .nav-item {
 
-            &.nav-collapsable {
+            &.nav-collapse {
                 position: relative;
 
                 .children {
@@ -201,13 +205,13 @@
                 height: 56px;
             }
 
-            &.nav-collapsable {
+            &.nav-collapse {
                 position: relative;
 
                 > .nav-link {
                     height: 56px;
 
-                    .collapsable-arrow {
+                    .collapse-arrow {
                         display: none;
                     }
                 }
@@ -219,26 +223,4 @@
             }
         }
     }
-
-    // Material style
-    &.material {
-
-        .nav-subheader {
-            border-top: 1px solid rgba(0, 0, 0, 0.12);
-
-            &:first-child {
-                border-top: none;
-            }
-        }
-
-        .nav-item {
-
-            .nav-link {
-                height: 40px;
-                padding: 0 16px;
-                margin: 4px 8px;
-                border-radius: 4px;
-            }
-        }
-    }
 }

src/@fuse/scss/partials/_page-layouts.scss

@@ -10,9 +10,13 @@ $header-height-sm: 100px !default;
 $carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
 $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
+// Top bg image
+$top-bg-image: url('assets/images/backgrounds/header-bg.png');
+
 .page-layout {
     position: relative;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
 
     // Carded layout
     &.carded {
@@ -23,13 +27,15 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         min-width: 100%;
 
         // Top bg
-        > .top-bg {
+        .top-bg {
             position: absolute;
             z-index: 1;
             top: 0;
             right: 0;
             left: 0;
             height: $carded-header-height;
+            background-image: $top-bg-image;
+            background-size: cover;
 
             @include media-breakpoint-down('sm') {
                 height: $carded-header-height-sm;
@@ -39,215 +45,29 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         // Fullwidth
         &.fullwidth {
 
+            // Single scroll
+            &.single-scroll {
+
+                > .center {
+                    flex: 1 0 auto;
+                    max-height: none;
+                }
+            }
+
             // Center
             > .center {
                 display: flex;
                 flex-direction: column;
-                flex: 1 0 auto;
+                flex: 1;
                 position: relative;
                 z-index: 2;
                 padding: 0 32px;
                 width: 100%;
-                min-width: 0;
+                min-width: 100%;
                 max-width: 100%;
                 max-height: 100%;
 
-                > .header {
-                    height: $carded-header-height-without-toolbar !important;
-                    min-height: $carded-header-height-without-toolbar !important;
-                    max-height: $carded-header-height-without-toolbar !important;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-without-toolbar-sm !important;
-                        min-height: $carded-header-height-without-toolbar-sm !important;
-                        max-height: $carded-header-height-without-toolbar-sm !important;
-                    }
-                }
-
-                > .content-card {
-                    display: flex;
-                    flex-direction: column;
-                    flex: 1 0 auto;
-                    overflow: hidden;
-                    @include mat-elevation(7);
-
-                    > .toolbar {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-items: center;
-                        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-                        height: $carded-toolbar-height;
-                        min-height: $carded-toolbar-height;
-                        max-height: $carded-toolbar-height;
-                    }
-
-                    > .content {
-                        flex: 1 0 auto;
-                    }
-                }
-            }
-
-            // Tabbed
-            &.tabbed {
-
-                > .center {
-                    width: 100%;
-                    min-width: 0;
-
-                    > .header {
-                        flex: 1 1 auto;
-                    }
-
-                    > .content-card {
-
-                        > .content {
-                            display: flex;
-
-                            > .mat-tab-group {
-                                overflow: hidden;
-
-                                .mat-tab-header {
-
-                                    .mat-tab-label {
-                                        height: 64px;
-                                    }
-                                }
-
-                                .mat-tab-body {
-                                    overflow: hidden;
-
-                                    .mat-tab-body-content {
-                                        overflow: hidden;
-
-                                        .tab-content {
-                                            position: relative;
-                                            width: 100%;
-                                            height: 100%;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            // Inner scroll
-            &.inner-scroll {
-                flex: 1 1 auto;
-
-                > .center {
-                    flex: 1 1 auto;
-
-                    > .content-card {
-                        flex: 1 1 auto;
-
-                        > .content {
-                            overflow: auto;
-                            flex: 1 1 auto;
-                        }
-                    }
-                }
-
-                // Tabbed
-                &.tabbed {
-
-                    > .center {
-
-                        > .content-card {
-
-                            > .content {
-
-                                > .mat-tab-group {
-
-                                    .mat-tab-body {
-
-                                        .mat-tab-body-content {
-
-                                            .tab-content {
-                                                overflow: auto;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        // Left / Right sidebar
-        &.left-sidebar,
-        &.right-sidebar {
-            flex-direction: row;
-
-            // Sidebar
-            > .sidebar {
-                display: flex;
-                flex-direction: column;
-                flex: 1 1 auto;
-                width: 240px;
-                min-width: 240px;
-                max-width: 240px;
-                height: auto;
-                overflow: hidden;
-                @include mat-elevation(7);
-
-                &.locked-open {
-                    background: none;
-                    box-shadow: none;
-
-                    + .center {
-                        z-index: 1001;
-                    }
-
-                    &.left-positioned {
-
-                        + .center {
-                            margin-left: 0;
-                        }
-                    }
-
-                    &.right-positioned {
-
-                        + .center {
-                            margin-right: 0;
-                        }
-                    }
-                }
-
                 .header {
-                    height: $carded-header-height;
-                    min-height: $carded-header-height;
-                    max-height: $carded-header-height;
-
-                    @include media-breakpoint-down('sm') {
-                        height: $carded-header-height-sm;
-                        min-height: $carded-header-height-sm;
-                        max-height: $carded-header-height-sm;
-                    }
-                }
-
-                .content {
-                    background: transparent;
-                    flex: 1 1 auto;
-                }
-            }
-
-            // Center
-            > .center {
-                display: flex;
-                flex-direction: column;
-                flex: 1 1 auto;
-                position: relative;
-                z-index: 3;
-                margin-left: 32px;
-                margin-right: 32px;
-                min-width: 0;
-
-                > .header {
-                    display: flex;
                     height: $carded-header-height-without-toolbar;
                     min-height: $carded-header-height-without-toolbar;
                     max-height: $carded-header-height-without-toolbar;
@@ -259,32 +79,146 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                     }
                 }
 
-                > .content-card {
+                .content-card {
                     display: flex;
                     flex-direction: column;
-                    flex: 1 1 auto;
+                    flex: 1;
                     overflow: hidden;
                     @include mat-elevation(7);
 
-                    > .toolbar {
+                    .toolbar {
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
-                        flex: 1 1 auto;
                         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                         height: $carded-toolbar-height;
                         min-height: $carded-toolbar-height;
                         max-height: $carded-toolbar-height;
-
-                        .sidebar-toggle {
-                            margin: 0 8px 0 0 !important;
-                            padding: 0 !important;
-                            border-radius: 0;
-                        }
                     }
 
                     > .content {
-                        flex: 1 1 auto;
+                        display: flex;
+                        flex: 1;
+                        overflow: auto;
+                    }
+                }
+            }
+        }
+
+        // Left sidenav - Right sidenav
+        &.left-sidenav,
+        &.right-sidenav {
+
+            // Single scroll
+            &.single-scroll {
+
+                > mat-sidenav-container {
+                    flex: 1 0 auto;
+                }
+            }
+
+            > mat-sidenav-container {
+                display: flex;
+                flex: 1;
+                background: none;
+                z-index: 2;
+                width: 100%;
+
+                .sidenav {
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1;
+                    width: 240px;
+                    min-width: 240px;
+                    max-width: 240px;
+                    height: auto;
+                    z-index: 4;
+                    overflow-y: hidden;
+                    @include mat-elevation(7);
+
+                    &.mat-is-locked-open {
+                        background: none;
+                        box-shadow: none;
+                    }
+
+                    .header {
+                        height: $carded-header-height;
+                        min-height: $carded-header-height;
+                        max-height: $carded-header-height;
+
+                        @include media-breakpoint-down('sm') {
+                            height: $carded-header-height-sm;
+                            min-height: $carded-header-height-sm;
+                            max-height: $carded-header-height-sm;
+                        }
+                    }
+
+                    .content {
+                        background: transparent;
+                        overflow: auto;
+                    }
+                }
+
+                > .mat-sidenav-content,
+                > .mat-drawer-content {
+                    display: flex;
+                    flex: 1;
+                    height: auto;
+                    overflow: visible;
+
+                    // Center
+                    .center {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1;
+                        position: relative;
+                        z-index: 3;
+                        margin-left: 32px;
+                        margin-right: 32px;
+
+                        .header {
+                            display: flex;
+                            height: $carded-header-height-without-toolbar;
+                            min-height: $carded-header-height-without-toolbar;
+                            max-height: $carded-header-height-without-toolbar;
+
+                            @include media-breakpoint-down('sm') {
+                                height: $carded-header-height-without-toolbar-sm;
+                                min-height: $carded-header-height-without-toolbar-sm;
+                                max-height: $carded-header-height-without-toolbar-sm;
+                            }
+                        }
+
+                        .content-card {
+                            display: flex;
+                            flex-direction: column;
+                            flex: 1;
+                            overflow: hidden;
+                            @include mat-elevation(7);
+
+                            .toolbar {
+                                display: flex;
+                                justify-content: flex-start;
+                                align-items: center;
+                                flex: 1;
+                                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                                height: $carded-toolbar-height;
+                                min-height: $carded-toolbar-height;
+                                max-height: $carded-toolbar-height;
+
+                                .sidenav-toggle {
+                                    margin: 0 8px 0 0 !important;
+                                    padding: 0 !important;
+                                    border-radius: 0;
+                                }
+                            }
+
+                            .content {
+                                display: flex;
+                                flex: 1;
+                                overflow: auto;
+                            }
+                        }
                     }
                 }
             }
@@ -292,93 +226,51 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             // Tabbed
             &.tabbed {
 
-                > .center {
-                    width: calc(100% - 32px);
-                    min-width: 0;
+                > mat-sidenav-container {
 
-                    @include media-breakpoint-down('md') {
-                        width: calc(100% - 64px);
-                    }
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        width: calc(100% - 240px);
+                        min-width: 0;
 
-                    > .header {
-                        flex: 1 1 auto;
-                    }
+                        .center {
+                            width: calc(100% - 32px);
+                            min-width: 0;
 
-                    > .content-card {
+                            @include media-breakpoint-down('md') {
+                                width: calc(100% - 64px);
+                            }
 
-                        > .content {
-                            display: flex;
+                            .header {
+                                flex: 1;
+                            }
 
-                            > .mat-tab-group {
-                                overflow: hidden;
+                            .content-card {
 
-                                .mat-tab-header {
+                                .content {
 
-                                    .mat-tab-label {
-                                        height: 64px;
-                                    }
-                                }
-
-                                .mat-tab-body {
-                                    overflow: hidden;
-
-                                    .mat-tab-body-content {
+                                    .mat-tab-group {
                                         overflow: hidden;
 
-                                        .tab-content {
-                                            position: relative;
-                                            width: 100%;
-                                            height: 100%;
+                                        .mat-tab-header {
+
+                                            .mat-tab-label {
+                                                height: 64px;
+                                            }
                                         }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
 
-            // Inner scroll
-            &.inner-scroll {
-                flex: 1 1 auto;
+                                        .mat-tab-body {
+                                            overflow: hidden;
 
-                > .sidebar {
+                                            .mat-tab-body-content {
+                                                overflow: hidden;
 
-                    .content {
-                        overflow: auto;
-                    }
-                }
-
-                > .center {
-                    flex: 1 1 auto;
-
-                    > .content-card {
-                        flex: 1 1 auto;
-
-                        > .content {
-                            flex: 1 1 auto;
-                            overflow: auto;
-                        }
-                    }
-                }
-
-                // Tabbed
-                &.tabbed {
-
-                    > .center {
-
-                        > .content-card {
-
-                            > .content {
-
-                                > .mat-tab-group {
-
-                                    .mat-tab-body {
-
-                                        .mat-tab-body-content {
-
-                                            .tab-content {
-                                                overflow: auto;
+                                                .tab-content {
+                                                    position: relative;
+                                                    width: 100%;
+                                                    height: 100%;
+                                                    overflow: auto;
+                                                }
                                             }
                                         }
                                     }
@@ -390,15 +282,48 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             }
         }
 
-        // Right sidebar specific
-        &.right-sidebar {
+        // Left sidenav
+        &.left-sidenav {
 
-            > .sidebar {
-                order: 2;
+            // Sidenav
+            > mat-sidenav-container {
+
+                .sidenav {
+
+                    &.mat-is-locked-open {
+
+                        ~ .mat-sidenav-content,
+                        ~ .mat-drawer-content {
+
+                            .center {
+                                margin-left: 0;
+                            }
+                        }
+                    }
+                }
             }
+        }
 
-            > .center {
-                order: 1;
+        // Right sidenav
+        &.right-sidenav {
+
+            // Sidenav
+            > mat-sidenav-container {
+
+                .sidenav {
+                    order: 999;
+
+                    &.mat-is-locked-open {
+
+                        ~ .mat-sidenav-content,
+                        ~ .mat-drawer-content {
+
+                            .center {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+                }
             }
         }
     }
@@ -411,17 +336,20 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         width: 100%;
         min-width: 100%;
 
+        // Top bg
+        > .header {
+            background-image: $top-bg-image;
+            background-size: cover;
+        }
+
         // Fullwidth
         &.fullwidth {
-
-            > .content {
-                flex: 1 1 auto;
-                min-width: 0;
-            }
+            overflow: auto;
         }
 
         &.fullwidth,
-        &.inner-sidebar {
+        &.inner-sidenav {
+            min-height: 100%;
 
             > .header {
                 height: $header-height;
@@ -430,138 +358,109 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
             }
         }
 
-        // Left / Right sidebar
-        &.left-sidebar,
-        &.right-sidebar {
-            flex-direction: row;
+        // Left sidenav - Right sidenav
+        &.left-sidenav,
+        &.right-sidenav {
 
-            // Sidebar
-            > .sidebar {
-                width: 240px;
-                min-width: 240px;
-                max-width: 240px;
-                overflow: hidden;
-                @include mat-elevation(7);
+            // Single scroll
+            &.single-scroll {
 
-                &.locked-open {
-                    background: none;
-                    box-shadow: none;
+                > mat-sidenav-container {
+                    flex: 1 0 auto;
 
-                    + .center {
-                        z-index: 1001;
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        flex: 1 0 auto;
+                        max-height: none;
                     }
-
-                    &.left-positioned {
-
-                        + .center {
-                            margin-left: 0;
-                        }
-                    }
-
-                    &.right-positioned {
-
-                        + .center {
-                            margin-right: 0;
-                        }
-                    }
-                }
-
-                .content {
-                    flex: 1 1 auto;
                 }
             }
 
-            // Center
-            > .center {
-                position: relative;
+            // Inner Sidenav
+            &.inner-sidenav {
+
+                > mat-sidenav-container {
+                    flex: 1;
+
+                    .sidenav {
+
+                        .sidenav-content {
+                            height: 100%;
+                        }
+                    }
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        display: flex;
+                        height: auto;
+
+                        .center {
+                            flex: 1;
+                            min-height: 100%;
+                            @include mat-elevation(0);
+
+                            .content {
+                                display: flex;
+                                flex: 1 0 auto;
+                            }
+                        }
+                    }
+                }
+            }
+
+            > mat-sidenav-container {
                 display: flex;
                 flex-direction: column;
-                flex: 1 1 auto;
-                z-index: 3;
-                min-width: 0;
-                @include mat-elevation(7);
+                flex: 1;
+                background: none;
+                z-index: 2;
+                width: 100%;
 
-                > .header {
-                    height: $header-height;
-                    min-height: $header-height;
-                    max-height: $header-height;
-                }
+                .sidenav {
+                    width: 240px;
+                    min-width: 240px;
+                    max-width: 240px;
+                    z-index: 51;
+                    @include mat-elevation(7);
 
-                > .content {
-                    flex: 1 0 auto;
-                }
-            }
+                    &.mat-is-locked-open {
+                        width: 220px;
+                        min-width: 220px;
+                        max-width: 220px;
+                        box-shadow: none;
+                        background: transparent;
+                    }
 
-            // Inner scroll
-            &.inner-scroll {
-                flex: 1 1 auto;
-
-                > .sidebar {
-
-                    .content {
-                        overflow: auto;
+                    .sidenav-content {
+                        height: 100%;
                     }
                 }
 
-                > .center {
-                    flex: 1 1 auto;
-                    overflow: auto;
-                }
-            }
-
-            // Inner Sidebar
-            &.inner-sidebar {
-                flex-direction: column;
-                overflow: hidden;
-                height: 100%;
-
-                > .content {
+                > .mat-sidenav-content,
+                > .mat-drawer-content {
                     display: flex;
-                    min-height: 0;
+                    flex: 1;
+                    height: auto;
+                    overflow: visible;
+                    max-height: 100%;
 
-                    > .sidebar {
+                    .header {
+                        height: $header-height;
+                        min-height: $header-height;
+                        max-height: $header-height;
+                        background-image: $top-bg-image;
+                    }
 
-                        &.locked-open {
-                            background: none;
-                            box-shadow: none;
-                        }
+                    .center {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1;
+                        overflow: auto;
+                        @include mat-elevation(7);
 
                         .content {
-                            overflow: auto;
                         }
                     }
-
-                    > .center {
-                        flex: 1 1 auto;
-                        overflow: auto;
-                    }
-                }
-            }
-        }
-
-        // Right sidebar specific
-        &.right-sidebar {
-
-            > .sidebar {
-                order: 2;
-            }
-
-            > .center {
-                order: 1;
-            }
-
-            // Inner sidebar
-            &.inner-sidebar {
-
-                > .content {
-
-                    > .sidebar {
-                        order: 2;
-                    }
-
-                    > .center {
-                        order: 1;
-                    }
                 }
             }
         }
@@ -570,7 +469,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
         &.tabbed {
             min-height: 100%;
 
-            > .header {
+            .header {
                 height: $header-height;
                 min-height: $header-height;
                 max-height: $header-height;
@@ -578,7 +477,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
             > .content {
 
-                > .mat-tab-group {
+                .mat-tab-group {
 
                     .mat-tab-labels {
                         padding: 0 24px;
@@ -596,6 +495,50 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
     @include media-breakpoint-down('xs') {
 
+        // Activate single-scroll
+        &.carded {
+
+            &.fullwidth {
+
+                > .center {
+                    flex: 1 0 auto;
+                    max-height: none;
+                }
+            }
+
+            &.left-sidenav,
+            &.right-sidenav {
+
+                > mat-sidenav-container {
+                    flex: 1 0 auto;
+                }
+            }
+        }
+
+        &.simple {
+
+            &.fullwidth {
+
+                > .content {
+                    flex: 1 0 auto;
+                }
+            }
+
+            &.left-sidenav,
+            &.right-sidenav {
+
+                > mat-sidenav-container {
+                    flex: 1 0 auto !important;
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+                        flex: 1 0 auto;
+                    }
+                }
+            }
+        }
+        // End - Activate single-scroll
+
         // Smaller margins
         &.carded {
 
@@ -606,11 +549,18 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                 }
             }
 
-            &.left-sidebar,
-            &.right-sidebar {
+            &.left-sidenav,
+            &.right-sidenav {
 
-                > .center {
-                    margin: 0 16px;
+                > mat-sidenav-container {
+
+                    > .mat-sidenav-content,
+                    > .mat-drawer-content {
+
+                        .center {
+                            margin: 0 16px;
+                        }
+                    }
                 }
             }
         }

src/@fuse/scss/partials/_print.scss

@@ -34,13 +34,13 @@
     }
 
     /* General styles */
-    app {
+    fuse-root {
 
-        fuse-sidebar,
-        navbar,
-        toolbar,
-        footer,
-        .theme-options-button,
+        fuse-navbar-vertical,
+        fuse-navbar-horizontal,
+        fuse-toolbar,
+        fuse-footer,
+        fuse-quick-panel,
         fuse-theme-options,
         .ps > .ps__rail-x,
         .ps > .ps__rail-y {

src/@fuse/scss/partials/_typography.scss

@@ -274,119 +274,4 @@ strong {
 // Nowrap
 .text-nowrap {
     white-space: nowrap;
-}
-
-// Changelog
-.changelog {
-
-    .entry {
-        background: white;
-        margin-bottom: 24px;
-        padding: 24px 32px;
-        @include mat-elevation(2);
-
-        > .title {
-            display: flex;
-            align-items: center;
-            margin-bottom: 24px;
-
-            .version {
-                font-size: 24px;
-            }
-
-            .date {
-                margin-left: 8px;
-                font-size: 17px;
-                opacity: 0.54;
-            }
-        }
-
-        .groups {
-
-            div {
-                margin-bottom: 32px;
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-            }
-
-            .title {
-                display: inline-flex;
-                font-size: 13px;
-                color: white;
-                letter-spacing: 0.015em;
-                line-height: 1;
-                padding: 5px 8px;
-                border-radius: 2px;
-            }
-
-            .breaking-changes {
-
-                .title {
-                    background: #F44336;
-                }
-            }
-
-            .new {
-
-                .title {
-                    background: #43A047;
-                }
-            }
-
-            .improved {
-
-                .title {
-                    background: #673AB7;
-                }
-            }
-
-            .fixed {
-
-                .title {
-                    background: #2196F3;
-                }
-            }
-
-            ul {
-                padding-left: 24px;
-
-                li {
-                    margin-bottom: 6px;
-                    letter-spacing: 0.015em;
-                }
-            }
-        }
-    }
-}
-
-// Message boxes
-.message-box {
-    padding: 16px;
-    background: #607D8B;
-    border-left: 6px solid #37474F;
-    color: rgba(255, 255, 255, 1);
-
-    &.error {
-        background: #EF5350;
-        border-left-color: #B71C1C;
-    }
-
-    &.warning {
-        background: #FFECB3;
-        border-left-color: #FFC107;
-        color: rgba(0, 0, 0, 0.87);
-    }
-
-    &.success {
-        background: #4CAF50;
-        border-left-color: #2E7D32;
-    }
-
-    &.info {
-        background: #B3E5FC;
-        border-left-color: #03A9F4;
-        color: rgba(0, 0, 0, 0.87);
-    }
 }

src/@fuse/scss/partials/plugins/_prism.scss

@@ -104,9 +104,9 @@ $code-color-attr-name: #B65611 !default;
 
         // whitespace management
         white-space: pre; // fallback
-        //white-space: pre-wrap;
-        //word-break: break-all;
-        //word-wrap: break-word;
+        white-space: pre-wrap;
+        word-break: break-all;
+        word-wrap: break-word;
 
         font-family: $code-font-family;
         font-size: $code-font-size;

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

@@ -1,157 +1,93 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { Platform } from '@angular/cdk/platform';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+
 import * as _ from 'lodash';
 
-// Create the injection token for the custom settings
+// Create the injection token for the custom config
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
 
-@Injectable({
-    providedIn: 'root'
-})
+@Injectable()
 export class FuseConfigService
 {
-    // Private
-    private _configSubject: BehaviorSubject<any>;
-    private readonly _defaultConfig: any;
+    config: any;
+    defaultConfig: any;
+    isSetConfigRan = false;
+
+    onConfigChanged: BehaviorSubject<any>;
 
     /**
      * Constructor
      *
-     * @param {Platform} _platform
-     * @param {Router} _router
-     * @param _config
+     * @param router
+     * @param platform
+     * @param config
      */
     constructor(
-        private _platform: Platform,
-        private _router: Router,
-        @Inject(FUSE_CONFIG) private _config
+        private router: Router,
+        public platform: Platform,
+        @Inject(FUSE_CONFIG) config
     )
     {
-        // Set the default config from the user provided config (from forRoot)
-        this._defaultConfig = _config;
+        // Set the default config from the user provided one (forRoot)
+        this.defaultConfig = config;
 
-        // Initialize the service
-        this._init();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Set and get the config
-     */
-    set config(value)
-    {
-        // Get the value from the behavior subject
-        let config = this._configSubject.getValue();
-
-        // Merge the new config
-        config = _.merge({}, config, value);
-
-        // Notify the observers
-        this._configSubject.next(config);
-    }
-
-    get config(): any | Observable<any>
-    {
-        return this._configSubject.asObservable();
-    }
-
-    /**
-     * Get default config
-     *
-     * @returns {any}
-     */
-    get defaultConfig(): any
-    {
-        return this._defaultConfig;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Initialize
-     *
-     * @private
-     */
-    private _init(): void
-    {
         /**
-         * Disable custom scrollbars if browser is mobile
+         * Disable Custom Scrollbars if Browser is Mobile
          */
-        if ( this._platform.ANDROID || this._platform.IOS )
+        if ( this.platform.ANDROID || this.platform.IOS )
         {
-            this._defaultConfig.customScrollbars = false;
+            this.defaultConfig.customScrollbars = false;
         }
 
         // Set the config from the default config
-        this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig));
+        this.config = _.cloneDeep(this.defaultConfig);
 
-        // Reload the default config on every navigation start if
-        // the current config is different from the default one
-        this._router.events
-            .pipe(filter(event => event instanceof NavigationStart))
-            .subscribe(() => {
-                if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) )
+        // Reload the default settings for the
+        // layout on every navigation start
+        router.events.subscribe(
+            (event) => {
+
+                if ( event instanceof NavigationStart )
                 {
-                    // Clone the default config
-                    const config = _.cloneDeep(this._defaultConfig);
-
-                    // Set the config
-                    this._configSubject.next(config);
+                    this.isSetConfigRan = false;
                 }
-            });
+
+                if ( event instanceof NavigationEnd )
+                {
+                    if ( this.isSetConfigRan )
+                    {
+                        return;
+                    }
+
+                    this.setConfig({
+                            layout: this.defaultConfig.layout
+                        }
+                    );
+                }
+            }
+        );
+
+        // Create the behavior subject
+        this.onConfigChanged = new BehaviorSubject(this.config);
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
     /**
-     * Set config
+     * Set the new config from given object
      *
-     * @param value
-     * @param {{emitEvent: boolean}} opts
+     * @param config
      */
-    setConfig(value, opts = {emitEvent: true}): void
+    setConfig(config): void
     {
-        // Get the value from the behavior subject
-        let config = this._configSubject.getValue();
+        // Set the SetConfigRan true
+        this.isSetConfigRan = true;
 
-        // Merge the new config
-        config = _.merge({}, config, value);
+        // Merge the config
+        this.config = _.merge({}, this.config, config);
 
-        // If emitEvent option is true...
-        if ( opts.emitEvent === true )
-        {
-            // Notify the observers
-            this._configSubject.next(config);
-        }
-    }
-
-    /**
-     * Get config
-     *
-     * @returns {Observable<any>}
-     */
-    getConfig(): Observable<any>
-    {
-        return this._configSubject.asObservable();
-    }
-
-    /**
-     * Reset to the default config
-     */
-    resetToDefaults(): void
-    {
-        // Set the config from the default config
-        this._configSubject.next(_.cloneDeep(this._defaultConfig));
+        // Trigger the event
+        this.onConfigChanged.next(this.config);
     }
 }
 

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

@@ -1,31 +1,26 @@
 /**
  * This class is based on the code in the following projects:
- * https://github.com/zenorocha/select
- * https://github.com/zenorocha/clipboard.js/
+ *
+ * - https://github.com/zenorocha/select
+ * - https://github.com/zenorocha/clipboard.js/
  *
  * Both released under MIT license - © Zeno Rocha
  */
 import { Injectable } from '@angular/core';
 
-@Injectable({
-    providedIn: 'root'
-})
+@Injectable()
 export class FuseCopierService
 {
+
     private textarea: HTMLTextAreaElement;
 
-    /**
-     * Copy the text value to the clipboard
-     *
-     * @param {string} text
-     * @returns {boolean}
-     */
+    /** Copy the text value to the clipboard. */
     copyText(text: string): boolean
     {
         this.createTextareaAndSelect(text);
 
         const copySuccessful = document.execCommand('copy');
-        this._removeFake();
+        this.removeFake();
 
         return copySuccessful;
     }
@@ -33,10 +28,8 @@ export class FuseCopierService
     /**
      * Creates a hidden textarea element, sets its value from `text` property,
      * and makes a selection on it.
-     *
-     * @param {string} text
      */
-    private createTextareaAndSelect(text: string): void
+    private createTextareaAndSelect(text: string)
     {
         // Create a fake element to hold the contents to copy
         this.textarea = document.createElement('textarea');
@@ -60,12 +53,8 @@ export class FuseCopierService
         this.textarea.setSelectionRange(0, this.textarea.value.length);
     }
 
-    /**
-     * Remove the text area from the DOM
-     *
-     * @private
-     */
-    private _removeFake(): void
+    /** Remove the text area from the DOM. */
+    private removeFake()
     {
         if ( this.textarea )
         {

src/@fuse/services/loading-bar.service.ts

@@ -1,91 +0,0 @@
-import { Injectable } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { filter } from 'rxjs/operators';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class FuseLoadingBarService
-{
-    // Private
-    private _visible: BehaviorSubject<boolean>;
-
-    /**
-     * Constructor
-     *
-     * @param {Router} _router
-     */
-    constructor(
-        private _router: Router
-    )
-    {
-        // Initialize the service
-        this._init();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    get visible(): Observable<any>
-    {
-        // Return the _visible as observable
-        return this._visible.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Initialize
-     *
-     * @private
-     */
-    private _init(): void
-    {
-        // Initialize the behavior subject
-        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.showLoadingBar();
-            });
-
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
-            .subscribe(() => {
-                this.hideLoadingBar();
-            });
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Show the loading bar
-     */
-    showLoadingBar(): void
-    {
-        // Show
-        this._visible.next(true);
-    }
-
-    /**
-     * Hide the loading bar
-     */
-    hideLoadingBar(): void
-    {
-        // Hide
-        this._visible.next(false);
-    }
-}
-

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

@@ -2,50 +2,22 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-@Injectable({
-    providedIn: 'root'
-})
+@Injectable()
 export class FuseMatchMediaService
 {
     activeMediaQuery: string;
     onMediaChange: BehaviorSubject<string> = new BehaviorSubject<string>('');
 
-    /**
-     * Constructor
-     *
-     * @param {ObservableMedia} _observableMedia
-     */
-    constructor(
-        private _observableMedia: ObservableMedia
-    )
+    constructor(private observableMedia: ObservableMedia)
     {
-        // Set the defaults
         this.activeMediaQuery = '';
 
-        // Initialize
-        this._init();
-
+        this.observableMedia.subscribe((change: MediaChange) => {
+            if ( this.activeMediaQuery !== change.mqAlias )
+            {
+                this.activeMediaQuery = change.mqAlias;
+                this.onMediaChange.next(change.mqAlias);
+            }
+        });
     }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Initialize
-     *
-     * @private
-     */
-    private _init(): void
-    {
-        this._observableMedia
-            .subscribe((change: MediaChange) => {
-                if ( this.activeMediaQuery !== change.mqAlias )
-                {
-                    this.activeMediaQuery = change.mqAlias;
-                    this.onMediaChange.next(change.mqAlias);
-                }
-            });
-    }
-
 }

src/@fuse/services/splash-screen.service.ts

@@ -3,50 +3,26 @@ import { DOCUMENT } from '@angular/common';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { NavigationEnd, Router } from '@angular/router';
 
-@Injectable({
-    providedIn: 'root'
-})
+@Injectable()
 export class FuseSplashScreenService
 {
-    splashScreenEl: any;
-    player: AnimationPlayer;
+    splashScreenEl;
+    public player: AnimationPlayer;
 
-    /**
-     * Constructor
-     *
-     * @param {AnimationBuilder} _animationBuilder
-     * @param _document
-     * @param {Router} _router
-     */
     constructor(
-        private _animationBuilder: AnimationBuilder,
-        @Inject(DOCUMENT) private _document: any,
-        private _router: Router
+        private animationBuilder: AnimationBuilder,
+        @Inject(DOCUMENT) private document: any,
+        private router: Router
     )
-    {
-        // Initialize
-        this._init();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Initialize
-     *
-     * @private
-     */
-    private _init(): void
     {
         // Get the splash screen element
-        this.splashScreenEl = this._document.body.querySelector('#fuse-splash-screen');
+        this.splashScreenEl = this.document.body.querySelector('#fuse-splash-screen');
 
         // If the splash screen element exists...
         if ( this.splashScreenEl )
         {
             // Hide it on the first NavigationEnd event
-            const hideOnLoad = this._router.events.subscribe((event) => {
+            const hideOnLoad = this.router.events.subscribe((event) => {
                     if ( event instanceof NavigationEnd )
                     {
                         setTimeout(() => {
@@ -62,17 +38,10 @@ export class FuseSplashScreenService
         }
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Show the splash screen
-     */
-    show(): void
+    show()
     {
         this.player =
-            this._animationBuilder
+            this.animationBuilder
                 .build([
                     style({
                         opacity: '0',
@@ -86,13 +55,10 @@ export class FuseSplashScreenService
         }, 0);
     }
 
-    /**
-     * Hide the splash screen
-     */
-    hide(): void
+    hide()
     {
         this.player =
-            this._animationBuilder
+            this.animationBuilder
                 .build([
                     style({opacity: '1'}),
                     animate('400ms ease', style({

src/@fuse/services/translation-loader.service.ts

@@ -7,39 +7,21 @@ export interface Locale
     data: Object;
 }
 
-@Injectable({
-    providedIn: 'root'
-})
+@Injectable()
 export class FuseTranslationLoaderService
 {
-    /**
-     * Constructor
-     *
-     * @param {TranslateService} _translateService
-     */
-    constructor(
-        private _translateService: TranslateService
-    )
+    constructor(private translate: TranslateService)
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Load translations
-     *
-     * @param {Locale} args
-     */
-    loadTranslations(...args: Locale[]): void
+    public loadTranslations(...args: Locale[]): void
     {
         const locales = [...args];
 
         locales.forEach((locale) => {
             // use setTranslation() with the third argument set to true
             // to append translations instead of replacing them
-            this._translateService.setTranslation(locale.lang, locale.data, true);
+            this.translate.setTranslation(locale.lang, locale.data, true);
         });
     }
 }

src/@fuse/types/fuse-config.ts

@@ -1,25 +0,0 @@
-export interface FuseConfig
-{
-    layout: {
-        style: string,
-        width: 'fullwidth' | 'boxed',
-        navbar: {
-            background: string,
-            hidden: boolean,
-            folded: boolean,
-            position: 'left' | 'right' | 'top',
-            variant: string
-        },
-        toolbar: {
-            background: string,
-            hidden: boolean,
-            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
-        }
-        footer: {
-            background: string,
-            hidden: boolean,
-            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
-        }
-    };
-    customScrollbars: boolean;
-}

src/@fuse/types/fuse-navigation.ts

@@ -1,27 +0,0 @@
-export interface FuseNavigationItem
-{
-    id: string;
-    title: string;
-    type: 'item' | 'group' | 'collapsable';
-    translate?: string;
-    icon?: string;
-    hidden?: boolean;
-    url?: string;
-    classes?: string;
-    exactMatch?: boolean;
-    externalUrl?: boolean;
-    openInNewTab?: boolean;
-    function?: any;
-    badge?: {
-        title?: string;
-        translate?: string;
-        bg?: string;
-        fg?: string;
-    };
-    children?: FuseNavigationItem[];
-}
-
-export interface FuseNavigation extends FuseNavigationItem
-{
-    children?: FuseNavigationItem[];
-}

src/@fuse/types/index.ts

@@ -1,2 +0,0 @@
-export * from './fuse-config';
-export * from './fuse-navigation';

src/@fuse/utils/index.ts

@@ -1,13 +1,6 @@
 export class FuseUtils
 {
-    /**
-     * Filter array by string
-     *
-     * @param mainArr
-     * @param searchText
-     * @returns {any}
-     */
-    public static filterArrayByString(mainArr, searchText): any
+    public static filterArrayByString(mainArr, searchText)
     {
         if ( searchText === '' )
         {
@@ -21,14 +14,7 @@ export class FuseUtils
         });
     }
 
-    /**
-     * Search in object
-     *
-     * @param itemObj
-     * @param searchText
-     * @returns {boolean}
-     */
-    public static searchInObj(itemObj, searchText): boolean
+    public static searchInObj(itemObj, searchText)
     {
         for ( const prop in itemObj )
         {
@@ -65,14 +51,7 @@ export class FuseUtils
         }
     }
 
-    /**
-     * Search in array
-     *
-     * @param arr
-     * @param searchText
-     * @returns {boolean}
-     */
-    public static searchInArray(arr, searchText): boolean
+    public static searchInArray(arr, searchText)
     {
         for ( const value of arr )
         {
@@ -94,26 +73,14 @@ export class FuseUtils
         }
     }
 
-    /**
-     * Search in string
-     *
-     * @param value
-     * @param searchText
-     * @returns {any}
-     */
-    public static searchInString(value, searchText): any
+    public static searchInString(value, searchText)
     {
         return value.toLowerCase().includes(searchText);
     }
 
-    /**
-     * Generate a unique GUID
-     *
-     * @returns {string}
-     */
-    public static generateGUID(): string
+    public static generateGUID()
     {
-        function S4(): string
+        function S4()
         {
             return Math.floor((1 + Math.random()) * 0x10000)
                        .toString(16)
@@ -123,13 +90,7 @@ export class FuseUtils
         return S4() + S4();
     }
 
-    /**
-     * Toggle in array
-     *
-     * @param item
-     * @param array
-     */
-    public static toggleInArray(item, array): void
+    public static toggleInArray(item, array)
     {
         if ( array.indexOf(item) === -1 )
         {
@@ -141,13 +102,7 @@ export class FuseUtils
         }
     }
 
-    /**
-     * Handleize
-     *
-     * @param text
-     * @returns {string}
-     */
-    public static handleize(text): string
+    public static handleize(text)
     {
         return text.toString().toLowerCase()
                    .replace(/\s+/g, '-')           // Replace spaces with -

src/app/app.component.html

@@ -1,29 +1 @@
-<!-- VERTICAL LAYOUT 1 -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
-    <vertical-layout-1></vertical-layout-1>
-</ng-container>
-
-<!-- VERTICAL LAYOUT 2 -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-2'">
-    <vertical-layout-2></vertical-layout-2>
-</ng-container>
-
-<!-- VERTICAL LAYOUT 3 -->
-<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
-    <vertical-layout-3></vertical-layout-3>
-</ng-container>
-
-<!-- HORIZONTAL LAYOUT 1 -->
-<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
-    <horizontal-layout-1></horizontal-layout-1>
-</ng-container>
-
-<!-- THEME OPTIONS PANEL -->
-<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
-        (click)="toggleSidebarOpen('themeOptionsPanel')">
-    <mat-icon>settings</mat-icon>
-</button>
-
-<fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
-    <fuse-theme-options></fuse-theme-options>
-</fuse-sidebar>
+<fuse-main></fuse-main>

src/app/app.component.scss

@@ -1,44 +0,0 @@
-@import "src/@fuse/scss/fuse";
-
-:host {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-
-    .theme-options-button {
-        position: absolute;
-        top: 160px;
-        right: 70px;
-        width: 48px;
-        height: 48px;
-        line-height: 48px;
-        text-align: center;
-        cursor: pointer;
-        border-radius: 0;
-        margin: 0;
-        pointer-events: auto;
-        opacity: .90;
-        z-index: 998;
-
-        @include media-breakpoint-down('md') {
-            right: 0;
-        }
-
-        mat-icon {
-            animation: rotating 3s linear infinite;
-        }
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    .theme-options-sidebar {
-        width: 360px;
-        min-width: 360px;
-        max-width: 360px;
-    }
-}

src/app/app.component.ts

@@ -1,125 +1,37 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { Platform } from '@angular/cdk/platform';
+import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 
-import { FuseConfigService } from '@fuse/services/config.service';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
 import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
-import { navigation } from 'app/navigation/navigation';
-import { locale as navigationEnglish } from 'app/navigation/i18n/en';
-import { locale as navigationTurkish } from 'app/navigation/i18n/tr';
+import { locale as navigationEnglish } from './navigation/i18n/en';
+import { locale as navigationTurkish } from './navigation/i18n/tr';
 
 @Component({
-    selector   : 'app',
+    selector   : 'fuse-root',
     templateUrl: './app.component.html',
     styleUrls  : ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy
+export class AppComponent
 {
-    navigation: any;
-    fuseConfig: any;
-
-    // Private
-    private _unsubscribeAll: Subject<any>;
-
-    /**
-     * Constructor
-     *
-     * @param {DOCUMENT} document
-     * @param {FuseConfigService} _fuseConfigService
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {FuseSplashScreenService} _fuseSplashScreenService
-     * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
-     * @param {Platform} _platform
-     * @param {TranslateService} _translateService
-     */
     constructor(
-        @Inject(DOCUMENT) private document: any,
-        private _fuseConfigService: FuseConfigService,
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _fuseSplashScreenService: FuseSplashScreenService,
-        private _fuseTranslationLoaderService: FuseTranslationLoaderService,
-        private _translateService: TranslateService,
-        private _platform: Platform
+        private translate: TranslateService,
+        private fuseNavigationService: FuseNavigationService,
+        private fuseSplashScreen: FuseSplashScreenService,
+        private fuseTranslationLoader: FuseTranslationLoaderService
     )
     {
-        // Get default navigation
-        this.navigation = navigation;
-
-        // Register the navigation to the service
-        this._fuseNavigationService.register('main', this.navigation);
-
-        // Set the main navigation as our current navigation
-        this._fuseNavigationService.setCurrentNavigation('main');
-
         // Add languages
-        this._translateService.addLangs(['en', 'tr']);
+        this.translate.addLangs(['en', 'tr']);
 
         // Set the default language
-        this._translateService.setDefaultLang('en');
+        this.translate.setDefaultLang('en');
 
         // Set the navigation translations
-        this._fuseTranslationLoaderService.loadTranslations(navigationEnglish, navigationTurkish);
+        this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish);
 
         // Use a language
-        this._translateService.use('en');
-
-        // Add is-mobile class to the body if the platform is mobile
-        if ( this._platform.ANDROID || this._platform.IOS )
-        {
-            this.document.body.className += ' is-mobile';
-        }
-
-        // 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
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle sidebar open
-     *
-     * @param key
-     */
-    toggleSidebarOpen(key): void
-    {
-        this._fuseSidebarService.getSidebar(key).toggleOpen();
+        this.translate.use('en');
     }
 }

src/app/app.module.ts

@@ -3,47 +3,22 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatButtonModule, MatIconModule } from '@angular/material';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { TranslateModule } from '@ngx-translate/core';
 import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 
-import { fuseConfig } from 'app/fuse-config';
+import { fuseConfig } from './fuse-config';
 
-import { FakeDbService } from 'app/fake-db/fake-db.service';
-import { AppComponent } from 'app/app.component';
-import { AppStoreModule } from 'app/store/store.module';
-import { LayoutModule } from 'app/layout/layout.module';
+import { AppComponent } from './app.component';
+import { FuseMainModule } from './main/main.module';
+import { FuseSampleModule } from './main/content/sample/sample.module';
 
 const appRoutes: Routes = [
-    {
-        path        : 'apps',
-        loadChildren: './main/apps/apps.module#AppsModule'
-    },
-    {
-        path        : 'pages',
-        loadChildren: './main/pages/pages.module#PagesModule'
-    },
-    {
-        path        : 'ui',
-        loadChildren: './main/ui/ui.module#UIModule'
-    },
-    {
-        path        : 'documentation',
-        loadChildren: './main/documentation/documentation.module#DocumentationModule'
-    },
-    {
-        path        : 'angular-material-elements',
-        loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
-    },
     {
         path      : '**',
-        redirectTo: 'apps/dashboards/analytics'
+        redirectTo: 'sample'
     }
 ];
 
@@ -56,29 +31,13 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         HttpClientModule,
         RouterModule.forRoot(appRoutes),
-
         TranslateModule.forRoot(),
-        InMemoryWebApiModule.forRoot(FakeDbService, {
-            delay             : 0,
-            passThruUnknownUrl: true
-        }),
 
-        // Material moment date module
-        MatMomentDateModule,
-
-        // Material
-        MatButtonModule,
-        MatIconModule,
-
-        // Fuse modules
+        // Fuse Main and Shared modules
         FuseModule.forRoot(fuseConfig),
         FuseSharedModule,
-        FuseSidebarModule,
-        FuseThemeOptionsModule,
-
-        // App modules
-        LayoutModule,
-        AppStoreModule
+        FuseMainModule,
+        FuseSampleModule
     ],
     bootstrap   : [
         AppComponent

src/app/fake-db/academy.ts

@@ -1,773 +0,0 @@
-export class AcademyFakeDb
-{
-    public static courses = [
-        {
-            'id'      : '15459251a6d6b397565',
-            'title'   : 'Basics of Angular',
-            'slug'    : 'basics-of-angular',
-            'category': 'web',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154588a0864d2881124',
-            'title'   : 'Basics of TypeScript',
-            'slug'    : 'basics-of-typeScript',
-            'category': 'web',
-            'length'  : 60,
-            'updated' : 'Nov 01, 2017'
-        },
-        {
-            'id'      : '15453ba60d3baa5daaf',
-            'title'   : 'Android N: Quick Settings',
-            'slug'    : 'android-n-quick-settings',
-            'category': 'android',
-            'length'  : 120,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '15453a06c08fb021776',
-            'title'   : 'Keep Sensitive Data Safe and Private',
-            'slug'    : 'keep-sensitive-data-safe-and-private',
-            'category': 'android',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '15427f4c1b7f3953234',
-            'title'   : 'Building a gRPC Service with Java',
-            'slug'    : 'building-a-grpc-service-with-java',
-            'category': 'cloud',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1542d75d929a603125',
-            'title'   : 'Build a PWA Using Workbox',
-            'slug'    : 'build-a-pwa-using-workbox',
-            'category': 'web',
-            'length'  : 120,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1543ee3a5b43e0f9f45',
-            'title'   : 'Build an App for the Google Assistant with Firebase and Dialogflow',
-            'slug'    : 'build-an-app-for-the-google-assistant-with-firebase-and-dialogflow',
-            'category': 'firebase',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1543cc4515df3146112',
-            'title'   : 'Cloud Functions for Firebase',
-            'slug'    : 'cloud-functions-for-firebase',
-            'category': 'firebase',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154398a4770d7aaf9a2',
-            'title'   : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
-            'slug'    : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
-            'category': 'cloud',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '15438351f87dcd68567',
-            'title'   : 'Building Beautiful UIs with Flutter',
-            'your'    : 'building-beautiful-uis-with-flutter',
-            'category': 'web',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1544e43dcdae6ebf876',
-            'title'   : 'Cloud Firestore',
-            'slug'    : 'cloud-firestore',
-            'category': 'firebase',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1541ca7af66da284177',
-            'title'   : 'Customize Network Topology with Subnetworks',
-            'slug'    : 'customize-network-topology-with-subnetworks',
-            'category': 'web',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154297167e781781745',
-            'title'   : 'Looking at Campaign Finance with BigQuery',
-            'slug'    : 'looking-at-campaign-finance-with-bigquery',
-            'category': 'cloud',
-            'length'  : 60,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154537435d5b32bf11a',
-            'title'   : 'Firebase Android',
-            'slug'    : 'firebase-android',
-            'category': 'android',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '154204e45a59b168453',
-            'title'   : 'Simulating a Thread Network Using OpenThread',
-            'slug'    : 'simulating-a-thread-network-using-openthread',
-            'category': 'web',
-            'length'  : 45,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1541dd1e05dfc439216',
-            'title'   : 'Your First Progressive Web App',
-            'slug'    : 'your-first-progressive-web-app',
-            'category': 'web',
-            'length'  : 30,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1532dfc67e704e48515',
-            'title'   : 'Launch Cloud Datalab',
-            'slug'    : 'launch-cloud-datalab',
-            'category': 'cloud',
-            'length'  : 60,
-            'updated' : 'Jun 28, 2017'
-        },
-        {
-            'id'      : '1542e43dfaae6ebf226',
-            'title'   : 'Personalize Your iOS App with Firebase User Management',
-            'slug'    : 'personalize-your-ios-app-with-firebase-user-management',
-            'category': 'firebase',
-            'length'  : 90,
-            'updated' : 'Jun 28, 2017'
-        }
-    ];
-
-    public static categories = [
-        {
-            'id'   : 0,
-            'value': 'web',
-            'label': 'Web'
-        },
-        {
-            'id'   : 1,
-            'value': 'firebase',
-            'label': 'Firebase'
-        },
-        {
-            'id'   : 2,
-            'value': 'cloud',
-            'label': 'Cloud'
-        },
-        {
-            'id'   : 3,
-            'value': 'android',
-            'label': 'Android'
-        }
-    ];
-
-    private static demoSteps = [
-        {
-            'title'  : 'Introduction',
-            'content': '<h1>Step 1 - Introduction</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Get the sample code',
-            'content': '<h1>Step 2 - Get the sample code</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Create a Firebase project and Set up your app',
-            'content': '<h1>Step 3 - Create a Firebase project and Set up your app</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Install the Firebase Command Line Interface',
-            'content': '<h1>Step 4 - Install the Firebase Command Line Interface</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Deploy and run the web app',
-            'content': '<h1>Step 5 - Deploy and run the web app</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'The Functions Directory',
-            'content': '<h1>Step 6 - The Functions Directory</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Import the Cloud Functions and Firebase Admin modules',
-            'content': '<h1>Step 7 - Import the Cloud Functions and Firebase Admin modules</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Welcome New Users',
-            'content': '<h1>Step 8 - Welcome New Users</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Images moderation',
-            'content': '<h1>Step 9 - Images moderation</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'New Message Notifications',
-            'content': '<h1>Step 10 - New Message Notifications</h1>' +
-            '<br>' +
-            'This is an example step of the course. You can put anything in here from example codes to videos.' +
-            '<br><br>' +
-            'To install the CLI you need to have installed <b>npm</b> which typically comes with <b>NodeJS</b>.' +
-            'To install or upgrade the CLI run the following <b>npm</b> command:' +
-            '<br><br>' +
-            '<code>npm -g install @angular/cli</code>' +
-            '<br><br>' +
-            'To verify that the CLI has been installed correctly, open a console and run:' +
-            '<br><br>' +
-            '<code>ng version</code>' +
-            '<br><br>' +
-            '<h2>Install dependencies</h2>' +
-            '<br>' +
-            'To moderate the images we\'ll need a few Node.js packages:' +
-            '<br><br>' +
-            '<ul>' +
-            '<li>' +
-            'The Google Cloud Vision Client Library for Node.js: @google-cloud/vision to run the image through the Cloud Vision API to detect inappropriate images.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'The Google Cloud Storage Client Library for Node.js: @google-cloud/storage to download and upload the images from Cloud Storage.' +
-            '</li>' +
-            '<br>' +
-            '<li>' +
-            'A Node.js library allowing us to run processes: child-process-promise to run ImageMagick since the ImageMagick command-line tool comes pre-installed on all Functions instances.' +
-            '</li>' +
-            '</ul>' +
-            '<br>' +
-            'To install these three packages into your Cloud Functions app, run the following npm install --save command. Make sure that you do this from the functions directory.' +
-            '<br><br>' +
-            '<code>npm install --save @google-cloud/vision @google-cloud/storage child-process-promise</code>' +
-            '<br><br>' +
-            'This will install the three packages locally and add them as declared dependencies in your package.js file.'
-        },
-        {
-            'title'  : 'Congratulations!',
-            'content': '<h1>Step 11 - Congratulations!</h1>' +
-            '<br>' +
-            'You\'ve built a full-fidelity, offline-capable progressive web app by leveraging the power of reusable Web Components and Firebase. Why bother with a native app when you know how to do all that?!'
-        }
-    ];
-
-    public static course = [
-        {
-            'id'         : '15459251a6d6b397565',
-            'title'      : 'Basics of Angular',
-            'slug'       : 'basics-of-angular',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154588a0864d2881124',
-            'title'      : 'Basics of TypeScript',
-            'slug'       : 'basics-of-typeScript',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 60,
-            'totalSteps' : 11,
-            'updated'    : 'Nov 01, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15453ba60d3baa5daaf',
-            'title'      : 'Android N: Quick Settings',
-            'slug'       : 'android-n-quick-settings',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'android',
-            'length'     : 120,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15453a06c08fb021776',
-            'title'      : 'Keep Sensitive Data Safe and Private',
-            'slug'       : 'keep-sensitive-data-safe-and-private',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'android',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15427f4c1b7f3953234',
-            'title'      : 'Building a gRPC Service with Java',
-            'slug'       : 'building-a-grpc-service-with-java',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1542d75d929a603125',
-            'title'      : 'Build a PWA Using Workbox',
-            'slug'       : 'build-a-pwa-using-workbox',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 120,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1543ee3a5b43e0f9f45',
-            'title'      : 'Build an App for the Google Assistant with Firebase and Dialogflow',
-            'slug'       : 'build-an-app-for-the-google-assistant-with-firebase-and-dialogflow',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1543cc4515df3146112',
-            'title'      : 'Cloud Functions for Firebase',
-            'slug'       : 'cloud-functions-for-firebase',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154398a4770d7aaf9a2',
-            'title'      : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
-            'slug'       : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '15438351f87dcd68567',
-            'title'      : 'Building Beautiful UIs with Flutter',
-            'your'       : 'building-beautiful-uis-with-flutter',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1544e43dcdae6ebf876',
-            'title'      : 'Cloud Firestore',
-            'slug'       : 'cloud-firestore',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1541ca7af66da284177',
-            'title'      : 'Customize Network Topology with Subnetworks',
-            'slug'       : 'customize-network-topology-with-subnetworks',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154297167e781781745',
-            'title'      : 'Looking at Campaign Finance with BigQuery',
-            'slug'       : 'looking-at-campaign-finance-with-bigquery',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 60,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154537435d5b32bf11a',
-            'title'      : 'Firebase Android',
-            'slug'       : 'firebase-android',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'android',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '154204e45a59b168453',
-            'title'      : 'Simulating a Thread Network Using OpenThread',
-            'slug'       : 'simulating-a-thread-network-using-openthread',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 45,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1541dd1e05dfc439216',
-            'title'      : 'Your First Progressive Web App',
-            'slug'       : 'your-first-progressive-web-app',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'web',
-            'length'     : 30,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1532dfc67e704e48515',
-            'title'      : 'Launch Cloud Datalab',
-            'slug'       : 'launch-cloud-datalab',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'cloud',
-            'length'     : 60,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        },
-        {
-            'id'         : '1542e43dfaae6ebf226',
-            'title'      : 'Personalize Your iOS App with Firebase User Management',
-            'slug'       : 'personalize-your-ios-app-with-firebase-user-management',
-            'description': 'Commits that need to be pushed lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            'category'   : 'firebase',
-            'length'     : 90,
-            'totalSteps' : 11,
-            'updated'    : 'Jun 28, 2017',
-            'steps'      : AcademyFakeDb.demoSteps
-        }
-    ];
-
-}

src/app/fake-db/calendar.ts

@@ -1,97 +0,0 @@
-import {
-    startOfDay,
-    endOfDay,
-    subDays,
-    addDays,
-    endOfMonth,
-    isSameDay,
-    isSameMonth,
-    addHours
-} from 'date-fns';
-
-export class CalendarFakeDb
-{
-
-    public static data = [
-        {
-            id  : 'events',
-            data: [
-                {
-                    start    : subDays(startOfDay(new Date()), 1),
-                    end      : addDays(new Date(), 1),
-                    title    : 'A 3 day event',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#ad2121',
-                        secondary: '#FAE3E3'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                },
-                {
-                    start    : startOfDay(new Date()),
-                    title    : 'An event with no end date',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#e3bc08',
-                        secondary: '#FDF1BA'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                },
-                {
-                    start    : subDays(endOfMonth(new Date()), 3),
-                    end      : addDays(endOfMonth(new Date()), 3),
-                    title    : 'A long event that spans 2 months',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#1e90ff',
-                        secondary: '#D1E8FF'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                },
-                {
-                    start    : addHours(startOfDay(new Date()), 2),
-                    end      : new Date(),
-                    title    : 'A draggable and resizable event',
-                    allDay   : false,
-                    color    : {
-                        primary  : '#e3bc08',
-                        secondary: '#FDF1BA'
-                    },
-                    resizable: {
-                        beforeStart: true,
-                        afterEnd   : true
-                    },
-                    draggable: true,
-                    meta     : {
-                        location: 'Los Angeles',
-                        notes   : 'Eos eu verear adipiscing, ex ornatus denique iracundia sed, quodsi oportere appellantur an pri.'
-                    }
-                }
-            ]
-        }
-    ];
-}

src/app/fake-db/chat-panel.ts

@@ -1,343 +0,0 @@
-export class ChatPanelFakeDb
-{
-    public static contacts = [
-        {
-            'id'    : '5725a680b3249760ea21de52',
-            'name'  : 'Alice Freeman',
-            'avatar': 'assets/images/avatars/alice.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '2'
-        },
-        {
-            'id'    : '5725a680606588342058356d',
-            'name'  : 'Arnold',
-            'avatar': 'assets/images/avatars/Arnold.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68009e20d0a9e9acf2a',
-            'name'  : 'Barrera',
-            'avatar': 'assets/images/avatars/Barrera.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6809fdd915739187ed5',
-            'name'  : 'Blair',
-            'avatar': 'assets/images/avatars/Blair.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '3'
-        },
-        {
-            'id'    : '5725a68007920cf75051da64',
-            'name'  : 'Boyle',
-            'avatar': 'assets/images/avatars/Boyle.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '1'
-        },
-        {
-            'id'    : '5725a68031fdbb1db2c1af47',
-            'name'  : 'Christy',
-            'avatar': 'assets/images/avatars/Christy.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680bc670af746c435e2',
-            'name'  : 'Copeland',
-            'avatar': 'assets/images/avatars/Copeland.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680e7eb988a58ddf303',
-            'name'  : 'Estes',
-            'avatar': 'assets/images/avatars/Estes.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680dcb077889f758961',
-            'name'  : 'Harper',
-            'avatar': 'assets/images/avatars/Harper.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6806acf030f9341e925',
-            'name'  : 'Helen',
-            'avatar': 'assets/images/avatars/Helen.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680ae1ae9a3c960d487',
-            'name'  : 'Henderson',
-            'avatar': 'assets/images/avatars/Henderson.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680b8d240c011dd224b',
-            'name'  : 'Josefina',
-            'avatar': 'assets/images/avatars/Josefina.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68034cb3968e1f79eac',
-            'name'  : 'Katina',
-            'avatar': 'assets/images/avatars/Katina.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6801146cce777df2a08',
-            'name'  : 'Lily',
-            'avatar': 'assets/images/avatars/Lily.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '10'
-        },
-        {
-            'id'    : '5725a6808a178bfd034d6ecf',
-            'name'  : 'Mai',
-            'avatar': 'assets/images/avatars/Mai.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680653c265f5c79b5a9',
-            'name'  : 'Nancy',
-            'avatar': 'assets/images/avatars/Nancy.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680bbcec3cc32a8488a',
-            'name'  : 'Nora',
-            'avatar': 'assets/images/avatars/Nora.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '7'
-        },
-        {
-            'id'    : '5725a6803d87f1b77e17b62b',
-            'name'  : 'Odessa',
-            'avatar': 'assets/images/avatars/Odessa.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
-            'unread': '1'
-        },
-        {
-            'id'    : '5725a680e87cb319bd9bd673',
-            'name'  : 'Reyna',
-            'avatar': 'assets/images/avatars/Reyna.jpg',
-            'status': 'offline',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6802d10e277a0f35775',
-            'name'  : 'Shauna',
-            'avatar': 'assets/images/avatars/Shauna.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680aef1e5cf26dd3d1f',
-            'name'  : 'Shepard',
-            'avatar': 'assets/images/avatars/Shepard.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a680cd7efa56a45aea5d',
-            'name'  : 'Tillman',
-            'avatar': 'assets/images/avatars/Tillman.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : '',
-            'unread': '99+'
-        },
-        {
-            'id'    : '5725a680fb65c91a82cb35e2',
-            'name'  : 'Trevino',
-            'avatar': 'assets/images/avatars/Trevino.jpg',
-            'status': 'away',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a68018c663044be49cbf',
-            'name'  : 'Tyson',
-            'avatar': 'assets/images/avatars/Tyson.jpg',
-            'status': 'do-not-disturb',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        },
-        {
-            'id'    : '5725a6809413bf8a0a5272b1',
-            'name'  : 'Velazquez',
-            'avatar': 'assets/images/avatars/Velazquez.jpg',
-            'status': 'online',
-            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
-        }
-    ];
-
-    public static chats = [
-        {
-            'id'    : '1725a680b3249760ea21de52',
-            'dialog': [
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
-                    'time'   : '2017-03-22T08:54:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
-                    'time'   : '2017-03-22T08:55:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
-                    'time'   : '2017-03-22T08:55:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:00:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:02:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:05:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:15:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:05:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:15:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:20:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:22:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:25:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:27:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:33:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T09:33:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-03-22T09:35:28.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
-                    'time'   : '2017-03-22T09:45:28.299Z'
-                },
-                {
-                    'who'    : '5725a680b3249760ea21de52',
-                    'message': 'You are the worst!',
-                    'time'   : '2017-03-22T10:00:28.299Z'
-                }
-            ]
-        },
-        {
-            'id'    : '2725a680b8d240c011dd2243',
-            'dialog': [
-                {
-                    'who'    : '5725a680606588342058356d',
-                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
-                    'time'   : '2017-04-22T01:00:00.299Z'
-                },
-                {
-                    'who'    : '5725a6802d10e277a0f35724',
-                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
-                    'time'   : '2017-04-22T01:05:00.299Z'
-                },
-                {
-                    'who'    : '5725a680606588342058356d',
-                    'message': 'We are losing money! Quick!',
-                    'time'   : '2017-04-22T01:10:00.299Z'
-                }
-            ]
-        },
-        {
-            'id'    : '3725a6809413bf8a0a5272b4',
-            'dialog': [
-                {
-                    'who'    : '5725a68009e20d0a9e9acf2a',
-                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
-                    'time'   : '2017-04-22T02:10:00.299Z'
-                }
-            ]
-        }
-    ];
-
-    public static user = [
-        {
-            'id'      : '5725a6802d10e277a0f35724',
-            'name'    : 'John Doe',
-            'avatar'  : 'assets/images/avatars/profile.jpg',
-            'status'  : 'online',
-            'mood'    : '',
-            'chatList': [
-                {
-                    'chatId'         : '1725a680b3249760ea21de52',
-                    'contactId'      : '5725a680b3249760ea21de52',
-                    'lastMessageTime': '2017-06-12T02:10:18.931Z'
-                },
-                {
-                    'chatId'         : '2725a680b8d240c011dd2243',
-                    'contactId'      : '5725a680606588342058356d',
-                    'lastMessageTime': '2017-02-18T10:30:18.931Z'
-                },
-                {
-                    'chatId'         : '3725a6809413bf8a0a5272b4',
-                    'contactId'      : '5725a68009e20d0a9e9acf2a',
-                    'lastMessageTime': '2017-03-18T12:30:18.931Z'
-                }
-            ]
-        }
-    ];
-
-}