Merge branch 'master' into skeleton

README.md

@@ -6,7 +6,7 @@ Material Design Admin Template with Angular 5+ and Angular Material 2
 
 Share your ideas, discuss Fuse and help each other.
 
-[Click here](https://join.slack.com/t/fuse-theme/shared_invite/enQtMzA1NDE4NzYwMjcyLWQxODE4ODM1MWU4MWJjMDhlMGEwYzM4Mzg3N2E4YzVlZThhZjNlOTQ1Y2Q5OTBlNDNkMzJhZDIwMjgxOWQ3YWU) to join our Slack workspace.
+[Click here](http://fusetheme.com/community) to see our Community page.
 
 ## Development server
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "fuse2",
+  "name": "fuse",
-  "version": "1.3.6",
+  "version": "5.2.8",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,40 +19,40 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.3",
+    "@angular/animations": "5.2.8",
-    "@angular/cdk": "5.1.1",
+    "@angular/cdk": "5.2.4",
-    "@angular/common": "5.2.3",
+    "@angular/common": "5.2.8",
-    "@angular/compiler": "5.2.3",
+    "@angular/compiler": "5.2.8",
-    "@angular/core": "5.2.3",
+    "@angular/core": "5.2.8",
-    "@angular/flex-layout": "2.0.0-beta.12",
+    "@angular/flex-layout": "5.0.0-beta.13",
-    "@angular/forms": "5.2.3",
+    "@angular/forms": "5.2.8",
-    "@angular/http": "5.2.3",
+    "@angular/http": "5.2.8",
-    "@angular/material": "5.1.1",
+    "@angular/material": "5.2.4",
-    "@angular/material-moment-adapter": "5.1.1",
+    "@angular/material-moment-adapter": "5.2.4",
-    "@angular/platform-browser": "5.2.3",
+    "@angular/platform-browser": "5.2.8",
-    "@angular/platform-browser-dynamic": "5.2.3",
+    "@angular/platform-browser-dynamic": "5.2.8",
-    "@angular/router": "5.2.3",
+    "@angular/router": "5.2.8",
-    "@ngrx/effects": "5.0.0",
+    "@ngrx/effects": "5.2.0",
-    "@ngrx/router-store": "5.0.0",
+    "@ngrx/router-store": "5.2.0",
-    "@ngrx/store": "5.0.0",
+    "@ngrx/store": "5.2.0",
-    "@ngrx/store-devtools": "5.0.0",
+    "@ngrx/store-devtools": "5.2.0",
     "@ngx-translate/core": "9.1.1",
-    "@swimlane/ngx-charts": "7.0.1",
+    "@swimlane/ngx-charts": "7.1.1",
-    "@swimlane/ngx-datatable": "11.1.7",
+    "@swimlane/ngx-datatable": "11.2.0",
     "@swimlane/ngx-dnd": "3.1.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.3",
+    "angular-calendar": "0.23.6",
     "angular-in-memory-web-api": "0.5.3",
-    "chart.js": "2.7.1",
+    "chart.js": "2.7.2",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.3",
     "d3": "4.13.0",
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
-    "moment": "2.20.1",
+    "moment": "2.21.0",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.1",
-    "ngx-color-picker": "5.3.1",
+    "ngx-color-picker": "5.3.4",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
     "prismjs": "1.11.0",
@@ -61,25 +61,25 @@
     "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.7",
+    "@angular/cli": "1.7.3",
-    "@angular/compiler-cli": "5.2.3",
+    "@angular/compiler-cli": "5.2.8",
-    "@angular/language-service": "5.2.3",
+    "@angular/language-service": "5.2.8",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.96",
+    "@types/node": "6.0.101",
-    "codelyzer": "4.1.0",
+    "codelyzer": "4.2.1",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "2.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "1.4.1",
+    "karma-coverage-istanbul-reporter": "1.4.2",
     "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.1.2",
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
     "typescript": "2.6.2",
-    "webpack-bundle-analyzer": "2.10.0"
+    "webpack-bundle-analyzer": "2.11.1"
   }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { MatDialogRef } from '@angular/material';
 
 @Component({
@@ -6,7 +6,7 @@ import { MatDialogRef } from '@angular/material';
     templateUrl: './confirm-dialog.component.html',
     styleUrls  : ['./confirm-dialog.component.scss']
 })
-export class FuseConfirmDialogComponent implements OnInit
+export class FuseConfirmDialogComponent
 {
     public confirmMessage: string;
 
@@ -14,8 +14,4 @@ export class FuseConfirmDialogComponent implements OnInit
     {
     }
 
-    ngOnInit()
-    {
-    }
-
 }

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatDialogModule } from '@angular/material';
+
+import { FuseConfirmDialogComponent } from '@fuse/components/confirm-dialog/confirm-dialog.component';
+
+@NgModule({
+    declarations: [
+        FuseConfirmDialogComponent
+    ],
+    imports: [
+        MatDialogModule,
+        MatButtonModule
+    ],
+    entryComponents: [
+        FuseConfirmDialogComponent
+    ],
+})
+export class FuseConfirmDialogModule
+{
+}

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

@@ -1,8 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
-import * as moment from 'moment';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/interval';
 
