Moved core into @fuse

+ New fuse sidebar component
+ Moved the navbar to the sidebar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,19 +19,19 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.3",
+    "@angular/animations": "5.2.4",
-    "@angular/cdk": "5.1.1",
+    "@angular/cdk": "5.2.0",
-    "@angular/common": "5.2.3",
+    "@angular/common": "5.2.4",
-    "@angular/compiler": "5.2.3",
+    "@angular/compiler": "5.2.4",
-    "@angular/core": "5.2.3",
+    "@angular/core": "5.2.4",
     "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.2.3",
+    "@angular/forms": "5.2.4",
-    "@angular/http": "5.2.3",
+    "@angular/http": "5.2.4",
-    "@angular/material": "5.1.1",
+    "@angular/material": "5.2.0",
-    "@angular/material-moment-adapter": "5.1.1",
+    "@angular/material-moment-adapter": "5.2.0",
-    "@angular/platform-browser": "5.2.3",
+    "@angular/platform-browser": "5.2.4",
-    "@angular/platform-browser-dynamic": "5.2.3",
+    "@angular/platform-browser-dynamic": "5.2.4",
-    "@angular/router": "5.2.3",
+    "@angular/router": "5.2.4",
     "@ngrx/effects": "5.0.0",
     "@ngrx/router-store": "5.0.0",
     "@ngrx/store": "5.0.0",
@@ -61,13 +61,13 @@
     "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.7",
+    "@angular/cli": "1.6.8",
-    "@angular/compiler-cli": "5.2.3",
+    "@angular/compiler-cli": "5.2.4",
-    "@angular/language-service": "5.2.3",
+    "@angular/language-service": "5.2.4",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.96",
+    "@types/node": "6.0.98",
     "codelyzer": "4.1.0",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",

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

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MatColors } from '../../matColors';
-import { fuseAnimations } from '../../animations';
+import { fuseAnimations } from '../../animations/index';
 
 @Component({
     selector     : 'fuse-material-color-picker',

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.scss

@@ -1,4 +1,4 @@
-@import 'src/app/core/scss/fuse';
+@import 'src/@fuse/scss/fuse';
 
 #main-navigation {
     margin: 0;

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',

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-item/nav-vertical-item.component.scss

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

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

@@ -12,15 +12,15 @@ export class FuseSearchBarComponent implements OnInit
     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;

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

@@ -20,7 +20,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     mobileShortcutsPanelActive = false;
     toolbarColor: string;
     matchMediaSubscription: Subscription;
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
 
     @ViewChild('searchInput') searchInputField;
     @ViewChild('shortcuts') shortcutsEl: ElementRef;
@@ -36,8 +36,8 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
     {
         this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
 
-        this.onSettingsChanged =
+        this.onConfigChanged =
-            this.fuseConfig.onSettingsChanged
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (newSettings) => {
                         this.toolbarColor = newSettings.colorClasses.toolbar;

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 { FuseMatchMedia } 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: FuseMatchMedia,
+        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,19 @@
+import { NgModule } from '@angular/core';
+
+import { FuseSidebarComponent } from './sidebar.component';
+import { FuseSidebarService } from './sidebar.service';
+
+@NgModule({
+    declarations: [
+        FuseSidebarComponent
+    ],
+    exports     : [
+        FuseSidebarComponent
+    ],
+    providers   : [
+        FuseSidebarService
+    ]
+})
+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,7 +13,7 @@
     <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>
             <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>
@@ -22,13 +22,13 @@
         </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>
             <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>
@@ -36,7 +36,7 @@
         </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>
             <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>
@@ -44,7 +44,7 @@
         </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>
             <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>
@@ -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

@@ -2,7 +2,7 @@ import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewC
 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 '../../animations/index';
 import { FuseNavigationService } from '../navigation/navigation.service';
 
 @Component({
@@ -18,9 +18,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,11 +33,11 @@ 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;
                     }
                 );
 
@@ -72,7 +72,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     onSettingsChange()
     {
-        this.fuseConfig.setSettings(this.fuseSettings);
+        this.fuseConfig.setConfig(this.config);
     }
 
     closeBar()
@@ -107,6 +107,6 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     ngOnDestroy()
     {
-        this.onSettingsChanged.unsubscribe();
+        this.onConfigChanged.unsubscribe();
     }
 }

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

@@ -9,7 +9,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
 })
 export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
 {
-    onSettingsChanged: Subscription;
+    onConfigChanged: Subscription;
     isDisableCustomScrollbars = false;
     isMobile = false;
     isInitialized = true;
@@ -21,8 +21,8 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         private platform: Platform
     )
     {
-        this.onSettingsChanged =
+        this.onConfigChanged =
-            this.fuseConfig.onSettingsChanged
+            this.fuseConfig.onConfigChanged
                 .subscribe(
                     (settings) => {
                         this.isDisableCustomScrollbars = !settings.customScrollbars;
@@ -56,7 +56,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,37 @@
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+
+import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
+
+@NgModule({
+    declarations: [],
+    providers   : [
+        FuseConfigService,
+        FuseNavigationService,
+        FuseSplashScreenService
+    ]
+})
+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/modules/shared.module.ts

@@ -14,7 +14,6 @@ import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
-import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
 import { FuseHighlightComponent } from '../components/highlight/highlight.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
@@ -73,7 +72,6 @@ import { ChartsModule } from 'ng2-charts';
     providers      : [
         CookieService,
         FuseMatchMedia,
-        FuseNavbarVerticalService,
         FuseMatSidenavHelperService,
         FuseTranslationLoaderService
     ]