Revert "removed md2 + replaced the date/time picker in scrumboard"

This reverts commit dde2333

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.3.
+Material Design Admin Template with Angular 4+ and Angular Material 2
 
 ## Development server
 
@@ -22,7 +22,3 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "",
   "scripts": {
     "ng": "ng",

src/app/core/animations.ts

@@ -4,6 +4,19 @@ import { sequence, trigger, stagger, animate, style, group, query, transition, k
 
 export class Animations
 {
+    public static fadeInOut = trigger('fadeInOut', [
+        state('0', style({
+            display: 'none',
+            opacity: 0
+        })),
+        state('1', style({
+            display: 'block',
+            opacity: 1
+        })),
+        transition('1 => 0', animate('300ms ease-out')),
+        transition('0 => 1', animate('300ms ease-in'))
+    ]);
+
     public static slideInOut = trigger('slideInOut', [
         state('0', style({
             height : '0px',

src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html

@@ -0,0 +1,19 @@
+<a class="nav-link" md-ripple>
+    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
+</a>
+
+<div class="children" [ngClass]="{'open': isOpen}">
+
+    <div class="{{fuseSettings.colorClasses.navbar}}">
+
+        <ng-container *ngFor="let item of item.children">
+            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
+                                          [item]="item"></fuse-nav-horizontal-collapse>
+        </ng-container>
+
+    </div>
+
+</div>

src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts

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

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html

@@ -0,0 +1,6 @@
+<a class="nav-link" md-ripple
+   [routerLink]="[item.url]" routerLinkActive="active">
+    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+</a>

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts

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

src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts

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

src/app/core/components/navigation/navigation.component.html

@@ -1,11 +1,27 @@
-<div id="main-navigation" class="nav">
-    <ng-container *ngFor="let item of navigation">
+<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
 
-        <fuse-nav-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-subheader>
+    <ng-container *ngIf="layout === 'vertical'">
 
-        <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
+        <ng-container *ngFor="let item of verticalNavigation">
 
-        <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
+            <fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
+            <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
+            <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+
+        </ng-container>
 
     </ng-container>
+
+    <ng-container *ngIf="layout === 'horizontal'">
+
+        <ng-container *ngFor="let item of horizontalNavigation">
+
+            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
+                                          [item]="item"></fuse-nav-horizontal-collapse>
+
+        </ng-container>
+
+    </ng-container>
+
 </div>

src/app/core/components/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { FuseNavigationService } from './navigation.service';
 
 @Component({
@@ -9,11 +9,15 @@ import { FuseNavigationService } from './navigation.service';
 })
 export class FuseNavigationComponent
 {
-    navigation: any[];
+    verticalNavigation: any[];
+    horizontalNavigation: any[];
+
+    @Input('layout') layout = 'vertical';
 
     constructor(private navigationService: FuseNavigationService)
     {
-        this.navigation = navigationService.getNavigation();
+        this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
+        this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
     }
 
 }

src/app/core/components/navigation/navigation.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
-import { FuseNavSubheaderComponent } from './nav-subheader/nav-subheader.component';
 import { FuseNavigationComponent } from './navigation.component';
-import { FuseNavItemComponent } from './nav-item/nav-item.component';
-import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.component';
+import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
+import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
+import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
+import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
+import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
 
 @NgModule({
     imports     : [
@@ -16,9 +18,11 @@ import { FuseNavCollapseComponent } from './nav-collapse/nav-collapse.component'
     ],
     declarations: [
         FuseNavigationComponent,
-        FuseNavSubheaderComponent,
-        FuseNavItemComponent,
-        FuseNavCollapseComponent
+        FuseNavVerticalSubheaderComponent,
+        FuseNavVerticalItemComponent,
+        FuseNavVerticalCollapseComponent,
+        FuseNavHorizontalItemComponent,
+        FuseNavHorizontalCollapseComponent
     ]
 })
 export class FuseNavigationModule

src/app/core/components/navigation/navigation.service.ts

@@ -5,21 +5,21 @@ import { FuseNavigation } from '../../../navigation.model';
 export class FuseNavigationService
 {
     onNavCollapseToggled = new EventEmitter<any>();
-    navigation: any[];
+    navigation: FuseNavigation;
     flatNavigation: any[] = [];
 
     constructor()
     {
-        this.navigation = new FuseNavigation().items;
+        this.navigation = new FuseNavigation();
     }
 
     /**
      * Get navigation array
      * @returns {any[]}
      */
-    getNavigation()
+    getNavigation(item)
     {
-        return this.navigation;
+        return this.navigation[item];
     }
 
     /**

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html

@@ -5,7 +5,7 @@
 </a>
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">
-        <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
-        <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
     </ng-container>
 </div>

src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts

@@ -1,15 +1,15 @@
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
-import { FuseNavigationService } from '../navigation.service';
+import { FuseNavigationService } from '../../navigation.service';
 import { NavigationEnd, Router } from '@angular/router';
-import { Animations } from '../../../animations';
+import { Animations } from '../../../../animations';
 
 @Component({
-    selector   : 'fuse-nav-collapse',
-    templateUrl: './nav-collapse.component.html',
-    styleUrls  : ['./nav-collapse.component.scss'],
+    selector   : 'fuse-nav-vertical-collapse',
+    templateUrl: './nav-vertical-collapse.component.html',
+    styleUrls  : ['./nav-vertical-collapse.component.scss'],
     animations : [Animations.slideInOut]
 })
-export class FuseNavCollapseComponent implements OnInit
+export class FuseNavVerticalCollapseComponent implements OnInit
 {
     @Input() item: any;
     @HostBinding('class') classes = 'nav-collapse nav-item';

src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.ts

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

src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts

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

src/app/core/components/search-bar/search-bar.component.scss

@@ -7,7 +7,7 @@
         height: 64px;
         font-size: 13px;
 
-        @include media-breakpoint-down('xs') {
+        @include media-breakpoint-down('sm') {
             height: 56px;
         }
 
@@ -20,7 +20,7 @@
             height: 64px !important;
             line-height: 64px !important;
 
-            @include media-breakpoint-down('xs') {
+            @include media-breakpoint-down('sm') {
                 height: 56px !important;
                 line-height: 56px !important;
             }
@@ -30,7 +30,7 @@
             width: 64px !important;
             height: 64px !important;
             line-height: 64px !important;
-            @include media-breakpoint-down('xs') {
+            @include media-breakpoint-down('sm') {
                 height: 56px !important;
                 line-height: 56px !important;
             }

src/app/core/components/theme-options/theme-options.component.html

@@ -2,7 +2,9 @@
     <md-icon>settings</md-icon>
 </button>
 
-<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 pb-16">
+<div class="theme-options-panel-overlay" #overlay [fxHide]="barClosed" [@fadeInOut]="!barClosed"></div>
+
+<div #panel class="theme-options-panel md-white-bg mat-elevation-z8 p-16">
 
     <button md-icon-button class="close-button" (click)="closeBar()">
         <md-icon>close</md-icon>
@@ -12,6 +14,7 @@
         <h3 md-subheader>Navigation:</h3>
         <md-list-item>
             <md-radio-group [(ngModel)]="fuseSettings.layout.navigation" (ngModelChange)="onSettingsChange()">
+                <md-radio-button class="mr-8" value="top">Top</md-radio-button>
                 <md-radio-button class="mr-8" value="left">Left</md-radio-button>
                 <md-radio-button class="mr-8" value="right">Right</md-radio-button>
                 <md-radio-button class="mr-8" value="none">None</md-radio-button>
@@ -36,25 +39,33 @@
             </md-radio-group>
         </md-list-item>
 
+        <h3 md-subheader>Layout Mode:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="fuseSettings.layout.mode" (ngModelChange)="onSettingsChange()">
+                <md-radio-button class="mr-8" value="boxed">Boxed</md-radio-button>
+                <md-radio-button class="mr-8" value="fullwidth">Fullwidth</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
+
         <md-divider></md-divider>
 
         <h3 md-subheader>Colors:</h3>
 
-        <md-list-item>
+        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4>Toolbar Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.toolbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
         </md-list-item>
 
-        <md-list-item>
+        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4>Navigation Bar Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.navbar" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
             </div>
         </md-list-item>
 
-        <md-list-item>
+        <md-list-item class="mb-8">
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4>Footer Color</h4>
                 <fuse-material-color-picker [(selectedClass)]="fuseSettings.colorClasses.footer" (onValueChange)="onSettingsChange()"></fuse-material-color-picker>
@@ -68,7 +79,7 @@
         <md-list-item>
             <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
                 <h4>Router Animation</h4>
-                <md-select [(ngModel)]="fuseSettings.routerAnimation">
+                <md-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
                     <md-option value="none">
                         None
                     </md-option>

src/app/core/components/theme-options/theme-options.component.scss

@@ -19,14 +19,29 @@
         position: absolute;
         right: 0;
         top: 0;
-        width: 320px;
+        width: 360px;
         transform: translate3d(100%, 0, 0);
         z-index: 999;
 
         .close-button {
             position: absolute;
-            top: 0;
-            right: 0;
+            top: 8px;
+            right: 8px;
+        }
+    }
+
+    .theme-options-panel-overlay {
+        position: fixed;
+        display: block;
+        background: rgba(0, 0, 0, 0);
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        z-index: 998;
+
+        &.hidden {
+            display: none;
         }
     }
 
@@ -34,6 +49,10 @@
         font-size: 15px;
     }
 
+    .mat-divider {
+        margin: 16px;
+    }
+
     .open-button {
         position: absolute;
         top: 0;

src/app/core/components/theme-options/theme-options.component.ts

@@ -1,28 +1,35 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, 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 { Animations } from '../../animations';
 
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',
-    styleUrls  : ['./theme-options.component.scss']
+    styleUrls  : ['./theme-options.component.scss'],
+    animations : [Animations.fadeInOut]
 })
 export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 {
     @ViewChild('openButton') openButton;
     @ViewChild('panel') panel;
+    @ViewChild('overlay') overlay: ElementRef;
 
     public player: AnimationPlayer;
     fuseSettings: any;
+    barClosed: boolean;
 
     onSettingsChanged: Subscription;
 
     constructor(
         private animationBuilder: AnimationBuilder,
-        private fuseConfig: FuseConfigService
+        private fuseConfig: FuseConfigService,
+        private renderer: Renderer2
     )
     {
+        this.barClosed = true;
+
         this.onSettingsChanged =
             this.fuseConfig.onSettingsChanged
                 .subscribe(
@@ -34,6 +41,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     ngOnInit()
     {
+        this.renderer.listen(this.overlay.nativeElement, 'click', () => {
+            this.closeBar();
+        });
     }
 
     onSettingsChange()
@@ -43,23 +53,29 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
     closeBar()
     {
+        this.barClosed = true;
+
         this.player =
             this.animationBuilder
                 .build([
                     style({transform: 'translate3d(0,0,0)'}),
                     animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
                 ]).create(this.panel.nativeElement);
+
         this.player.play();
     }
 
     openBar()
     {
+        this.barClosed = false;
+
         this.player =
             this.animationBuilder
                 .build([
                     style({transform: 'translate3d(100%,0,0)'}),
                     animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
                 ]).create(this.panel.nativeElement);
+
         this.player.play();
     }
 

src/app/core/modules/shared.module.ts

@@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseNavigationService } from '../components/navigation/navigation.service';
 import { FuseMatchMedia } from '../services/match-media.service';
-import { FuseNavbarService } from '../../main/navbar/navbar.service';
+import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
 import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
@@ -72,7 +72,7 @@ import { CookieService } from 'ngx-cookie-service';
         CookieService,
         FuseNavigationService,
         FuseMatchMedia,
-        FuseNavbarService,
+        FuseNavbarVerticalService,
         FuseMdSidenavHelperService
     ]
 })

src/app/core/scss/partials/_navigation.scss

@@ -118,4 +118,54 @@
             }
         }
     }
+
+    &.horizontal {
+        display: flex;
+        flex-direction: row;
+
+        .nav-item {
+
+            &.nav-collapse {
+                position: relative;
+
+                .children {
+                    display: none;
+                    position: absolute;
+                    top: 0;
+                    left: 100%;
+                    z-index: 999;
+                    min-width: 200px;
+                    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+
+                    &.open {
+                        display: block;
+                    }
+
+                    .nav-link {
+                        padding-left: 24px !important;
+                    }
+                }
+            }
+        }
+
+        > .nav-item {
+
+            &.nav-collapse {
+                position: relative;
+
+                > .nav-link {
+                    height: 56px;
+
+                    .collapse-arrow {
+                        display: none;
+                    }
+                }
+
+                > .children {
+                    top: 100%;
+                    left: 0;
+                }
+            }
+        }
+    }
 }

src/app/core/scss/partials/plugins/_ng-pick-datetime.scss

@@ -0,0 +1,360 @@
+/*@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?81091010');
+  src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
+  url('../font/fontello.woff2?81091010') format('woff2'),
+  url('../font/fontello.woff?81091010') format('woff'),
+  url('../font/fontello.ttf?81091010') format('truetype'),
+  url('../font/fontello.svg?81091010#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}*/
+
+owl-date-time {
+
+    [class^="icon-"]:before, [class*=" icon-"]:before {
+        font-family: "Material Icons";
+        font-style: normal;
+        font-weight: normal;
+        speak: none;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        /* For safety - reset parent styles, that can break glyph codes*/
+        font-variant: normal;
+        text-transform: none;
+
+        /* Font smoothing. That was taken from TWBS */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .icon-cancel:before {
+        content: 'close';
+    }
+
+    .icon-up-open:before {
+        content: 'keyboard_arrow_up';
+    }
+
+    .icon-down-open:before {
+        content: 'keyboard_arrow_down';
+    }
+
+    .icon-left-open:before {
+        content: 'chevron_left';
+    }
+
+    .icon-right-open:before {
+        content: 'chevron_right';
+    }
+
+    $white: #FFFFFF;
+    $black: #000000;
+    $grey: #DDDDDD;
+    $blue: #0070BA;
+
+    .owl-widget,
+    .owl-widget * {
+        box-sizing: border-box;
+    }
+
+    .owl-widget {
+        font-size: 1em;
+    }
+
+    .owl-state-focus {
+
+    }
+
+    .owl-corner-all {
+        border-radius: 2px;
+    }
+
+    .owl-corner-top {
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+    }
+
+    .owl-state-default {
+        background: #FFFFFF;
+        color: rgba(0, 0, 0, 0.87);
+    }
+
+    .owl-dateTime-inputWrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+
+        .owl-dateTime-input {
+            background: none !important;
+            padding: 0 !important;
+            cursor: pointer;
+
+            .owl-inputtext {
+                margin: 0;
+                padding: 8px;
+                background: none !important;
+                color: rgba(0, 0, 0, 0.87);
+            }
+        }
+
+        .owl-dateTime-cancel {
+            position: relative !important;
+            right: 0 !important;
+            top: 0 !important;
+            transform: none !important;
+            font-size: 16px !important;
+            width: 16px !important;
+            height: 16px !important;
+            min-width: 16px !important;
+            min-height: 16px !important;
+            line-height: 16px !important;
+            color: rgba(0, 0, 0, 0.54) !important;
+        }
+    }
+
+    .owl-dateTime {
+        position: relative;
+        width: 140px;
+
+        &.owl-dateTime-inline {
+            width: auto;
+
+            .owl-dateTime-dialog {
+                position: relative;
+                z-index: auto;
+            }
+        }
+    }
+
+    .owl-dateTime-dialog {
+        width: 256px;
+        user-select: none;
+        z-index: 99999;
+        top: 24px !important;
+        right: 0 !important;
+        left: auto !important;
+        @include mat-elevation(4);
+    }
+
+    .owl-dateTime-dialogHeader {
+        height: 2.5em;
+        padding: .25em;
+        background-color: rgba(0, 0, 0, .1);
+        overflow-y: auto;
+    }
+
+    .owl-calendar-wrapper {
+        padding: 16px !important;
+    }
+
+    .owl-calendar-control {
+
+        .owl-calendar-controlNav {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .nav-prev,
+            .nav-next {
+                display: flex;
+
+                &:before {
+                    font-family: "Material Icons";
+                    position: relative !important;
+                    right: 0 !important;
+                    top: 0 !important;
+                    transform: none !important;
+                    font-size: 20px !important;
+                    width: 20px !important;
+                    height: 20px !important;
+                    min-width: 20px !important;
+                    min-height: 20px !important;
+                    line-height: 20px !important;
+                    content: "chevron_left";
+                    color: rgba(0, 0, 0, 0.54);
+                }
+            }
+
+            .nav-next:before {
+                content: "chevron_right";
+            }
+        }
+
+        .owl-calendar-controlContent {
+
+            .month-control,
+            .year-control {
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+            }
+
+            .month-control {
+                margin-right: 8px;
+            }
+
+            .year-control {
+            }
+        }
+    }
+
+    .owl-calendar {
+
+        table {
+            border-spacing: 0 !important;
+        }
+
+        tbody td {
+
+            &.owl-calendar-selected {
+                background-color: $blue;
+                color: $white;
+            }
+
+            &.owl-calendar-invalid {
+                color: #ACACAC;
+            }
+
+            &.owl-calendar-outFocus {
+                color: $grey;
+            }
+
+            &.owl-calendar-hidden {
+                visibility: hidden;
+            }
+
+            &:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
+                background-color: lighten($blue, 50%);
+                color: $black;
+            }
+        }
+    }
+
+    .owl-years,
+    .owl-months {
+
+        td.owl-year,
+        td.owl-month {
+            padding: 0;
+            font-size: 16px;
+            width: 72px;
+            height: 48px;
+            line-height: 48px;
+            cursor: pointer;
+        }
+    }
+
+    .owl-calendar-yearArrow {
+        width: 24px !important;
+        height: 24px !important;
+
+        &.left {
+            left: -16px !important;
+        }
+
+        &.right {
+            right: -16px !important;
+        }
+    }
+
+    .owl-weekdays {
+
+        th.owl-weekday {
+            height: 32px;
+            line-height: 32px;
+            text-align: center;
+            font-size: 12px;
+            padding: 0;
+            color: rgba(0, 0, 0, 0.37);
+        }
+    }
+
+    .owl-days {
+
+        td.owl-day {
+            height: 32px;
+            width: 32px;
+            line-height: 32px;
+            cursor: pointer;
+            border-radius: 100%;
+            padding: 0;
+
+            &.owl-day-today:before {
+                content: '';
+                display: block;
+                position: absolute;
+                right: 2px;
+                top: 2px;
+                border-top: .5em solid lighten($blue, 20%);
+                border-left: .5em solid transparent;
+            }
+        }
+    }
+
+    .owl-timer-wrapper {
+        height: 88px;
+        padding: 8px !important;
+        background-color: rgba(0, 0, 0, 0.06);
+
+        .owl-timer-input {
+            background: none;
+            width: 100% !important;
+            text-align: center;
+        }
+
+        .owl-timer-text {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 40%;
+            font-size: 20px;
+        }
+
+        .owl-meridian-btn {
+            font-size: .8em;
+            color: $blue;
+            background-image: none;
+            background-color: transparent;
+            border-color: $blue;
+
+            &:hover {
+                color: $white;
+                background-color: $blue;
+                border-color: $blue;
+            }
+        }
+    }
+
+    .owl-timer-divider {
+        display: inline-block;
+        position: absolute;
+        width: 8px;
+        height: 100%;
+        left: -2px;
+
+        .owl-timer-dot {
+            display: block;
+            background: rgba(0, 0, 0, 0.37);
+            width: 3px;
+            height: 3px;
+            position: absolute;
+            left: 50%;
+            border-radius: 100%;
+            transform: translateX(-50%);
+
+            &.dot-top {
+                top: 40%;
+            }
+
+            &.dot-bottom {
+                bottom: 40%;
+            }
+        }
+    }
+}

src/app/core/services/config.service.ts

@@ -22,9 +22,10 @@ export class FuseConfigService
         // Set the default settings
         this.defaultSettings = {
             layout          : {
-                navigation: 'left', // 'right', 'left', 'top', none
-                toolbar   : 'below', // 'above', 'below', none
-                footer    : 'none' // 'above', 'below', none
+                navigation: 'left', // 'right', 'left', 'top', 'none'
+                toolbar   : 'below', // 'above', 'below', 'none'
+                footer    : 'below', // 'above', 'below', 'none'
+                mode      : 'fullwidth' // 'boxed', 'fullwidth'
             },
             colorClasses    : {
                 toolbar: 'md-white-500-bg',

src/app/main/content/apps/chat/chat-view/chat-view.component.scss

@@ -3,6 +3,7 @@
     flex: 1 0 auto;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
     overflow: hidden;
+    max-width: 100%;
 
     .chat {
 

src/app/main/content/apps/chat/chat.component.scss

@@ -9,8 +9,8 @@
         max-width: 1400px;
         margin: 0 auto;
 
-        @include media-breakpoint(xs) {
-            padding: 8px !important;
+        @include media-breakpoint-down(md) {
+            padding: 0 !important;
         }
 
         .content-card {
@@ -33,6 +33,10 @@
                     height: auto;
                 }
 
+                > .mat-drawer-content {
+                    max-width: 100%;
+                }
+
                 md-sidenav {
                     display: flex;
                     flex-direction: column;

src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss

@@ -11,6 +11,10 @@
 
         .toolbar-bottom {
             height: 240px;
+
+            @include media-breakpoint-down(md) {
+                height: 180px;
+            }
         }
 
     }

src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss

@@ -11,6 +11,10 @@
 
         .toolbar-bottom {
             height: 240px;
+
+            @include media-breakpoint-down(md) {
+                height: 180px;
+            }
         }
 
     }

src/app/main/content/apps/file-manager/file-list/file-list.component.scss

@@ -10,6 +10,7 @@
         .mat-row {
             position: relative;
             cursor: pointer;
+            min-height: 64px;
 
             .mat-cell {
 

src/app/main/content/apps/scrumboard/board/board.component.html

@@ -3,7 +3,7 @@
     <div id="board">
 
         <!-- HEADER -->
-        <div class="header md-accent-bg p-16 p-sm-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
+        <div class="header md-accent-bg p-16 p-md-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
 
             <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
 
@@ -20,19 +20,16 @@
                 <!-- / BOARD SELECTION BUTTON -->
 
                 <!-- BOARD NAME -->
-                <div class="header-board-name mb-8 mb-sm-0"
+                <div class="header-board-name mb-8 mb-md-0"
                      fxLayout="row" fxLayoutAlign="center center"
                      fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center"
                      fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto"
                      fxFlexOrder="1" fxFlexOrder.gt-xs="2">
-                    <div>
-                        <md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
-                        <fuse-scrumboard-edit-board-name
-                            fxFlex="1 0 auto"
-                            [board]="board"
-                            (onNameChanged)="onBoardNameChanged($event)">
-                        </fuse-scrumboard-edit-board-name>
-                    </div>
+                    <md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
+                    <fuse-scrumboard-edit-board-name
+                        [board]="board"
+                        (onNameChanged)="onBoardNameChanged($event)">
+                    </fuse-scrumboard-edit-board-name>
                 </div>
                 <!-- / BOARD NAME -->
 
@@ -53,10 +50,10 @@
         </div>
         <!-- / HEADER -->
 
-        <div fxFlex class="board-content-wrapper p-16 p-sm-24">
+        <div fxFlex class="board-content-wrapper p-16 p-md-24">
 
             <!-- BOARD -->
-            <div class="board-content ngx-dnd-container p-16 p-sm-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
+            <div class="board-content ngx-dnd-container p-16 p-md-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
                  ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
 
                 <!-- LIST -->

src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html

@@ -6,7 +6,7 @@
 </div>
 
 
-<form [formGroup]="form" (submit)="onFormSubmit()"
+<form [formGroup]="form" (ngSubmit)="onFormSubmit()"
       class="board-name-form" fxFlex="1 0 auto"
       *ngIf="formActive" fxFlex="row">
 
@@ -15,7 +15,7 @@
     <button md-icon-button fxFlex="0 1 auto">
         <md-icon>check</md-icon>
     </button>
-    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()">
+    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
         <md-icon>close</md-icon>
     </button>
 </form>

src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss

@@ -1,4 +1,6 @@
 :host {
+    display: block !important;
+
     .board-name {
         text-overflow: ellipsis;
         overflow: hidden;

src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html

@@ -2,7 +2,7 @@
     {{list.name}}
 </div>
 
-<form [formGroup]="form" (submit)="onFormSubmit()"
+<form [formGroup]="form" (ngSubmit)="onFormSubmit()"
       class="list-header-name-form" fxFlex="1 0 auto"
       *ngIf="formActive" fxFlex="row">
 
@@ -11,7 +11,7 @@
     <button md-icon-button fxFlex="0 1 auto">
         <md-icon>check</md-icon>
     </button>
-    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()">
+    <button md-icon-button fxFlex="0 1 auto" (click)="closeForm()" type="button">
         <md-icon>close</md-icon>
     </button>
 </form>

src/app/main/content/apps/scrumboard/board/list/list.component.scss

@@ -20,7 +20,7 @@
             padding: 0 8px 0 16px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
-            @include media-breakpoint(xs) {
+            @include media-breakpoint-down(sm) {
                 height: 48px;
                 min-height: 48px;
             }

src/app/main/content/apps/scrumboard/scrumboard.component.html

@@ -1,36 +1,31 @@
 <!-- BOARDS -->
-<div id="boards" class="md-primary-400-bg" fxLayout="column" fxFlex>
-
-    <!-- BOARD SELECTION -->
-    <div id="board-selector" fxLayout="column" fxLayoutAlign="start center" fxFlex>
+<div id="boards" class="md-primary-400-bg" fxLayout="column" fxLayoutAlign="start center" fxFlex perfect-scrollbar>
 
+    <div class="header pt-44 pt-md-88" fxFlex="0 0 auto">
         <h1>Scrumboard App</h1>
+    </div>
 
-        <!-- BOARD LIST -->
-        <div class="board-list" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
-
-            <!-- BOARD -->
-            <div class="board-list-item" *ngFor="let board of boards"
-                 [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
-                 fxLayout="column" fxLayoutAlign="center center">
-                <md-icon class="s-64">assessment</md-icon>
-                <div class="board-name">{{board.name}}</div>
-            </div>
-            <!-- / BOARD -->
-
-            <!-- NEW BOARD BUTTON -->
-            <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
-                 (click)="newBoard()">
-                <md-icon class="s-64">add_circle</md-icon>
-                <div class="board-name">Add new board</div>
-            </div>
-            <!-- / NEW BOARD BUTTON -->
+    <!-- BOARD LIST -->
+    <div class="board-list" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
 
+        <!-- BOARD -->
+        <div class="board-list-item" *ngFor="let board of boards"
+             [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri"
+             fxLayout="column" fxLayoutAlign="center center">
+            <md-icon class="s-64">assessment</md-icon>
+            <div class="board-name">{{board.name}}</div>
         </div>
-        <!-- / BOARD LIST -->
+        <!-- / BOARD -->
+
+        <!-- NEW BOARD BUTTON -->
+        <div class="board-list-item add-new-board" fxLayout="column" fxLayoutAlign="center center"
+             (click)="newBoard()">
+            <md-icon class="s-64">add_circle</md-icon>
+            <div class="board-name">Add new board</div>
+        </div>
+        <!-- / NEW BOARD BUTTON -->
 
     </div>
-    <!-- / BOARD SELECTION -->
-
+    <!-- / BOARD LIST -->
 </div>
 <!-- / BOARDS -->

src/app/main/content/apps/scrumboard/scrumboard.component.scss

@@ -3,11 +3,12 @@
 :host {
     min-height: 100%;
 
-    #board-selector {
-        margin-top: 88px;
+    #boards {
+        width: 100%;
 
         .board-list {
             padding: 32px 0;
+            max-height: none!important;
 
             .board-list-item {
                 min-width: 210px;
@@ -31,157 +32,3 @@
     }
 }
 
-#scrumboard {
-    height: 100%;
-
-    > .header {
-        position: relative;
-        height: 96px;
-        min-height: 96px;
-        max-height: 96px;
-        background-image: none;
-        z-index: 49;
-
-        .header-content {
-
-            .header-boards-button {
-                margin: 0;
-            }
-
-            .header-board-name {
-                font-size: 16px;
-
-                .board-subscribe {
-                    margin-right: 8px;
-                }
-
-                .editable-buttons {
-
-                    md-icon {
-                        color: #FFFFFF !important;
-                    }
-                }
-            }
-
-            .right-side {
-
-                > .md-button:last-child {
-                    margin-right: 0;
-                }
-            }
-
-        }
-    }
-
-    #board-selector {
-        position: absolute;
-        top: 96px;
-        right: 0;
-        left: 0;
-        height: 192px;
-        z-index: 48;
-        padding: 24px;
-        opacity: 1;
-
-        .board-list-item {
-            width: 128px;
-            height: 192px;
-            padding: 16px;
-            cursor: pointer;
-            position: relative;
-
-            .board-name {
-                text-align: center;
-                padding: 16px 0;
-            }
-
-            .selected-icon {
-                position: absolute;
-                top: 0;
-                left: 50%;
-                width: 32px;
-                height: 32px;
-                margin-left: -16px;
-                border-radius: 50%;
-                text-align: center;
-                color: white;
-
-                i {
-                    line-height: 32px !important;
-                }
-            }
-
-            &.add-new-board {
-                opacity: 0.6;
-            }
-        }
-    }
-
-    .content {
-        padding: 0;
-        background: transparent;
-    }
-
-    .editable-click {
-        cursor: pointer;
-        text-decoration: none;
-        color: inherit;
-        border-bottom: none;
-    }
-
-    .editable-wrap {
-        display: block;
-        position: relative;
-
-        .editable-controls {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            width: 100%;
-
-            .editable-input {
-                width: inherit;
-                background-color: white;
-                padding: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.12);
-            }
-
-            .editable-buttons {
-                display: inherit;
-
-                .md-button {
-                    margin: 0;
-
-                    &:first-of-type {
-                        padding-right: 0;
-                    }
-
-                    .icon-cancel {
-                        color: rgba(0, 0, 0, 0.32);
-                    }
-                }
-            }
-        }
-    }
-
-    .board-selector-backdrop {
-        z-index: 47;
-    }
-}
-
-// RESPONSIVE
-@include media-breakpoint(xs) {
-    #scrumboard {
-
-        .header {
-            height: 120px;
-            max-height: 120px;
-            min-height: 120px;
-
-        }
-
-        #board-selector {
-            top: 120px;
-        }
-    }
-}

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

@@ -1,3 +1,14 @@
-<md-toolbar class="mat-elevation-z1">
-    <span>Footer</span>
+<md-toolbar>
+
+    <div fxLayout="row" fxLayoutAlign="center center" fxFlex>
+
+        <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
+           target="_blank" md-button class="ml-8 ml-sm-24 md-accent-800-bg" fxFlex="0 0 auto" fxLayout="row"
+           fxLayoutAlign="start center">
+            <md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
+            <span>Purchase Fuse template (Angular4+)</span>
+        </a>
+
+    </div>
+
 </md-toolbar>

src/app/main/footer/footer.component.scss

@@ -6,6 +6,7 @@
     .mat-toolbar {
         background: inherit;
         color: inherit;
+        box-shadow: 0px -1px 1px -1px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.14), 0px -1px 3px 0px rgba(0, 0, 0, 0.12);
     }
 
     &.above {

src/app/main/main.component.html

@@ -8,13 +8,22 @@
         </ng-container>
         <!-- / TOOLBAR: Above -->
 
+        <!-- NAVBAR: Top -->
+        <fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
+                                [class]="fuseSettings.colorClasses.navbar"
+                                *ngIf="fuseSettings.layout.navigation === 'top'">
+        </fuse-navbar-horizontal>
+        <!-- / NAVBAR: Top -->
+
         <div id="wrapper">
 
-            <fuse-navbar [folded]="false"
-                         class="left-navbar"
-                         *ngIf="fuseSettings.layout.navigation === 'left'"
-                         [class]="fuseSettings.colorClasses.navbar">
-            </fuse-navbar>
+            <!-- NAVBAR: Left -->
+            <fuse-navbar-vertical [folded]="false"
+                                  fxShow [fxHide.gt-md]="fuseSettings.layout.navigation === 'top'"
+                                  class="left-navbar" [class]="fuseSettings.colorClasses.navbar"
+                                  *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
+            </fuse-navbar-vertical>
+            <!-- / NAVBAR: Left -->
 
             <div class="content-wrapper">
 
@@ -34,7 +43,13 @@
 
             </div>
 
-            <fuse-navbar [folded]="false" class="md-primary-700-bg right-navbar" *ngIf="fuseSettings.layout.navigation === 'right'"></fuse-navbar>
+            <!-- NAVBAR: Right -->
+            <fuse-navbar-vertical [folded]="false"
+                                  class="right-navbar"
+                                  [class]="fuseSettings.colorClasses.navbar"
+                                  *ngIf="fuseSettings.layout.navigation === 'right'">
+            </fuse-navbar-vertical>
+            <!-- / NAVBAR: Right -->
 
         </div>
 

src/app/main/main.component.scss

@@ -6,6 +6,12 @@ fuse-main {
     width: 100%;
     height: 100%;
 
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+        @include mat-elevation(8);
+    }
+
     &.disable-perfect-scrollbar {
 
         .ps {

src/app/main/main.component.ts

@@ -13,6 +13,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
     onSettingsChanged: Subscription;
     fuseSettings: any;
     @HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars;
+    @HostBinding('class.boxed') boxed;
 
     constructor(
         private _renderer: Renderer2,
@@ -26,6 +27,7 @@ export class FuseMainComponent implements OnInit, OnDestroy
                     (newSettings) => {
                         this.fuseSettings = newSettings;
                         this.disableCustomScrollbars = !this.fuseSettings.customScrollbars;
+                        this.boxed = this.fuseSettings.layout.mode === 'boxed';
                     }
                 );
     }

src/app/main/main.module.ts

@@ -6,10 +6,11 @@ import { SharedModule } from '../core/modules/shared.module';
 import { FuseMainComponent } from './main.component';
 import { FuseContentComponent } from './content/content.component';
 import { FuseFooterComponent } from './footer/footer.component';
-import { FuseNavbarComponent } from './navbar/navbar.component';
+import { FuseNavbarVerticalComponent } from './navbar/vertical/navbar-vertical.component';
 import { FuseToolbarComponent } from './toolbar/toolbar.component';
 import { FuseNavigationModule } from '../core/components/navigation/navigation.module';
-import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
+import { FuseNavbarVerticalToggleDirective } from './navbar/vertical/navbar-vertical-toggle.directive';
+import { FuseNavbarHorizontalComponent } from './navbar/horizontal/navbar-horizontal.component';
 import { FuseQuickPanelComponent } from './quick-panel/quick-panel.component';
 import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
 import { FuseShortcutsModule } from '../core/components/shortcuts/shortcuts.module';
@@ -20,9 +21,10 @@ import { FuseSearchBarModule } from '../core/components/search-bar/search-bar.mo
         FuseContentComponent,
         FuseFooterComponent,
         FuseMainComponent,
-        FuseNavbarComponent,
+        FuseNavbarVerticalComponent,
+        FuseNavbarHorizontalComponent,
         FuseToolbarComponent,
-        FuseNavbarToggleDirective,
+        FuseNavbarVerticalToggleDirective,
         FuseThemeOptionsComponent,
         FuseQuickPanelComponent
     ],

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

@@ -0,0 +1 @@
+<fuse-navigation layout="horizontal"></fuse-navigation>

src/app/main/navbar/horizontal/navbar-horizontal.component.scss

@@ -1,4 +1,4 @@
-@import "../../core/scss/fuse";
+@import "../../../core/scss/fuse";
 
 fuse-main {
 
@@ -23,7 +23,7 @@ fuse-main {
     }
 }
 
-fuse-navbar {
+fuse-navbar-vertical {
     display: flex;
     flex-direction: column;
     width: 256px;

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

@@ -0,0 +1,18 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector     : 'fuse-navbar-horizontal',
+    templateUrl  : './navbar-horizontal.component.html',
+    styleUrls    : ['./navbar-horizontal.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseNavbarHorizontalComponent implements OnInit
+{
+    constructor() {
+    }
+
+    ngOnInit()
+    {
+
+    }
+}

src/app/main/navbar/navbar-toggle.directive.ts

@@ -1,29 +0,0 @@
-import { Directive, HostListener, Input } from '@angular/core';
-import { FuseNavbarService } from './navbar.service';
-import { FuseNavbarComponent } from './navbar.component';
-
-@Directive({
-    selector: '[fuseNavbar]'
-})
-export class FuseNavbarToggleDirective
-{
-    @Input() fuseNavbar: string;
-    navbar: FuseNavbarComponent;
-
-    constructor(private navbarService: FuseNavbarService)
-    {
-    }
-
-    @HostListener('click')
-    onClick()
-    {
-        this.navbar = this.navbarService.getNavBar();
-
-        if ( !this.navbar[this.fuseNavbar] )
-        {
-            return;
-        }
-
-        this.navbar[this.fuseNavbar]();
-    }
-}

src/app/main/navbar/vertical/navbar-vertical-toggle.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, HostListener, Input } from '@angular/core';
+import { FuseNavbarVerticalService } from './navbar-vertical.service';
+import { FuseNavbarVerticalComponent } from './navbar-vertical.component';
+
+@Directive({
+    selector: '[fuseNavbarVertical]'
+})
+export class FuseNavbarVerticalToggleDirective
+{
+    @Input() fuseNavbarVertical: string;
+    navbar: FuseNavbarVerticalComponent;
+
+    constructor(private navbarService: FuseNavbarVerticalService)
+    {
+    }
+
+    @HostListener('click')
+    onClick()
+    {
+        this.navbar = this.navbarService.getNavBar();
+
+        if ( !this.navbar[this.fuseNavbarVertical] )
+        {
+            return;
+        }
+
+        this.navbar[this.fuseNavbarVertical]();
+    }
+}

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

@@ -5,16 +5,16 @@
         <span class="logo-text">FUSE</span>
     </div>
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.lt-lg>
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="toggleFold" fxHide.lt-lg>
         <md-icon>menu</md-icon>
     </button>
 
-    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-md>
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbarVertical="closeBar" fxHide.gt-md>
         <md-icon>arrow_back</md-icon>
     </button>
 
 </div>
 
 <div class="navbar-content" perfect-scrollbar>
-    <fuse-navigation></fuse-navigation>
+    <fuse-navigation layout="vertical"></fuse-navigation>
 </div>

src/app/main/navbar/vertical/navbar-vertical.component.scss

@@ -0,0 +1,137 @@
+@import "../../../core/scss/fuse";
+
+fuse-main {
+
+    &.fuse-nav-bar-folded {
+
+        .content-wrapper {
+
+            &:last-child {
+                padding-left: 64px !important;
+            }
+
+            &:first-child {
+                padding-right: 64px !important;
+            }
+
+            &:first-child:last-child {
+                padding-left: 0 !important;
+                padding-right: 0 !important;
+            }
+
+        }
+    }
+}
+
+fuse-navbar-vertical {
+    display: flex;
+    flex-direction: column;
+    width: 256px;
+    min-width: 256px;
+    max-width: 256px;
+    background-color: #FFFFFF;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 3;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+    transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
+    transform: translateX(0);
+
+    &.folded {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+
+        &.left-navbar {
+            left: 0;
+        }
+        &.right-navbar {
+            right: 0;
+        }
+
+        &:not(.folded-open) {
+            width: 64px;
+            min-width: 64px;
+            max-width: 64px;
+
+            .navbar-header {
+                padding: 0 16px 0 16px;
+            }
+        }
+
+        &.folded-open {
+
+        }
+    }
+
+    &.close {
+        &.left-navbar {
+            transform: translateX(-100%) !important;
+        }
+        &.right-navbar {
+            transform: translateX(100%) !important;
+        }
+        box-shadow: none;
+    }
+
+    @include media-breakpoint('lt-lg') {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        &.left-navbar {
+            left: 0;
+        }
+        &.right-navbar {
+            right: 0;
+        }
+
+        &:not(.initialized) {
+            &.left-navbar {
+                transform: translateX(-100%);
+            }
+            &.right-navbar {
+                transform: translateX(100%);
+            }
+        }
+    }
+
+    .navbar-header {
+        padding: 0 16px 0 24px;
+        display: flex;
+        align-items: center;
+        height: 64px;
+        min-height: 64px;
+        justify-content: space-between;
+        transition: padding 200ms ease;
+        background-color: rgba(255, 255, 255, .05);
+        @include mat-elevation(1);
+
+        .logo {
+            display: flex;
+            align-items: center;
+
+            .logo-icon {
+                display: block;
+                background: #039BE5;
+                width: 32px;
+                min-width: 32px;
+                height: 32px;
+                line-height: 32px;
+                text-align: center;
+                font-size: 16px;
+                font-weight: 500;
+                color: #FFF;
+                border-radius: 2px;
+            }
+
+            .logo-text {
+                margin-left: 16px;
+                font-size: 16px;
+            }
+        }
+    }
+
+    .nav-bar-content {
+        flex: 1;
+    }
+}

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

@@ -1,20 +1,20 @@
 import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseMatchMedia } from '../../core/services/match-media.service';
-import { FuseNavbarService } from './navbar.service';
+import { FuseMatchMedia } from '../../../core/services/match-media.service';
+import { FuseNavbarVerticalService } from './navbar-vertical.service';
 import { ObservableMedia } from '@angular/flex-layout';
-import { FuseMainComponent } from '../main.component';
+import { FuseMainComponent } from '../../main.component';
 import { NavigationEnd, Router } from '@angular/router';
 import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
-import { FuseNavigationService } from '../../core/components/navigation/navigation.service';
+import { FuseNavigationService } from '../../../core/components/navigation/navigation.service';
 
 @Component({
-    selector     : 'fuse-navbar',
-    templateUrl  : './navbar.component.html',
-    styleUrls    : ['./navbar.component.scss'],
+    selector     : 'fuse-navbar-vertical',
+    templateUrl  : './navbar-vertical.component.html',
+    styleUrls    : ['./navbar-vertical.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarComponent implements OnInit, OnDestroy
+export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
 {
     @HostBinding('class.close') isClosed: boolean;
     @HostBinding('class.folded') isFoldedActive: boolean;
@@ -29,7 +29,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
         private fuseMainComponentEl: FuseMainComponent,
         private fuseMatchMedia: FuseMatchMedia,
         private fuseNavigationService: FuseNavigationService,
-        private navBarService: FuseNavbarService,
+        private navBarService: FuseNavbarVerticalService,
         public media: ObservableMedia,
         private router: Router
     )

src/app/main/navbar/vertical/navbar-vertical.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
 @Injectable()
-export class FuseNavbarService
+export class FuseNavbarVerticalService
 {
     navBarRef;
 

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

@@ -4,24 +4,23 @@
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
 
-            <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-md>
+            <button md-button class="toggle-button-navbar mat-icon-button"
+                    fuseNavbarVertical="openBar" fxHide.gt-md>
                 <md-icon>menu</md-icon>
             </button>
 
             <div class="toolbar-separator" fxHide.gt-md></div>
 
+            <div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
+                <div class="logo ml-16">
+                    <span class="logo-icon">F</span>
+                </div>
+            </div>
+
             <div class="px-8 px-md-16">
                 <fuse-shortcuts></fuse-shortcuts>
             </div>
 
-            <div class="toolbar-separator"></div>
-
-            <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
-               target="_blank" md-raised-button class="ml-8 ml-sm-24 md-pink-bg" fxFlex="0 0 auto" fxLayout="row"
-               fxLayoutAlign="start center" fxHide fxShow.gt-xs>
-                <md-icon class="s-16 mr-sm-4">shopping_cart</md-icon>
-                <span fxHide fxShow.gt-xs>Purchase Fuse template (Angular4+)</span>
-            </a>
         </div>
 
         <div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
@@ -80,7 +79,7 @@
                 </button>
             </md-menu>
 
-            <div class="toolbar-separator"></div>
+            <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
             <button md-icon-button
                     class="mat-icon-button quick-panel-toggle-button"

src/app/main/toolbar/toolbar.component.scss

@@ -15,6 +15,30 @@
         color: inherit;
     }
 
+    .logo {
+        display: flex;
+        align-items: center;
+
+        .logo-icon {
+            display: block;
+            background: #039BE5;
+            width: 32px;
+            min-width: 32px;
+            height: 32px;
+            line-height: 32px;
+            text-align: center;
+            font-size: 16px;
+            font-weight: 500;
+            color: #FFF;
+            border-radius: 2px;
+        }
+
+        .logo-text {
+            margin-left: 16px;
+            font-size: 16px;
+        }
+    }
+
     .loading-spinner {
         width: 32px;
         height: 32px;

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

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { FuseConfigService } from '../../core/services/config.service';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -13,8 +14,12 @@ export class FuseToolbarComponent
     languages: any;
     selectedLanguage: any;
     showSpinner: boolean;
+    horizontalNav: boolean;
 
-    constructor(private router: Router)
+    constructor(
+        private router: Router,
+        private fuseConfig: FuseConfigService
+    )
     {
         this.userStatusOptions = [
             {
@@ -75,6 +80,11 @@ export class FuseToolbarComponent
                     this.showSpinner = false;
                 }
             });
+
+        this.fuseConfig.onSettingsChanged.subscribe((settings) => {
+            this.horizontalNav = settings.layout.navigation === 'top';
+        });
+
     }
 
     search(value)

src/app/navigation.model.ts

@@ -1,10 +1,11 @@
 export class FuseNavigation
 {
-    public items: any[];
+    public verticalNavItems: any[];
+    public horizontalNavItems: any[];
 
     constructor()
     {
-        this.items = [
+        this.verticalNavItems = [
             {
                 'title': 'APPS',
                 'type' : 'subheader'
@@ -393,7 +394,417 @@ export class FuseNavigation
                         'url'  : '/components-third-party/datatables/ngx-datatable'
                     }
                 ]
+            }
+        ];
+
+        this.horizontalNavItems = [
+            {
+                'title'   : 'Applications',
+                'icon'    : 'apps',
+                'type'    : 'nav-collapse',
+                'children': [
+                    {
+                        'title'   : 'Dashboards',
+                        'type'    : 'nav-collapse',
+                        'icon'    : 'dashboard',
+                        'children': [
+                            {
+                                'type' : 'nav-item',
+                                'title': 'Project',
+                                'url'  : '/apps/dashboards/project'
+                            }
+                        ]
+                    },
+                    {
+                        'title': 'Calendar',
+                        'type' : 'nav-item',
+                        'icon' : 'today',
+                        'url'  : '/apps/calendar'
+                    },
+                    {
+                        'title': 'Mail',
+                        'type' : 'nav-item',
+                        'icon' : 'email',
+                        'url'  : '/apps/mail',
+                        'badge': {
+                            'title': 25,
+                            'bg'   : '#F44336',
+                            'fg'   : '#FFFFFF'
+                        }
+                    },
+                    {
+                        'title': 'Chat',
+                        'type' : 'nav-item',
+                        'icon' : 'chat',
+                        'url'  : '/apps/chat',
+                        'badge': {
+                            'title': 13,
+                            'bg'   : '#09d261',
+                            'fg'   : '#FFFFFF'
+                        }
+                    },
+                    {
+                        'title': 'File Manager',
+                        'type' : 'nav-item',
+                        'icon' : 'folder',
+                        'url'  : '/apps/file-manager'
+                    },
+                    {
+                        'title': 'Contacts',
+                        'type' : 'nav-item',
+                        'icon' : 'account_box',
+                        'url'  : '/apps/contacts'
+                    },
+                    {
+                        'title': 'To-Do',
+                        'type' : 'nav-item',
+                        'icon' : 'check_box',
+                        'url'  : '/apps/todo',
+                        'badge': {
+                            'title': 3,
+                            'bg'   : '#FF6F00',
+                            'fg'   : '#FFFFFF'
+                        }
+                    },
+                    {
+                        'title': 'Scrumboard',
+                        'type' : 'nav-item',
+                        'icon' : 'assessment',
+                        'url'  : '/apps/scrumboard'
+                    }
+                ]
             },
+            {
+                'title'   : 'Pages',
+                'icon'    : 'pages',
+                'type'    : 'nav-collapse',
+                'children': [
+                    {
+                        'title'   : 'Authentication',
+                        'type'    : 'nav-collapse',
+                        'icon'    : 'lock',
+                        'children': [
+                            {
+                                'title': 'Login',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/login'
+                            },
+                            {
+                                'title': 'Login v2',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/login-2'
+                            },
+                            {
+                                'title': 'Register',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/register'
+                            },
+                            {
+                                'title': 'Register v2',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/register-2'
+                            },
+                            {
+                                'title': 'Forgot Password',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/forgot-password'
+                            },
+                            {
+                                'title': 'Reset Password',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/reset-password'
+                            },
+                            {
+                                'title': 'Lock Screen',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/auth/lock'
+                            }
+                        ]
+                    },
+                    {
+                        'title': 'Coming Soon',
+                        'type' : 'nav-item',
+                        'icon' : 'alarm',
+                        'url'  : '/pages/coming-soon'
+                    },
+                    {
+                        'title'   : 'Errors',
+                        'type'    : 'nav-collapse',
+                        'icon'    : 'error',
+                        'children': [
+                            {
+                                'title': '404',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/errors/error-404'
+                            },
+                            {
+                                'title': '500',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/errors/error-500'
+                            }
+                        ]
+                    },
+                    {
+                        'title'   : 'Invoice',
+                        'type'    : 'nav-collapse',
+                        'icon'    : 'receipt',
+                        'children': [
+                            {
+                                'title': 'Modern',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/invoices/modern'
+                            },
+                            {
+                                'title': 'Compact',
+                                'type' : 'nav-item',
+                                'url'  : '/pages/invoices/compact'
+                            }
+                        ]
+                    },
+                    {
+                        'title': 'Maintenance',
+                        'type' : 'nav-item',
+                        'icon' : 'build',
+                        'url'  : '/pages/maintenance'
+                    },
+                    {
+                        'title': 'Profile',
+                        'type' : 'nav-item',
+                        'icon' : 'person',
+                        'url'  : '/pages/profile'
+                    },
+                    {
+                        'title': 'Search',
+                        'type' : 'nav-item',
+                        'icon' : 'search',
+                        'url'  : '/pages/search'
+                    }
+                ]
+            },
+            {
+                'title'   : 'User Interface',
+                'icon'    : 'web',
+                'type'    : 'nav-collapse',
+                'children': [
+                    {
+                        'title': 'Forms',
+                        'type' : 'nav-item',
+                        'icon' : 'web_asset',
+                        'url'  : '/ui/forms'
+                    },
+                    {
+                        'title': 'Icons',
+                        'type' : 'nav-item',
+                        'icon' : 'photo',
+                        'url'  : '/ui/icons'
+                    },
+                    {
+                        'title': 'Typography',
+                        'type' : 'nav-item',
+                        'icon' : 'text_fields',
+                        'url'  : '/ui/typography'
+                    },
+                    {
+                        'title': 'Helper Classes',
+                        'type' : 'nav-item',
+                        'icon' : 'help',
+                        'url'  : '/ui/helper-classes'
+                    },
+                    {
+                        'title'   : 'Page Layouts',
+                        'type'    : 'nav-collapse',
+                        'icon'    : 'view_quilt',
+                        'children': [
+                            {
+                                'title'   : 'Carded',
+                                'type'    : 'nav-collapse',
+                                'children': [
+                                    {
+                                        'title': 'Full Width',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/carded/full-width'
+                                    },
+                                    {
+                                        'title': 'Full Width 2',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/carded/full-width-2'
+                                    },
+                                    {
+                                        'title': 'Left Sidenav',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/carded/left-sidenav'
+                                    },
+                                    {
+                                        'title': 'Left Sidenav 2',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/carded/left-sidenav-2'
+                                    },
+                                    {
+                                        'title': 'Right Sidenav',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/carded/right-sidenav'
+                                    },
+                                    {
+                                        'title': 'Right Sidenav 2',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/carded/right-sidenav-2'
+                                    }
+                                ]
+                            },
+                            {
+                                'title'   : 'Simple',
+                                'type'    : 'nav-collapse',
+                                'children': [
+                                    {
+                                        'title': 'Full Width',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/full-width'
+                                    },
+                                    {
+                                        'title': 'Left Sidenav',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/left-sidenav'
+                                    },
+                                    {
+                                        'title': 'Left Sidenav 2',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/left-sidenav-2'
+                                    },
+                                    {
+                                        'title': 'Left Sidenav 3',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/left-sidenav-3'
+                                    },
+                                    {
+                                        'title': 'Right Sidenav',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/right-sidenav'
+                                    },
+                                    {
+                                        'title': 'Right Sidenav 2',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/right-sidenav-2'
+                                    },
+                                    {
+                                        'title': 'Right Sidenav 3',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/right-sidenav-3'
+                                    },
+                                    {
+                                        'title': 'Tabbed',
+                                        'type' : 'nav-item',
+                                        'url'  : '/ui/page-layouts/simple/tabbed'
+                                    }
+                                ]
+                            },
+                            {
+                                'title': 'Blank',
+                                'type' : 'nav-item',
+                                'url'  : '/ui/page-layouts/blank'
+                            }
+                        ]
+                    },
+                    {
+                        'title': 'Colors',
+                        'type' : 'nav-item',
+                        'icon' : 'color_lens',
+                        'url'  : '/ui/colors'
+                    }
+                ]
+            },
+            {
+                'title'   : 'Services',
+                'icon'    : 'settings',
+                'type'    : 'nav-collapse',
+                'children': [
+                    {
+                        'title': 'Config',
+                        'type' : 'nav-item',
+                        'icon' : 'settings',
+                        'url'  : '/services/config'
+                    },
+                    {
+                        'title': 'Splash Screen',
+                        'type' : 'nav-item',
+                        'icon' : 'settings',
+                        'url'  : '/services/splash-screen'
+                    }
+                ]
+            },
+            {
+                'title'   : 'Components',
+                'icon'    : 'settings_input_component',
+                'type'    : 'nav-collapse',
+                'children': [
+                    {
+                        'title': 'Countdown',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/countdown'
+                    },
+                    {
+                        'title': 'Highlight.js',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/highlightjs'
+                    },
+                    {
+                        'title': 'Material Color Picker',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/material-color-picker'
+                    },
+                    {
+                        'title': 'Navigation',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/navigation'
+                    },
+                    {
+                        'title': 'Price Tables',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/price-tables'
+                    },
+                    {
+                        'title': 'Search Bar',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/search-bar'
+                    },
+                    {
+                        'title': 'Shortcuts',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/shortcuts'
+                    },
+                    {
+                        'title': 'Widget',
+                        'type' : 'nav-item',
+                        'icon' : 'settings_input_component',
+                        'url'  : '/components/widget'
+                    },
+                    {
+                        'title'   : '3rd Party components',
+                        'icon'    : 'settings_input_component',
+                        'type'    : 'nav-collapse',
+                        'children': [
+                            {
+                                'title'   : 'Datatables',
+                                'type'    : 'nav-collapse',
+                                'icon'    : 'border_all',
+                                'children': [
+                                    {
+                                        'title': 'ngx-datatable',
+                                        'type' : 'nav-item',
+                                        'url'  : '/components-third-party/datatables/ngx-datatable'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
         ];
     }
 }

src/index.html

@@ -183,7 +183,7 @@
         <!-- / FUSE Splash Screen CSS -->
     </head>
 
-    <body>
+    <body class="primary-800-bg">
 
         <!-- FUSE Splash Screen -->
         <fuse-splash-screen id="fuse-splash-screen">