+import * as moment from 'moment';
+
 @Component({
     selector   : 'fuse-countdown',
     templateUrl: './countdown.component.html',

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseCountdownComponent } from '@fuse/components/countdown/countdown.component';
+
+@NgModule({
+    declarations: [
+        FuseCountdownComponent
+    ],
+    exports: [
+        FuseCountdownComponent
+    ],
+})
+export class FuseCountdownModule
+{
+}

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

@@ -0,0 +1,75 @@
+<!-- DEMO CONTENT -->
+<div class="demo-content">
+
+    <img src="assets/images/beach.jpg" alt="beach" style="max-width: 640px; width: 100%;">
+
+    <h1>Early Sunrise</h1>
+    <h4 class="secondary-text">Demo Content</h4>
+
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec,
+        auctor venenatis nisl. Suspendisse potenti. Nullam sagittis nulla in diam finibus, sed pharetra velit
+        vestibulum. Suspendisse euismod in urna eu posuere.
+    </p>
+
+    <blockquote>
+        <p>
+            Nunc vel lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus
+            et tortor id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante
+            sollicitudin. Donec viverra augue dolor, a venenatis tellus consectetur sit amet.
+        </p>
+        <footer>
+            John Doe
+        </footer>
+    </blockquote>
+
+    <p>
+        Ut ornare sit amet velit vel congue. Ut nec tristique eros. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Vivamus sed lorem quis nibh porta iaculis. Vestibulum ut eleifend ante, at semper mi. Nam imperdiet est
+        nisi, quis hendrerit tellus convallis et. Morbi in luctus neque. Curabitur elementum ut est et gravida. In hac
+        habitasse platea dictumst.
+    </p>
+
+    <p>
+        In et placerat eros, eu tempor turpis. Curabitur ac felis finibus, elementum lectus vitae, venenatis est.
+        Integer mollis nisl a eros scelerisque varius. Etiam venenatis lectus vel erat condimentum tristique vel vel mi.
+        Nulla id euismod mi, et mollis tellus.
+    </p>
+
+    <p>
+        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti
+        sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae sagittis odio.
+        Suspendisse ullamcorper nunc non pellentesque laoreet. Curabitur eu tortor id quam pretium mattis. Proin ut quam
+        velit.
+    </p>
+
+    <p>
+        Quisque sit amet risus enim. Aliquam sit amet interdum justo, at ultricies sapien. Suspendisse et semper urna,
+        in gravida eros. Quisque id nibh iaculis, euismod urna sed, egestas nisi. Donec eros metus, congue a imperdiet
+        feugiat, sagittis nec ipsum. Quisque dapibus mollis felis non tristique.
+    </p>
+
+    <p>
+        Ut auctor, metus sed dapibus tempus, urna diam auctor odio, in malesuada odio risus vitae nisi. Etiam blandit
+        ante urna, vitae placerat massa mollis in. Duis nec urna ac purus semper dictum ut eget justo. Aenean non
+        sagittis augue. Sed venenatis rhoncus enim eget ornare. Donec viverra sed felis at venenatis. Mauris aliquam
+        fringilla nulla, sit amet congue felis dignissim at.
+    </p>
+
+    <p>
+        Quisque accumsan augue tempor ante mollis, sed placerat diam porttitor. Vestibulum dignissim sem vel velit
+        eleifend, non pellentesque quam convallis. Pellentesque est dolor, dignissim ac tortor tristique, hendrerit
+        iaculis metus. Praesent pulvinar quam eu leo consectetur faucibus. Vestibulum purus diam, gravida sagittis
+        feugiat sit amet, tincidunt in ligula. Sed semper vestibulum magna. Lorem ipsum dolor sit amet, consectetur
+        adipiscing elit. Suspendisse tortor nibh, convallis sed purus nec, auctor venenatis nisl. Suspendisse potenti.
+    </p>
+
+    <p>
+        Nullam sagittis nulla in diam finibus, sed pharetra velit vestibulum. Suspendisse euismod in urna eu posuere.
+        Etiam blandit nunc arcu, et consectetur orci blandit a. Aliquam condimentum pharetra quam at ultricies. Nunc vel
+        lacinia lorem. Nullam tincidunt sed purus eu placerat. Donec id dictum erat. Etiam enim ex, dapibus et tortor
+        id, posuere pretium est. Maecenas fringilla ipsum vitae neque elementum, at eleifend ante sollicitudin. Donec
+        viverra augue dolor, a venenatis tellus consectetur sit amet...
+    </p>
+</div>
+<!-- / DEMO CONTENT -->

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

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
+
+import { MatDividerModule, MatListModule } from '@angular/material';
+
 import { FuseDemoContentComponent } from './demo-content/demo-content.component';
 import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component';
 
@@ -10,8 +12,10 @@ import { FuseDemoSidenavComponent } from './demo-sidenav/demo-sidenav.component'
         FuseDemoSidenavComponent
     ],
     imports     : [
-        SharedModule,
+        RouterModule,
-        RouterModule
+
+        MatDividerModule,
+        MatListModule
     ],
     exports     : [
         FuseDemoContentComponent,

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseHighlightComponent } from '@fuse/components/highlight/highlight.component';
+
+@NgModule({
+    declarations: [
+        FuseHighlightComponent
+    ],
+    exports: [
+        FuseHighlightComponent
+    ],
+})
+export class FuseHighlightModule
+{
+}

src/@fuse/components/index.ts

@@ -0,0 +1,11 @@
+export * from './confirm-dialog/confirm-dialog.module';
+export * from './countdown/countdown.module';
+export * from './demo/demo.module';
+export * from './highlight/highlight.module';
+export * from './material-color-picker/material-color-picker.module';
+export * from './navigation/navigation.module';
+export * from './search-bar/search-bar.module';
+export * from './shortcuts/shortcuts.module';
+export * from './sidebar/sidebar.module';
+export * from './theme-options/theme-options.module';
+export * from './widget/widget.module';

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

@@ -9,10 +9,8 @@
 
 <mat-menu #colorMenu="matMenu" class="fuse-material-color-picker-menu">
 
-    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'"
+    <header [ngClass]="selectedColor?.class || 'mat-accent-bg'" class="mat-elevation-z4"
-            class="mat-elevation-z4"
+            fxLayout="row" fxLayoutAlign="space-between center">
-            fxLayout="row"
-            fxLayoutAlign="space-between center">
 
         <button mat-icon-button
                 [style.visibility]="view==='hues'?'visible':'hidden'"
@@ -30,7 +28,7 @@
 
         <button mat-icon-button
                 class="remove-color-button"
-                (click)="removeColor()"
+                (click)="$event.stopPropagation();removeColor()"
                 aria-label="Remove Color">
             <mat-icon class="s-20">delete</mat-icon>
         </button>
@@ -39,13 +37,9 @@
 
     <div [ngSwitch]="view" class="views">
 
-        <div class="view"
+        <div class="view" *ngSwitchCase="'palettes'">
-             *ngSwitchCase="'palettes'"
-             [@slideInLeft]>
 
-            <div fxLayout="row" fxLayoutWrap
+            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-                 fxLayoutAlign="start start"
-                 class="colors" fusePerfectScrollbar>
                 <div class="color"
                      [ngClass]="'mat-'+color.key+'-bg'"
                      *ngFor="let color of (colors | keys)"
@@ -58,18 +52,12 @@
             </div>
         </div>
 
-        <div class="view"
+        <div class="view" *ngSwitchCase="'hues'" >
-             *ngSwitchCase="'hues'"
+            <div fxLayout="row wrap" fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
-             [@slideInRight]>
+                <div class="color" *ngFor="let hue of hues"
-            <div fxLayout="row" fxLayoutWrap
-                 fxLayoutAlign="start start"
-                 class="colors" fusePerfectScrollbar>
-                <div class="color"
-                     *ngFor="let hue of hues"
                      [fxHide]="selectedPalette === 'white' && hue !== '500'|| selectedPalette === 'black' && hue !== '500'"
                      [ngClass]="'mat-'+selectedPalette+'-'+hue+'-bg'"
-                     (click)="selectHue(hue)"
+                     (click)="selectHue(hue)" fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
-                     fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple>
                     <span class="label">
                         {{hue}}
                     </span>

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

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
-import { MatColors } from '../../matColors';
+
-import { fuseAnimations } from '../../animations';
+import { fuseAnimations } from '@fuse/animations';
+import { MatColors } from '@fuse/mat-colors';
 
 @Component({
     selector     : 'fuse-material-color-picker',
@@ -9,7 +10,7 @@ import { fuseAnimations } from '../../animations';
     animations   : fuseAnimations,
     encapsulation: ViewEncapsulation.None
 })
-export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
+export class FuseMaterialColorPickerComponent implements OnChanges
 {
     colors: any;
     selectedColor: any;
@@ -91,9 +92,19 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
         this.hues = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700'];
     }
 
-    ngOnInit()
+    ngOnChanges(changes: any)
     {
-
+        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
+            changes.selectedClass && changes.selectedClass.currentValue === '' ||
+            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
+        {
+            this.removeColor();
+            return;
+        }
+        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
+        {
+            this.updateSelectedColor();
+        }
     }
     
     selectPalette(palette)
@@ -114,6 +125,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
         this.selectedPalette = '';
         this.selectedHue = '';
         this.updateSelectedColor();
+        this.view = 'palettes';
     }
 
     updateSelectedColor()
@@ -172,19 +184,4 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges
             this.view = 'hues';
         }
     }
-
-    ngOnChanges(changes: any)
-    {
-        if ( changes.selectedBg && changes.selectedBg.currentValue === '' ||
-            changes.selectedClass && changes.selectedClass.currentValue === '' ||
-            changes.selectedPalette && changes.selectedPalette.currentValue === '' )
-        {
-            this.removeColor();
-            return;
-        }
-        if ( changes.selectedPalette || changes.selectedHue || changes.selectedClass || changes.selectedBg )
-        {
-            this.updateSelectedColor();
-        }
-    }
 }

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

@@ -0,0 +1,33 @@
+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';
+
+import { FuseMaterialColorPickerComponent } from '@fuse/components/material-color-picker/material-color-picker.component';
+
+@NgModule({
+    declarations: [
+        FuseMaterialColorPickerComponent
+    ],
+    imports: [
+        CommonModule,
+
+        FlexLayoutModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatRippleModule,
+
+        FusePipesModule
+    ],
+    exports: [
+        FuseMaterialColorPickerComponent
+    ],
+})
+export class FuseMaterialColorPickerModule
+{
+}

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

@@ -1,5 +1,5 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core';
-import { fuseAnimations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations/index';
 import { FuseConfigService } from '../../../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs/Subscription';
 })
 export class FuseNavHorizontalCollapseComponent implements OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     fuseSettings: any;
     isOpen = false;
 
@@ -34,8 +34,8 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
         private fuseConfig: FuseConfigService
     )
     {
-        this.onSettingsChanged =
+        this.onConfigChanged =
-            this.fuseConfig.onSettingsChanged
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.fuseSettings = newSettings;
@@ -45,6 +45,6 @@ export class FuseNavHorizontalCollapseComponent implements OnDestroy
 
     ngOnDestroy()
     {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
     }
 }

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

@@ -4,7 +4,7 @@
     <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
 
-        <ng-container *ngFor="let item of navigationModel">
+        <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
             <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
@@ -18,7 +18,7 @@
     <!-- Horizontal Navigation Layout -->
     <ng-container *ngIf="layout === 'horizontal'">
 
-        <ng-container *ngFor="let item of navigationModel">
+        <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
             <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>

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

@@ -0,0 +1,12 @@
+@import 'src/@fuse/scss/fuse';
+
+fuse-navigation {
+    display: flex;
+    flex: 1 0 auto;
+
+    #main-navigation {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'fuse-navigation',
+    templateUrl  : './navigation.component.html',
+    styleUrls    : ['./navigation.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseNavigationComponent
+{
+    @Input() layout = 'vertical';
+    @Input() navigation: any;
+
+    constructor()
+    {
+
+    }
+}

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

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
+import { MatIconModule, MatRippleModule } from '@angular/material';
+
+import { TranslateModule } from '@ngx-translate/core';
+
 import { FuseNavigationComponent } from './navigation.component';
 import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
 import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
@@ -10,8 +14,13 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
 
 @NgModule({
     imports     : [
-        SharedModule,
+        CommonModule,
-        RouterModule
+        RouterModule,
+
+        MatIconModule,
+        MatRippleModule,
+
+        TranslateModule.forChild()
     ],
     exports     : [
         FuseNavigationComponent

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

@@ -0,0 +1,48 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class FuseNavigationService
+{
+    flatNavigation: any[] = [];
+
+    onItemCollapsed: Subject<any> = new Subject;
+    onItemCollapseToggled: Subject<any> = new Subject;
+
+    constructor()
+    {
+    }
+
+    /**
+     * Get flattened navigation array
+     * @param navigation
+     * @returns {any[]}
+     */
+    getFlatNavigation(navigation)
+    {
+        for ( const navItem of navigation )
+        {
+            if ( navItem.type === 'item' )
+            {
+                this.flatNavigation.push({
+                    title: navItem.title,
+                    type : navItem.type,
+                    icon : navItem.icon || false,
+                    url  : navItem.url
+                });
+
+                continue;
+            }
+
+            if ( navItem.type === 'collapse' || navItem.type === 'group' )
+            {
+                if ( navItem.children )
+                {
+                    this.getFlatNavigation(navItem.children);
+                }
+            }
+        }
+
+        return this.flatNavigation;
+    }
+}

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

@@ -0,0 +1,21 @@
+<ng-container *ngIf="!item.hidden">
+
+    <a class="nav-link" matRipple (click)="toggleOpen($event)">
+        <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>
+    </a>
+
+    <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

@@ -1,6 +1,6 @@
 :host {
 
-    .folded:not(.folded-open) & {
+    .folded:not(.unfolded) & {
 
         .nav-link {
 
@@ -19,6 +19,7 @@
     }
 
     .nav-link {
+
         .collapse-arrow {
             transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;
             transform: rotate(0);

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

@@ -1,7 +1,7 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { fuseAnimations } from '../../../../animations';
+import { fuseAnimations } from '../../../../animations/index';
 
 @Component({
     selector   : 'fuse-nav-vertical-collapse',
@@ -40,7 +40,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         );
 
         // Listen for collapsing of any navigation item
-        this.navigationService.onNavCollapseToggled
+        this.navigationService.onItemCollapsed
             .subscribe(
                 (clickedItem) => {
                     if ( clickedItem && clickedItem.children )
@@ -95,8 +95,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         this.isOpen = !this.isOpen;
 
         // Navigation collapse toggled...
-        this.navigationService.onNavCollapseToggled.emit(this.item);
+        this.navigationService.onItemCollapsed.next(this.item);
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
@@ -110,7 +110,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         }
 
         this.isOpen = true;
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
@@ -124,7 +124,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         }
 
         this.isOpen = false;
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**

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

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

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

@@ -1,6 +1,6 @@
 :host {
 
-    .folded:not(.folded-open) & {
+    .folded:not(.unfolded) & {
 
         > .group-title {
             align-items: center;

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

@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+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 implements OnInit
+export class FuseNavVerticalGroupComponent
 {
     @HostBinding('class') classes = 'nav-group nav-item';
     @Input() item: any;
@@ -14,8 +14,4 @@ export class FuseNavVerticalGroupComponent implements OnInit
     {
     }
 
-    ngOnInit()
-    {
-    }
-
 }

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

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

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

@@ -1,6 +1,6 @@
 :host {
 
-    .folded:not(.folded-open) & {
+    .folded:not(.unfolded) & {
 
         .nav-link {
 

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

@@ -1,11 +1,11 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
+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 implements OnInit
+export class FuseNavVerticalItemComponent
 {
     @HostBinding('class') classes = 'nav-item';
     @Input() item: any;
@@ -13,8 +13,4 @@ export class FuseNavVerticalItemComponent implements OnInit
     constructor()
     {
     }
-
-    ngOnInit()
-    {
-    }
 }

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

@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 :host {
 

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

@@ -1,26 +1,27 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
-import { FuseConfigService } from '../../services/config.service';
 import { Subscription } from 'rxjs/Subscription';
 
+import { FuseConfigService } from '@fuse/services/config.service';
+
 @Component({
     selector   : 'fuse-search-bar',
     templateUrl: './search-bar.component.html',
     styleUrls  : ['./search-bar.component.scss']
 })
-export class FuseSearchBarComponent implements OnInit
+export class FuseSearchBarComponent
 {
     collapsed: boolean;
     toolbarColor: string;
     @Output() onInput: EventEmitter<any> = new EventEmitter();
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     constructor(
         private fuseConfig: FuseConfigService
     )
     {
         this.collapsed = true;
-        this.onSettingsChanged =
+        this.onConfigChanged =
-            this.fuseConfig.onSettingsChanged
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.toolbarColor = newSettings.colorClasses.toolbar;
@@ -28,11 +29,6 @@ export class FuseSearchBarComponent implements OnInit
                 );
     }
 
-    ngOnInit()
-    {
-
-    }
-
     collapse()
     {
         this.collapsed = true;

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

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
-import { SharedModule } from '../../modules/shared.module';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
 import { FuseSearchBarComponent } from './search-bar.component';
 
 @NgModule({
@@ -9,8 +11,11 @@ import { FuseSearchBarComponent } from './search-bar.component';
         FuseSearchBarComponent
     ],
     imports     : [
-        SharedModule,
+        CommonModule,
-        RouterModule
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule
     ],
     exports     : [
         FuseSearchBarComponent

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

@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 :host {
 

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

@@ -1,11 +1,14 @@
 import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
-import { FuseNavigationService } from '../navigation/navigation.service';
 import { Subscription } from 'rxjs/Subscription';
 import { ObservableMedia } from '@angular/flex-layout';
-import { FuseMatchMedia } from '../../services/match-media.service';
-import { FuseConfigService } from '../../services/config.service';
 import { CookieService } from 'ngx-cookie-service';
 
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseConfigService } from '@fuse/services/config.service';
+
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector   : 'fuse-shortcuts',
     templateUrl: './shortcuts.component.html',
@@ -20,7 +23,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     mobileShortcutsPanelActive = false;
     toolbarColor: string;
     matchMediaSubscription: Subscription;
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     @ViewChild('searchInput') searchInputField;
     @ViewChild('shortcuts') shortcutsEl: ElementRef;
@@ -28,16 +31,16 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     constructor(
         private renderer: Renderer2,
         private observableMedia: ObservableMedia,
-        private fuseMatchMedia: FuseMatchMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
         private fuseNavigationService: FuseNavigationService,
         private fuseConfig: FuseConfigService,
         private cookieService: CookieService
     )
     {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
 
-        this.onSettingsChanged =
+        this.onConfigChanged =
-            this.fuseConfig.onSettingsChanged
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.toolbarColor = newSettings.colorClasses.toolbar;

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

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatTooltipModule } from '@angular/material';
+import { CookieService } from 'ngx-cookie-service';
+
+import { FuseShortcutsComponent } from './shortcuts.component';
+
+@NgModule({
+    declarations: [
+        FuseShortcutsComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+
+        FlexLayoutModule,
+
+        MatButtonModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatListModule,
+        MatTooltipModule
+    ],
+    exports     : [
+        FuseShortcutsComponent
+    ],
+    providers   : [
+        CookieService
+    ]
+})
+export class FuseShortcutsModule
+{
+}

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,59 @@
+fuse-sidebar {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    width: 280px;
+    min-width: 280px;
+    max-width: 280px;
+    z-index: 1000;
+    transition-property: transform, width, min-width, max-width;
+    transition-duration: 150ms;
+    transition-timing-function: ease-in-out;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
+
+    &.left-aligned {
+        left: 0;
+        transform: translateX(-100%);
+    }
+
+    &.right-aligned {
+        right: 0;
+        transform: translateX(100%);
+    }
+
+    &.open {
+        transform: translateX(0);
+    }
+
+    &.locked-open {
+        position: relative !important;
+        transform: translateX(0) !important;
+    }
+
+    &.folded {
+        position: absolute !important;
+        top: 0;
+        bottom: 0;
+
+        &:not(.unfolded) {
+            width: 64px;
+            min-width: 64px;
+            max-width: 64px;
+        }
+    }
+}
+
+.fuse-sidebar-overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0;
+}

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

@@ -0,0 +1,368 @@
+import { Component, ElementRef, HostBinding, HostListener, Inject, Input, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { ObservableMedia } from '@angular/flex-layout';
+import { Subscription } from 'rxjs/Subscription';
+
+import { FuseSidebarService } from './sidebar.service';
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+    selector     : 'fuse-sidebar',
+    templateUrl  : './sidebar.component.html',
+    styleUrls    : ['./sidebar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseSidebarComponent implements OnInit, OnDestroy
+{
+    // Name
+    @Input()
+    name: string;
+
+    // Align
+    @Input()
+    align: string;
+
+    // Open
+    @HostBinding('class.open')
+    opened: boolean;
+
+    // Locked Open
+    @Input()
+    lockedOpen: string;
+
+    // isLockedOpen
+    @HostBinding('class.locked-open')
+    isLockedOpen: boolean;
+
+    // Folded
+    @HostBinding('class.folded')
+    @Input()
+    folded: boolean;
+
+    // Folded unfolded
+    @HostBinding('class.unfolded')
+    unfolded: boolean;
+
+    // Private
+    private _wasActive: boolean;
+    private _backdrop: HTMLElement | null = null;
+    private _player: AnimationPlayer;
+    private _matchMediaWatcher: Subscription;
+
+    /**
+     * Constructor
+     *
+     * @param renderer
+     * @param elementRef
+     * @param animationBuilder
+     * @param sidebarService
+     * @param matchMedia
+     * @param media
+     * @param document
+     */
+    constructor(
+        private renderer: Renderer2,
+        private elementRef: ElementRef,
+        private animationBuilder: AnimationBuilder,
+        private sidebarService: FuseSidebarService,
+        private matchMedia: FuseMatchMediaService,
+        private media: ObservableMedia,
+        @Inject(DOCUMENT) private document: any
+    )
+    {
+        // Set the defaults
+        this.opened = false;
+        this.folded = false;
+        this.align = 'left';
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Register the sidebar
+        this.sidebarService.register(this.name, this);
+
+        // Setup alignment
+        this._setupAlignment();
+
+        // Setup lockedOpen
+        this._setupLockedOpen();
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unregister the sidebar
+        this.sidebarService.unregister(this.name);
+
+        // Unregister the media watcher
+        this._matchMediaWatcher.unsubscribe();
+    }
+
+    /**
+     * Setup the alignment
+     *
+     * @private
+     */
+    private _setupAlignment(): void
+    {
+        if ( this.align === 'left' )
+        {
+            this.renderer.addClass(this.elementRef.nativeElement, 'left-aligned');
+        }
+        else
+        {
+            this.renderer.addClass(this.elementRef.nativeElement, 'right-aligned');
+        }
+    }
+
+    /**
+     * Setup the lockedOpen handler
+     *
+     * @private
+     */
+    private _setupLockedOpen(): void
+    {
+        // Return if the lockedOpen wasn't set
+        if ( !this.lockedOpen )
+        {
+            return;
+        }
+
+        // Set the wasActive for the first time
+        this._wasActive = false;
+
+        // Act on every media change
+        this._matchMediaWatcher =
+
+            this.matchMedia.onMediaChange.subscribe(() => {
+
+                // Get the active status
+                const isActive = this.media.isActive(this.lockedOpen);
+
+                // If the both status are the same, don't act
+                if ( this._wasActive === isActive )
+                {
+                    return;
+                }
+
+                // Store the new active status
+                this._wasActive = isActive;
+
+                // Activate the lockedOpen
+                if ( isActive )
+                {
+                    // Set the lockedOpen status
+                    this.isLockedOpen = true;
+                }
+                // De-Activate the lockedOpen
+                else
+                {
+                    // Set the lockedOpen status
+                    this.isLockedOpen = false;
+
+                    // Unfold the sidebar in case if it was folded
+                    this.unfold();
+                }
+            });
+    }
+
+    /**
+     * Open the sidebar
+     */
+    open(): void
+    {
+        if ( this.opened || this.isLockedOpen )
+        {
+            return;
+        }
+
+        // Show the backdrop
+        this.showBackdrop();
+
+        // Set the opened status
+        this.opened = true;
+
+        // Add a css class to the body
+        this.renderer.addClass(this.document.body, 'fuse-sidebar-opened');
+    }
+
+    /**
+     * Close the sidebar
+     */
+    close(): void
+    {
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Hide the backdrop
+        this.hideBackdrop();
+
+        // Set the opened status
+        this.opened = false;
+
+        // Remove the css class from the body
+        this.renderer.removeClass(this.document.body, 'fuse-sidebar-opened');
+    }
+
+    /**
+     * Toggle open/close the sidebar
+     */
+    toggleOpen(): void
+    {
+        if ( this.opened )
+        {
+            this.close();
+        }
+        else
+        {
+            this.open();
+        }
+    }
+
+    /**
+     * Mouseenter
+     */
+    @HostListener('mouseenter')
+    onMouseEnter(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
+
+        // Add a css class to the body
+        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded-unfolded');
+    }
+
+    /**
+     * Mouseleave
+     */
+    @HostListener('mouseleave')
+    onMouseLeave(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Fold the sidebar back
+        this.unfolded = false;
+
+        // Remove the css class from the body
+        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded-unfolded');
+    }
+
+    /**
+     * Fold the sidebar permanently
+     */
+    fold(): void
+    {
+        this.folded = true;
+
+        // Add a css class to the body
+        this.renderer.addClass(this.document.body, 'fuse-sidebar-folded');
+    }
+
+    /**
+     * Unfold the sidebar permanently
+     */
+    unfold(): void
+    {
+        this.folded = false;
+
+        // Remove the css class from the body
+        this.renderer.removeClass(this.document.body, 'fuse-sidebar-folded');
+    }
+
+    /**
+     * Toggle the sidebar fold/unfold permanently
+     */
+    toggleFold(): void
+    {
+        if ( this.folded )
+        {
+            this.unfold();
+        }
+        else
+        {
+            this.fold();
+        }
+    }
+
+    /**
+     * Show the backdrop
+     */
+    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');
+
+        // Append the backdrop to the parent of the sidebar
+        this.renderer.appendChild(this.elementRef.nativeElement.parentElement, this._backdrop);
+
+        // Create the enter animation and attach it to the player
+        this._player =
+            this.animationBuilder
+                .build([
+                    animate('300ms ease', style({opacity: 1}))
+                ]).create(this._backdrop);
+
+        // Play the animation
+        this._player.play();
+
+        // Add an event listener to the overlay
+        this._backdrop.addEventListener('click', () => {
+                this.close();
+            }
+        );
+    }
+
+    /**
+     * Hide the backdrop
+     */
+    hideBackdrop(): void
+    {
+        if ( !this._backdrop )
+        {
+            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;
+            }
+        });
+    }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { FuseSidebarComponent } from './sidebar.component';
+
+@NgModule({
+    declarations: [
+        FuseSidebarComponent
+    ],
+    exports     : [
+        FuseSidebarComponent
+    ]
+})
+export class FuseSidebarModule
+{
+}

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

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+
+import { FuseSidebarComponent } from './sidebar.component';
+
+@Injectable()
+export class FuseSidebarService
+{
+    // Private
+    private _registry: { [key: string]: FuseSidebarComponent } = {};
+
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+
+    /**
+     * Add the sidebar to the registry
+     *
+     * @param key
+     * @param sidebar
+     */
+    register(key, sidebar): void
+    {
+        // Check if the key already being used
+        if ( this._registry[key] )
+        {
+            console.error(`The sidebar with the key '${key}' already exists. Either unregister it first or use a unique key.`);
+
+            return;
+        }
+
+        // Add to the registry
+        this._registry[key] = sidebar;
+    }
+
+    /**
+     * Remove the sidebar from the registry
+     *
+     * @param key
+     */
+    unregister(key): void
+    {
+        // Check if the sidebar exists
+        if ( !this._registry[key] )
+        {
+            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+        }
+
+        // Unregister the sidebar
+        delete this._registry[key];
+    }
+
+    /**
+     * Return the sidebar with the given key
+     *
+     * @param key
+     */
+    getSidebar(key): any
+    {
+        // Check if the sidebar exists
+        if ( !this._registry[key] )
+        {
+            console.error(`The sidebar with the key '${key}' doesn't exist in the registry.`);
+
+            return;
+        }
+
+        // Return the sidebar
+        return this._registry[key];
+    }
+}

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

@@ -13,8 +13,8 @@
     <div class="theme-options-panel-inner" fxLayout="column" fxLayoutAlign="start start">
 
         <h3>Navigation:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.navigation" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         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>
@@ -22,30 +22,30 @@
         </mat-radio-group>
 
         <h3>Navigation Fold (for vertical navigation):</h3>
-        <mat-slide-toggle [(ngModel)]="fuseSettings.layout.navigationFolded"
+        <mat-slide-toggle [(ngModel)]="config.layout.navigationFolded"
                           (change)="onSettingsChange()">
             Folded
         </mat-slide-toggle>
 
         <h3 class="mt-24">Toolbar:</h3>
-        <mat-radio-group [(ngModel)]="fuseSettings.layout.toolbar" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.toolbar" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         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)]="fuseSettings.layout.footer" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.footer" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         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)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()"
+        <mat-radio-group [(ngModel)]="config.layout.mode" (ngModelChange)="onSettingsChange()"
-                         fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign="start start" fxLayoutWrap>
+                         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>
@@ -57,19 +57,19 @@
 
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4 class="mr-8">Toolbar Color</h4>
-                <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar"
+                <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)]="fuseSettings.colorClasses.navbar"
+                <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)]="fuseSettings.colorClasses.footer"
+                <fuse-material-color-picker [(selectedClass)]="config.colorClasses.footer"
                                             (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
 
@@ -79,7 +79,7 @@
 
         <h3>Router Animation:</h3>
         <mat-form-field class="w-100-p">
-            <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
+            <mat-select class="p-0" [(ngModel)]="config.routerAnimation">
                 <mat-option value="none">
                     None
                 </mat-option>

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

@@ -1,4 +1,4 @@
-@import "src/app/core/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 @keyframes rotating {
     from {

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

@@ -1,9 +1,12 @@
 import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { style, animate, AnimationBuilder, AnimationPlayer } from '@angular/animations';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseConfigService } from '../../services/config.service';
+
-import { fuseAnimations } from '../../animations';
+import { fuseAnimations } from '@fuse/animations';
-import { FuseNavigationService } from '../navigation/navigation.service';
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
+import { navigation } from 'app/navigation/navigation';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -18,9 +21,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     @ViewChild('overlay') overlay: ElementRef;
 
     public player: AnimationPlayer;
-    fuseSettings: any;
+    config: any;
 
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     @HostBinding('class.bar-closed') barClosed: boolean;
 
@@ -33,19 +36,19 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
     {
         this.barClosed = true;
 
-        this.onSettingsChanged =
+        this.onConfigChanged =
-            this.fuseConfig.onSettingsChanged
+            this.fuseConfig.onConfigChanged
                 .subscribe(
-                    (newSettings) => {
+                    (newConfig) => {
-                        this.fuseSettings = newSettings;
+                        this.config = newConfig;
                     }
                 );
 
         // Get the nav model and add customize nav item
         // that opens the bar programmatically
-        const navModel = this.navigationService.getNavigationModel();
+        const nav: any = navigation;
 
-        navModel.push({
+        nav.push({
             'id'      : 'custom-function',
             'title'   : 'Custom Function',
             'type'    : 'group',
@@ -70,9 +73,14 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         });
     }
 
+    ngOnDestroy()
+    {
+        this.onConfigChanged.unsubscribe();
+    }
+
     onSettingsChange()
     {
-        this.fuseConfig.setSettings(this.fuseSettings);
+        this.fuseConfig.setConfig(this.config);
     }
 
     closeBar()
@@ -104,9 +112,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
         this.player.play();
     }
-
-    ngOnDestroy()
-    {
-        this.onSettingsChanged.unsubscribe();
-    }
 }

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

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+
+import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
+import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
+
+@NgModule({
+    declarations: [
+        FuseThemeOptionsComponent
+    ],
+    imports     : [
+        CommonModule,
+        FormsModule,
+
+        FlexLayoutModule,
+
+        MatButtonModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatOptionModule,
+        MatRadioModule,
+        MatSelectModule,
+        MatSlideToggleModule,
+
+        FuseMaterialColorPickerModule
+    ],
+    exports     : [
+        FuseThemeOptionsComponent
+    ]
+})
+export class FuseThemeOptionsModule
+{
+}

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

@@ -0,0 +1,11 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+    selector: '[fuseWidgetToggle]'
+})
+export class FuseWidgetToggleDirective
+{
+    constructor(public el: ElementRef)
+    {
+    }
+}

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, OnInit, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, Component, ContentChildren, ElementRef, HostBinding, QueryList, Renderer2, ViewEncapsulation } from '@angular/core';
 import { FuseWidgetToggleDirective } from './widget-toggle.directive';
 
 @Component({
@@ -8,7 +8,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
     encapsulation: ViewEncapsulation.None
 })
 
-export class FuseWidgetComponent implements OnInit, AfterContentInit
+export class FuseWidgetComponent implements AfterContentInit
 {
     @HostBinding('class.flipped') flipped = false;
     @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
@@ -17,11 +17,6 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
     {
     }
 
-    ngOnInit()
-    {
-
-    }
-
     ngAfterContentInit()
     {
         setTimeout(() => {

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

@@ -1,20 +1,17 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../../modules/shared.module';
+
 import { FuseWidgetComponent } from './widget.component';
 import { FuseWidgetToggleDirective } from './widget-toggle.directive';
 
 @NgModule({
-    imports     : [
+    declarations: [
-        SharedModule
+        FuseWidgetComponent,
+        FuseWidgetToggleDirective
     ],
     exports     : [
         FuseWidgetComponent,
         FuseWidgetToggleDirective
     ],
-    declarations: [
-        FuseWidgetComponent,
-        FuseWidgetToggleDirective
-    ]
 })
 export class FuseWidgetModule
 {

src/@fuse/directives/directives.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+
+import { FuseIfOnDomDirective } from '@fuse/directives/fuse-if-on-dom/fuse-if-on-dom.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,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
+        FusePerfectScrollbarDirective
+    ],
+    imports     : [],
+    exports     : [
+        FuseIfOnDomDirective,
+        FuseMatSidenavHelperDirective,
+        FuseMatSidenavTogglerDirective,
+        FusePerfectScrollbarDirective
+    ]
+})
+export class FuseDirectivesModule
+{
+}

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

@@ -2,8 +2,9 @@ import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '
 import { MatSidenav } from '@angular/material';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseMatchMedia } from '../../services/match-media.service';
+
-import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
+import { FuseMatchMediaService } from '@fuse/services/match-media.service';
+import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
 
 @Directive({
     selector: '[fuseMatSidenavHelper]'
@@ -11,15 +12,13 @@ import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';
 export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 {
     matchMediaSubscription: Subscription;
-
     @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
-
     @Input('fuseMatSidenavHelper') id: string;
     @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
 
     constructor(
         private fuseMatSidenavService: FuseMatSidenavHelperService,
-        private fuseMatchMedia: FuseMatchMedia,
+        private fuseMatchMedia: FuseMatchMediaService,
         private observableMedia: ObservableMedia,
         private matSidenav: MatSidenav
     )

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

@@ -1,15 +1,17 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
-import { FuseConfigService } from '../../services/config.service';
-import { Subscription } from 'rxjs/Subscription';
 import { Platform } from '@angular/cdk/platform';
+import { Subscription } from 'rxjs/Subscription';
+
 import PerfectScrollbar from 'perfect-scrollbar';
 
+import { FuseConfigService } from '@fuse/services/config.service';
+
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
@@ -21,9 +23,12 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         private platform: Platform
     )
     {
-        this.onSettingsChanged =
+    }
-            this.fuseConfig.onSettingsChanged
+
-                .subscribe(
+    ngOnInit()
+    {
+        this.onConfigChanged =
+            this.fuseConfig.onConfigChanged.subscribe(
                 (settings) => {
                     this.isDisableCustomScrollbars = !settings.customScrollbars;
                 }
@@ -56,7 +61,7 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
             return;
         }
 
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
 
         // Destroy the perfect-scrollbar
         this.ps.destroy();

src/@fuse/fuse.module.ts

@@ -0,0 +1,47 @@
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+
+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({
+    entryComponents: [],
+    providers      : [
+        FuseConfigService,
+        FuseCopierService,
+        FuseMatchMediaService,
+        FuseMatSidenavHelperService,
+        FuseNavigationService,
+        FuseSidebarService,
+        FuseSplashScreenService,
+        FuseTranslationLoaderService
+    ]
+})
+export class FuseModule
+{
+    constructor(@Optional() @SkipSelf() parentModule: FuseModule)
+    {
+        if ( parentModule )
+        {
+            throw new Error('FuseModule is already loaded. Import it in the AppModule only!');
+        }
+    }
+
+    static forRoot(config): ModuleWithProviders
+    {
+        return {
+            ngModule : FuseModule,
+            providers: [
+                {
+                    provide : FUSE_CONFIG,
+                    useValue: config
+                }
+            ]
+        };
+    }
+}

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

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { FuseUtils } from '../fuseUtils';
+import { FuseUtils } from '@fuse/utils';
 
 @Pipe({name: 'filter'})
 export class FilterPipe implements PipeTransform

src/@fuse/pipes/pipes.module.ts

@@ -13,7 +13,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
         HtmlToPlaintextPipe,
         FilterPipe,
         CamelCaseToDashPipe
-
     ],
     imports     : [],
     exports     : [
@@ -24,8 +23,6 @@ import { CamelCaseToDashPipe } from './camelCaseToDash.pipe';
         CamelCaseToDashPipe
     ]
 })
-
 export class FusePipesModule
 {
-
 }

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

@@ -231,9 +231,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
                     > .mat-sidenav-content,
                     > .mat-drawer-content {
                         width: calc(100% - 240px);
+                        min-width: 0;
 
                         .center {
                             width: calc(100% - 32px);
+                            min-width: 0;
 
                             @include media-breakpoint-down('md') {
                                 width: calc(100% - 64px);