Merge branch 'master' into skeleton

angular.json

@@ -49,6 +49,10 @@
                             "vendorChunk": false,
                             "buildOptimizer": true
                         },
+                        "ec": {
+                            "sourceMap": true,
+                            "extractCss": true
+                        },
                         "hmr": {
                             "fileReplacements": [
                                 {
@@ -71,6 +75,9 @@
                         "hmr": {
                             "hmr": true,
                             "browserTarget": "fuse:build:hmr"
+                        },
+                        "ec": {
+                            "browserTarget": "fuse:build:ec"
                         }
                     }
                 },

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.1.2",
+  "version": "6.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -129,9 +129,9 @@
       }
     },
     "@angular/cdk": {
-      "version": "6.3.1",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.3.tgz",
-      "integrity": "sha512-TEf1pstDmoLk4C0H45CxpdkBLunNYRQS1pCyWf7hWOHC0M0m130CYZ+rMt4uVDLe4NxiFUk3XwHITB3AuSlCOQ==",
+      "integrity": "sha512-cfUwvnGGByZy/poA75/vsELBq68eDUYJe3qi0WvSbtFzbQlsxeqaBiaxVYqmHJkPlSF5nsUhg5KvDowED3a4sA==",
       "requires": {
         "tslib": "^1.7.1"
       }
@@ -373,17 +373,26 @@
       "dev": true
     },
     "@angular/material": {
-      "version": "6.3.1",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.3.tgz",
-      "integrity": "sha512-2M5be3Re1EqTl+i5KuS54P/s+i2AQYlv6swR8ukwXR2arwXy8ewtuwiPjUQulpuEaUkKTQ3f6WndXAgP40Ou7A==",
+      "integrity": "sha512-3qTZ8+pjc8P1D+TLr9ETGfFyMYO+BAQlFiVs3oV8rw5y0Wzkz6G1JHfKQ2oOd8/npXP6rJQldssUM4IBbSOxIQ==",
       "requires": {
+        "parse5": "^5.0.0",
         "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.0.0.tgz",
+          "integrity": "sha512-0ywuiUOnpWWeil5grH2rxjyTJoeQVwyBuO2si6QIU9dWtj2npjuyK1HaY1RbLnVfDhEbhyAPNUBKRK0Xj2xE0w==",
+          "optional": true
+        }
       }
     },
     "@angular/material-moment-adapter": {
-      "version": "6.3.1",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.3.tgz",
-      "integrity": "sha512-rttEepHc/eVEUEErz8eg6063KC79vVN6/rATuoabfgtIqtoSEuft18SkwCt7gQz6lWtuJA1oFc3HIXhN8gxKBw==",
+      "integrity": "sha512-YFi1iED8gcHhCwkWGMkyJtHX/tWAsQWnRNrh1AwbWl4JW1739vPAM/OimdIijeGAZ5dVVZX4A4EscCBb74b4dA==",
       "requires": {
         "tslib": "^1.7.1"
       }
@@ -7168,9 +7177,9 @@
       }
     },
     "ngx-color-picker": {
-      "version": "6.3.3",
+      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.4.0.tgz",
-      "integrity": "sha512-0uoxt+3BtanTTbQj9elpsZe/6a/BWAl8jdl0m6OyrCXlCiO3q4zGZjWee4905RF0NXGxQvDWT27coqmDeXGsvw=="
+      "integrity": "sha512-u4UeeSdZoaGmHJCSlFQGe0xhOLB63rms35IjI7HhHz9MS4VeCQa4UiFMK9Dgjg1FuGt2nEyj/4Fs6tpQfgXEXQ=="
     },
     "ngx-cookie-service": {
       "version": "1.0.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.1.2",
+  "version": "6.2.0",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -20,15 +20,15 @@
   "dependencies": {
     "@agm/core": "1.0.0-beta.3",
     "@angular/animations": "6.0.7",
-    "@angular/cdk": "6.3.1",
+    "@angular/cdk": "6.3.3",
     "@angular/common": "6.0.7",
     "@angular/compiler": "6.0.7",
     "@angular/core": "6.0.7",
     "@angular/flex-layout": "6.0.0-beta.16",
     "@angular/forms": "6.0.7",
     "@angular/http": "6.0.7",
-    "@angular/material": "6.3.1",
+    "@angular/material": "6.3.3",
-    "@angular/material-moment-adapter": "6.3.1",
+    "@angular/material-moment-adapter": "6.3.3",
     "@angular/platform-browser": "6.0.7",
     "@angular/platform-browser-dynamic": "6.0.7",
     "@angular/router": "6.0.7",
@@ -52,7 +52,7 @@
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.3.3",
+    "ngx-color-picker": "6.4.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",

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

@@ -37,12 +37,6 @@ fuse-sidebar {
         position: absolute !important;
         top: 0;
         bottom: 0;
-
-        &:not(.unfolded) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-        }
     }
 
     &.animations-enabled {

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

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Ho
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/internal/operators';
+import { takeUntil } from 'rxjs/operators';
 
 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@@ -40,6 +40,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostBinding('class.locked-open')
     isLockedOpen: boolean;
 
+    // Folded width
+    @Input()
+    foldedWidth: number;
+
+    // Folded auto trigger on hover
+    @Input()
+    foldedAutoTriggerOnHover: boolean;
+
     // Folded unfolded
     @HostBinding('class.unfolded')
     unfolded: boolean;
@@ -92,6 +100,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     )
     {
         // Set the defaults
+        this.foldedAutoTriggerOnHover = true;
+        this.foldedWidth = 64;
         this.foldedChanged = new EventEmitter();
         this.openedChanged = new EventEmitter();
         this.opened = false;
@@ -108,7 +118,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
-    // Folded
+    /**
+     * Folded
+     *
+     * @param {boolean} value
+     */
     @Input()
     set folded(value: boolean)
     {
@@ -121,23 +135,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
         // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
         if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
         }
         else
         {
             sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -152,6 +166,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             // Fold the sidebar
             this.fold();
 
+            // Set the folded width
+            this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
             // Set the style and class
             this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
             this._renderer.addClass(this._elementRef.nativeElement, 'folded');
@@ -162,6 +181,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             // Unfold the sidebar
             this.unfold();
 
+            // Remove the folded width
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
             // Remove the style and class
             this._renderer.removeStyle(sibling, styleRule);
             this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
@@ -375,23 +399,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             return;
         }
 
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
         // that comes after or before based on the position
         let sibling,
             styleRule;
 
-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';
 
         // Get the sibling and set the style rule
         if ( this.position === 'left' )
         {
             sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
         }
         else
         {
             sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
         }
 
         // If there is no sibling, return...
@@ -403,6 +427,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
         // Fold the sidebar
         this.fold();
 
+        // Set the folded width
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
         // Set the style and class
         this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
         this._renderer.addClass(this._elementRef.nativeElement, 'folded');
@@ -633,20 +662,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseenter')
     onMouseEnter(): void
     {
-        // Only work if the sidebar is folded
+        // Only work if the auto trigger is enabled
-        if ( !this.folded )
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Enable the animations
+        this.unfoldTemporarily();
-        this._enableAnimations();
-
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -655,20 +677,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseleave')
     onMouseLeave(): void
     {
-        // Only work if the sidebar is folded
+        // Only work if the auto trigger is enabled
-        if ( !this.folded )
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Enable the animations
+        this.foldTemporarily();
-        this._enableAnimations();
-
-        // Fold the sidebar back
-        this.unfolded = false;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -727,4 +742,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
             this.fold();
         }
     }
+
+    /**
+     * Fold the temporarily unfolded sidebar back
+     */
+    foldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Fold the sidebar back
+        this.unfolded = false;
+
+        // Set the folded width
+        const styleValue = this.foldedWidth + 'px';
+
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
+
+        // Remove the folded width
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
 }

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

@@ -73,6 +73,17 @@
                             <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- TOOLBAR -->
@@ -91,6 +102,11 @@
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -109,6 +125,11 @@
                             <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                 </ng-container>
@@ -146,6 +167,17 @@
                             <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- TOOLBAR -->
@@ -164,6 +196,11 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -182,6 +219,11 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                 </ng-container>
@@ -219,6 +261,17 @@
                             <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- TOOLBAR -->
@@ -236,6 +289,11 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -253,6 +311,11 @@
                             <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                 </ng-container>
@@ -285,6 +348,17 @@
                             <mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-8">Variant (Vertical):</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- TOOLBAR -->
@@ -302,6 +376,11 @@
                             <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                     <!-- FOOTER -->
@@ -319,6 +398,11 @@
                             <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
                         </mat-radio-group>
 
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
                     </div>
 
                 </ng-container>
@@ -338,35 +422,6 @@
 
         </div>
 
-        <!-- COLORS -->
-        <div class="group">
-
-            <h2>Colors</h2>
-
-            <div class="colors">
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Toolbar Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
-                </div>
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Navbar Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.navbar.background"></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)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
-                </div>
-
-            </div>
-
-        </div>
-
     </form>
 
 </div>

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

@@ -73,11 +73,6 @@
                     }
                 }
             }
-
-            .colors {
-                display: block !important;
-                width: 100%;
-            }
         }
     }
 }

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

@@ -65,20 +65,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                 style  : new FormControl(),
                 width  : new FormControl(),
                 navbar : this._formBuilder.group({
+                    background: new FormControl(),
+                    folded    : new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl(),
-                    folded    : new FormControl(),
+                    variant   : new FormControl()
-                    background: new FormControl()
                 }),
                 toolbar: this._formBuilder.group({
+                    background: new FormControl(),
                     hidden    : new FormControl(),
-                    position  : new FormControl(),
+                    position  : new FormControl()
-                    background: new FormControl()
                 }),
                 footer : this._formBuilder.group({
+                    background: new FormControl(),
                     hidden    : new FormControl(),
-                    position  : new FormControl(),
+                    position  : new FormControl()
-                    background: new FormControl()
                 })
             }),
             customScrollbars: new FormControl()
@@ -174,20 +175,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width  : 'fullwidth',
                         navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                             hidden    : false,
                             position  : 'left',
-                            folded    : false,
+                            variant   : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'below-static',
+                            position  : 'below-static'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'below-static',
+                            position  : 'below-static'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });
@@ -202,20 +204,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width  : 'fullwidth',
                         navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                             hidden    : false,
                             position  : 'left',
-                            folded    : false,
+                            variant   : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'below',
+                            position  : 'below'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'below',
+                            position  : 'below'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });
@@ -230,20 +233,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width  : 'fullwidth',
                         navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                             hidden    : false,
                             position  : 'left',
-                            folded    : false,
+                            layout    : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'above-static',
+                            position  : 'above-static'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'above-static',
+                            position  : 'above-static'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });
@@ -258,20 +262,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                     layout: {
                         width  : 'fullwidth',
                         navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                             hidden    : false,
                             position  : 'top',
-                            folded    : false,
+                            variant   : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'above',
+                            position  : 'above'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'above-fixed',
+                            position  : 'above-fixed'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });

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

@@ -14,7 +14,7 @@ i {
 }
 
 // Material colors map
-$matColorsMap: (
+$matPalettes: (
     primary: $primary,
     accent: $accent,
     warn: $warn,
@@ -43,13 +43,16 @@ $matColorsMap: (
 );
 
 // Material color hues list
-$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
 
 // Text color levels generator mixin
-@mixin generateTextColorLevels($baseTextColor) {
+@mixin generateTextColorLevels($classes, $contrast) {
 
-    // If the base text color is black...
+    // If the contrast is dark...
-    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+    @if ($contrast == 'dark') {
+
+        // Put down the color classes
+        #{$classes} {
 
             i,
             .icon {
@@ -77,10 +80,18 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
                 background: rgba(0, 0, 0, 0.1);
             }
 
+            .adaptive-border-color {
+                border-color: rgba(0, 0, 0, 0.12);
+            }
+        }
+
     }
         // If the base text color is white...
     @else {
 
+        // Put down the color classes
+        #{$classes} {
+
             i,
             .icon {
                 color: rgba(255, 255, 255, 1);
@@ -106,12 +117,17 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
             .mat-ripple-element {
                 background: rgba(255, 255, 255, 0.1);
             }
+
+            .adaptive-border-color {
+                border-color: rgba(255, 255, 255, 0.12);
+            }
+        }
     }
 }
 
-@mixin generateMaterialElementColors($contrastColor) {
+@mixin generateMaterialElementColors($classes, $contrast) {
 
-    // If the contrast color is white...
+    // If the contrast color is light...
     $fuseForeground: (
         base: white,
         text: white,
@@ -119,8 +135,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         divider: rgba(white, 0.12),
     );
 
-    // If the contrast color is black...
+    // If the contrast color is dark...
-    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
+    @if ($contrast == 'dark') {
 
         $fuseForeground: (
             base: black,
@@ -129,6 +145,9 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         );
     }
 
+    // Put down the color classes
+    #{$classes} {
+
         // Native Input
         input[type="text"] {
             color: map_get($fuseForeground, base);
@@ -168,6 +187,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
             color: map_get($fuseForeground, text);
         }
     }
+}
 
 // Color classes generator mixin
 @mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
@@ -180,14 +200,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
         background-color: $color !important;
         color: $contrastColor !important;
 
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($contrastColor);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($contrastColor);
-
         &[disabled] {
             background-color: rgba($color, .12) !important;
             color: rgba($contrastColor, .26) !important;
@@ -196,14 +208,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
     .#{$colorName}#{$hue}-fg {
         color: $color !important;
-
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($color);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($color);
     }
 
     .#{$colorName}#{$hue}-border {
@@ -229,49 +233,126 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
 
 @mixin generateFuseColorClasses($primary, $accent, $warn) {
 
-    $colorMap: (
+    $palettes: (
         primary: $primary,
         accent: $accent,
         warn: $warn
     );
 
+    // Define contrast lists
+    $light-contrasting-classes: ();
+    $dark-contrasting-classes: ();
+
     // Generate the color classes...
-    @each $name, $map in $colorMap {
+    @each $paletteName, $palette in $palettes {
 
-        @each $hue in $matColorHues {
+        // Get the contrasts map
+        $contrasts: map-get($palette, 'contrast');
 
-            $color: map-get($map, $hue);
+        @each $hue in $matHues {
-            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
 
-            @if ($color != null and $contrastColor != null) {
+            // Get the color and the contrasting color
+            $color: map-get($palette, $hue);
+            $contrast: map-get($contrasts, $hue);
 
-                @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
+            @if ($color != null and $contrast != null) {
+
+                // Generate color classes
+                @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) == rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                }
 
                 // Run the generator one more time for default values (500)
                 @if ($hue == 500) {
-                    @include generateColorClasses($name, $color, $contrastColor, '');
+
+                    // Generate color classes
+                    @include generateColorClasses($paletteName, $color, $contrast, '');
+
+                    // Add color to the correct list depending on the contrasting color
+
+                    // If the contrast color is dark
+                    @if (rgba(black, 1) == rgba($contrast, 1)) {
+                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                    }
+                        // if the contrast color is light
+                    @else {
+                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
                     }
                 }
             }
         }
     }
 
+    // Generate contrasting colors
+    @include generateTextColorLevels($dark-contrasting-classes, 'dark');
+    @include generateTextColorLevels($light-contrasting-classes, 'light');
+    @include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+    @include generateMaterialElementColors($light-contrasting-classes, 'light');
+}
+
 // Generate the color classes...
-@each $colorName, $colorMap in $matColorsMap {
 
-    @each $hue in $matColorHues {
+// Define contrast lists
+$light-contrasting-classes: ();
+$dark-contrasting-classes: ();
 
-        $color: map-get($colorMap, $hue);
+@each $paletteName, $palette in $matPalettes {
-        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
 
-        @if ($color != null and $contrastColor != null) {
+    // Get the contrasts map
+    $contrasts: map-get($palette, 'contrast');
 
-            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
+    @each $hue in $matHues {
+
+        // Get the color and the contrasting color
+        $color: map-get($palette, $hue);
+        $contrast: map-get($contrasts, $hue);
+
+        @if ($color != null and $contrast != null) {
+
+            // Generate color classes
+            @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+
+            // Add color to the correct list depending on the contrasting color
+
+            // If the contrast color is dark
+            @if (rgba(black, 1) == rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+            }
+                // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+            }
 
             // Run the generator one more time for default values (500)
             @if ($hue == 500) {
-                @include generateColorClasses($colorName, $color, $contrastColor, '');
+
+                // Generate color classes
+                @include generateColorClasses($paletteName, $color, $contrast, '');
+
+                // Add color to the correct list depending on the contrasting color
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) == rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
                 }
             }
         }
     }
+}
+
+// Generate contrasting colors
+@include generateTextColorLevels($dark-contrasting-classes, 'dark');
+@include generateTextColorLevels($light-contrasting-classes, 'light');
+@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+@include generateMaterialElementColors($light-contrasting-classes, 'light');

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

@@ -219,4 +219,26 @@
             }
         }
     }
+
+    // Material style
+    &.material {
+
+        .nav-subheader {
+            border-top: 1px solid rgba(0, 0, 0, 0.12);
+
+            &:first-child {
+                border-top: none;
+            }
+        }
+
+        .nav-item {
+
+            .nav-link {
+                height: 40px;
+                padding: 0 16px;
+                margin: 4px 8px;
+                border-radius: 4px;
+            }
+        }
+    }
 }

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

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

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 :host {
     position: relative;
     display: flex;
@@ -9,7 +11,7 @@
     .theme-options-button {
         position: absolute;
         top: 160px;
-        right: 0;
+        right: 70px;
         width: 48px;
         height: 48px;
         line-height: 48px;
@@ -18,9 +20,13 @@
         border-radius: 0;
         margin: 0;
         pointer-events: auto;
-        opacity: .75;
+        opacity: .90;
         z-index: 998;
 
+        @include media-breakpoint-down('md') {
+            right: 0;
+        }
+
         mat-icon {
             animation: rotating 3s linear infinite;
         }

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

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

src/app/fuse-config/index.ts

@@ -13,20 +13,21 @@ export const fuseConfig: FuseConfig = {
         style  : 'vertical-layout-1',
         width  : 'fullwidth',
         navbar : {
+            background: 'mat-fuse-dark-700-bg',
+            folded    : false,
             hidden    : false,
             position  : 'left',
-            folded    : false,
+            variant   : 'vertical-style-1'
-            background: 'mat-fuse-dark-700-bg'
         },
         toolbar: {
+            background: 'mat-white-500-bg',
             hidden    : false,
-            position  : 'below-static',
+            position  : 'below-static'
-            background: 'mat-white-500-bg'
         },
         footer : {
+            background: 'mat-fuse-dark-900-bg',
             hidden    : false,
-            position  : 'below-static',
+            position  : 'below-fixed'
-            background: 'mat-fuse-dark-900-bg'
         }
     },
     customScrollbars: true

src/app/layout/components/chat-panel/chat-panel.component.html

@@ -0,0 +1,119 @@
+<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
+
+    <ng-container *ngIf="selectedContact === null">
+
+        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
+            <mat-icon class="s-32 white-fg">chat</mat-icon>
+            <h3 class="ml-12">Team Chat</h3>
+        </div>
+
+    </ng-container>
+
+    <ng-container *ngIf="selectedContact !== null">
+
+        <div class="title" fxLayout="row" fxLayoutAlign="start center">
+            <img [src]="selectedContact.avatar" class="avatar mx-16">
+            <h3 class="text-truncate">{{selectedContact.name}}</h3>
+        </div>
+
+    </ng-container>
+
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily()" fxHide fxShow.gt-md>
+        <mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
+    </button>
+
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
+        <mat-icon class="secondary-text">arrow_forward</mat-icon>
+    </button>
+
+</div>
+
+<div>
+
+    <!-- Contacts -->
+    <mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+
+        <mat-list-item *ngFor="let contact of contacts"
+                       [ngClass]="contact.status"
+                       [class.active]="contact.id === selectedContact?.id"
+                       (click)="goToChat(contact)"
+                       [matTooltip]="contact.name"
+                       matTooltipPosition="left"
+                       matRipple>
+
+            <img matListAvatar [src]="contact.avatar">
+            <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
+            <div class="status-icon" [ngClass]="contact.status"></div>
+
+        </mat-list-item>
+
+    </mat-list>
+    <!-- / Contacts -->
+
+    <!-- Chat -->
+    <div id="chat" fxLayout="column" fxFlex="1 1 auto">
+
+        <div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
+
+            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
+
+                <div *ngFor="let message of chat.dialog; let i = index" class="message-row"
+                     [ngClass]="{
+                            'me': message.who === user.id,
+                            'contact': message.who !== user.id,
+                            'first-of-group': isFirstMessageOfGroup(message, i),
+                            'last-of-group': isLastMessageOfGroup(message, i)
+                            }">
+
+                    <img *ngIf="shouldShowContactAvatar(message, i)"
+                         src="{{selectedContact.avatar}}"
+                         class="avatar">
+
+                    <div class="bubble">
+                        <div class="message">{{message.message}}</div>
+                        <div class="time secondary-text">{{message.time | date:'short'}}</div>
+                    </div>
+
+                </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
+
+                <div class="no-messages-icon">
+                    <mat-icon class="s-128">chat</mat-icon>
+                </div>
+
+                <div class="no-messages secondary-text">
+                    Start a conversation by typing your message below.
+                </div>
+            </ng-container>
+
+        </div>
+
+        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
+
+            <form #replyForm="ngForm"
+                  (ngSubmit)="reply($event)"
+                  (keydown.enter)="reply($event)"
+                  fxFlex
+                  fxLayout="row"
+                  fxLayoutAlign="start center">
+
+                <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
+                    <textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
+                              [rows]="1" [matTextareaAutosize]="true"></textarea>
+                </mat-form-field>
+
+                <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
+                    <mat-icon class="secondary-text">send</mat-icon>
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+    <!-- / Chat -->
+
+</div>

src/app/layout/components/chat-panel/chat-panel.component.scss

@@ -0,0 +1,374 @@
+@import "src/@fuse/scss/fuse";
+
+chat-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: 360px;
+    min-width: 360px;
+    max-width: 360px;
+    z-index: 99;
+    overflow: hidden;
+
+    .header {
+        height: 64px;
+        max-height: 64px;
+        min-height: 64px;
+
+        .title {
+
+            mat-icon {
+                margin-left: 4px;
+            }
+
+            h3 {
+                max-width: 120px;
+                transition: opacity 300ms ease-in-out;
+            }
+        }
+    }
+
+    #contacts-list {
+        padding: 8px 0;
+        overflow: auto;
+        width: 72px;
+        min-width: 72px;
+        max-width: 72px;
+
+        // Perfect scrollbar
+        .ps__rail-y {
+            width: 3px !important;
+
+            .ps__thumb-y {
+                width: 3px !important;
+            }
+        }
+
+        .mat-list-item {
+            cursor: pointer;
+            position: relative;
+
+            &.active {
+                background-color: mat-color(mat-palette($mat-grey, 300));
+                @include mat-elevation(2);
+            }
+
+            &.offline {
+
+                .mat-list-item-content {
+
+                    img {
+                        filter: grayscale(100%);
+                        opacity: 0.7;
+                    }
+
+                    h3 {
+                        opacity: 0.7;
+                    }
+                }
+            }
+
+            .mat-list-item-content {
+
+                .unread-count {
+                    position: absolute;
+                    min-width: 18px;
+                    height: 18px;
+                    top: 4px;
+                    left: 10px;
+                    border-radius: 9px;
+                    padding: 0 5px;
+                    font-size: 11px;
+                    text-align: center;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: mat-color(mat-palette($mat-indigo));
+                    color: white;
+                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+                }
+
+                .status-icon {
+                    position: absolute;
+                    width: 12px;
+                    height: 12px;
+                    bottom: 3px;
+                    left: 44px;
+                    border: 2px solid white;
+                    border-radius: 50%;
+
+                    &.online {
+                        background-color: #4CAF50;
+                    }
+
+                    &.do-not-disturb {
+                        background-color: #F44336;
+                    }
+
+                    &.away {
+                        background-color: #FFC107;
+                    }
+
+                    &.offline {
+                        background-color: #646464;
+                    }
+                }
+            }
+        }
+    }
+
+    #chat {
+        background-color: mat-color(mat-palette($mat-grey, 300));
+
+        .messages {
+            position: relative;
+            overflow: auto;
+            padding: 16px 0 40px 40px;
+
+            .message-row {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: flex-end;
+                padding: 0 16px 4px 16px;
+
+                .avatar {
+                    position: absolute;
+                    left: -32px;
+                    margin: 0;
+                }
+
+                .bubble {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 12px;
+
+                    .message {
+                        white-space: pre-wrap;
+                        line-height: 1.2;
+                    }
+
+                    .time {
+                        position: absolute;
+                        display: none;
+                        width: 100%;
+                        font-size: 11px;
+                        margin-top: 8px;
+                        top: 100%;
+                        color: $black-87-opacity;
+                        white-space: nowrap;
+                    }
+                }
+
+                &.contact {
+
+                    .bubble {
+                        background-color: mat-color(mat-palette($mat-indigo));
+                        color: white;
+
+                        border-top-left-radius: 5px;
+                        border-bottom-left-radius: 5px;
+
+                        border-top-right-radius: 20px;
+                        border-bottom-right-radius: 20px;
+
+                        .time {
+                            margin-left: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-left-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-left-radius: 20px;
+                        }
+                    }
+                }
+
+                &.me {
+                    padding-left: 40px;
+
+                    .avatar {
+                        order: 2;
+                        margin: 0 0 0 16px;
+                    }
+
+                    .bubble {
+                        margin-left: auto;
+                        background-color: #FFFFFF;
+                        color: $black-87-opacity;
+
+                        border-top-left-radius: 20px;
+                        border-bottom-left-radius: 20px;
+
+                        border-top-right-radius: 5px;
+                        border-bottom-right-radius: 5px;
+
+                        .time {
+                            justify-content: flex-end;
+                            right: 0;
+                            margin-right: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-right-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-right-radius: 20px;
+                        }
+                    }
+                }
+
+                &.contact + .me,
+                &.me + .contact {
+                    padding-top: 20px;
+                    margin-top: 20px;
+                }
+
+                &.first-of-group {
+
+                    .bubble {
+                        border-top-left-radius: 20px;
+                        padding-top: 13px;
+                    }
+                }
+
+                &.last-of-group {
+
+                    .bubble {
+                        border-bottom-left-radius: 20px;
+                        padding-bottom: 13px;
+
+                        .time {
+                            display: flex;
+                        }
+                    }
+                }
+            }
+
+            .no-messages-icon {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                padding: 0 24px;
+                margin-top: -64px;
+                text-align: center;
+
+                mat-icon {
+                    color: rgba(0, 0, 0, 0.06);
+                }
+            }
+
+            .no-messages {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                padding: 0 16px 24px 16px;
+                text-align: center;
+            }
+        }
+
+        .reply-form {
+            position: relative;
+
+            .message-text {
+                padding: 16px 8px;
+
+                .mat-form-field-wrapper {
+                    padding: 0;
+
+                    .mat-form-field-flex {
+                        padding: 0;
+
+                        .mat-form-field-infix {
+                            padding: 0;
+                            border: none;
+                            background: white;
+                            border-radius: 20px;
+                            @include mat-elevation(2);
+
+                            textarea {
+                                overflow: hidden;
+                                margin: 16px 48px 16px 16px;
+                                width: calc(100% - 64px);
+                                padding: 0;
+                            }
+                        }
+                    }
+
+                    .mat-form-field-underline {
+                        display: none !important;
+                    }
+                }
+            }
+
+            .send-message-button {
+                position: absolute;
+                right: 16px;
+                bottom: 21px;
+            }
+        }
+    }
+}
+
+fuse-sidebar {
+
+    &.chat-panel {
+        width: 360px;
+        min-width: 360px;
+        max-width: 360px;
+
+        // Folded
+        &.folded {
+
+            chat-panel {
+
+                .header {
+
+                    .title {
+
+                        h3 {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+
+            // Folded unfolded
+            &.unfolded {
+
+                chat-panel {
+
+                    .header {
+
+                        .title {
+
+                            h3 {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/app/layout/components/chat-panel/chat-panel.component.ts

@@ -0,0 +1,269 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
+
+@Component({
+    selector     : 'chat-panel',
+    templateUrl  : './chat-panel.component.html',
+    styleUrls    : ['./chat-panel.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
+{
+    contacts: any[];
+    chat: any;
+    selectedContact: any;
+    sidebarFolded: boolean;
+    user: any;
+
+    @ViewChild('replyForm')
+    set replyForm(content: NgForm)
+    {
+        this._replyForm = content;
+    }
+
+    @ViewChild('replyInput')
+    set replyInput(content: ElementRef)
+    {
+        this._replyInput = content;
+    }
+
+    @ViewChildren(FusePerfectScrollbarDirective)
+    private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
+
+    // Private
+    private _chatViewScrollbar: FusePerfectScrollbarDirective;
+    private _replyForm: NgForm;
+    private _replyInput: ElementRef;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ChatPanelService} _chatPanelService
+     * @param {HttpClient} _httpClient
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _chatPanelService: ChatPanelService,
+        private _httpClient: HttpClient,
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+        // Set the defaults
+        this.selectedContact = null;
+        this.sidebarFolded = true;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Load the contacts
+        this._chatPanelService.loadContacts().then(() => {
+
+            this.contacts = this._chatPanelService.contacts;
+            this.user = this._chatPanelService.user;
+        });
+
+        // Subscribe to the foldedChanged observable
+        this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((folded) => {
+                this.sidebarFolded = folded;
+            });
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
+            return directive.elementRef.nativeElement.id === 'messages';
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Prepare the chat for the replies
+     */
+    private _prepareChatForReplies(): void
+    {
+        setTimeout(() => {
+
+            // Reset the reply form
+            this._replyForm.reset();
+
+            // Focus to the reply input
+            this._replyInput.nativeElement.focus();
+
+            // Scroll to the bottom of the messages list
+            if ( this._chatViewScrollbar )
+            {
+                this._chatViewScrollbar.update();
+
+                setTimeout(() => {
+                    this._chatViewScrollbar.scrollToBottom(0);
+                });
+            }
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar folded status
+     */
+    toggleSidebarFolded(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
+    }
+
+    /**
+     * Fold the temporarily unfolded sidebar back
+     */
+    foldSidebarTemporarily(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldSidebarTemporarily(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
+    }
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpen(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
+    }
+
+    /**
+     * Decide whether to show or not the contact's avatar in the message row
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    shouldShowContactAvatar(message, i): boolean
+    {
+        return (
+            message.who === this.selectedContact.id &&
+            ((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
+        );
+    }
+
+    /**
+     * Check if the given message is the first message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isFirstMessageOfGroup(message, i): boolean
+    {
+        return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
+    }
+
+    /**
+     * Check if the given message is the last message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isLastMessageOfGroup(message, i): boolean
+    {
+        return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
+    }
+
+    /**
+     * Go to chat with the contact
+     *
+     * @param contact
+     */
+    goToChat(contact): void
+    {
+        // Unfold the sidebar temporarily
+        this.unfoldSidebarTemporarily();
+
+        // Set the selected contact
+        this.selectedContact = contact;
+
+        // Load the chat
+        this._chatPanelService.getChat(contact.id).then((chat) => {
+
+            // Set the chat
+            this.chat = chat;
+
+            // Prepare the chat for the replies
+            this._prepareChatForReplies();
+        });
+    }
+
+    /**
+     * Reply
+     */
+    reply(event): void
+    {
+        event.preventDefault();
+
+        if ( !this._replyForm.form.value.message )
+        {
+            return;
+        }
+
+        // Message
+        const message = {
+            who    : this.user.id,
+            message: this._replyForm.form.value.message,
+            time   : new Date().toISOString()
+        };
+
+        // Add the message to the chat
+        this.chat.dialog.push(message);
+
+        // Update the server
+        this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
+
+            // Prepare the chat for the replies
+            this._prepareChatForReplies();
+        });
+    }
+}

src/app/layout/components/chat-panel/chat-panel.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
+import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
+
+@NgModule({
+    declarations: [
+        ChatPanelComponent
+    ],
+    providers   : [
+        ChatPanelService
+    ],
+    imports     : [
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatTabsModule,
+        MatTooltipModule,
+        MatRippleModule,
+
+        FuseSharedModule
+    ],
+    exports     : [
+        ChatPanelComponent
+    ]
+})
+export class ChatPanelModule
+{
+}

src/app/layout/components/chat-panel/chat-panel.service.ts

@@ -0,0 +1,182 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { FuseUtils } from '@fuse/utils';
+
+@Injectable()
+export class ChatPanelService
+{
+    contacts: any[];
+    chats: any[];
+    user: any;
+
+    /**
+     * Constructor
+     *
+     * @param {HttpClient} _httpClient
+     */
+    constructor(
+        private _httpClient: HttpClient
+    )
+    {
+    }
+
+    /**
+     * Loader
+     *
+     * @returns {Promise<any> | any}
+     */
+    loadContacts(): Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getContacts(),
+                this.getUser()
+            ]).then(
+                ([contacts, user]) => {
+                    this.contacts = contacts;
+                    this.user = user;
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    /**
+     * Get chat
+     *
+     * @param contactId
+     * @returns {Promise<any>}
+     */
+    getChat(contactId): Promise<any>
+    {
+        const chatItem = this.user.chatList.find((item) => {
+            return item.contactId === contactId;
+        });
+
+        // Get the chat
+        return new Promise((resolve, reject) => {
+
+            // If there is a chat with this user, return that.
+            if ( chatItem )
+            {
+                this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
+                    .subscribe((chat) => {
+
+                        // Resolve the promise
+                        resolve(chat);
+
+                    }, reject);
+            }
+            // If there is no chat with this user, create one...
+            else
+            {
+                this.createNewChat(contactId).then(() => {
+
+                    // and then recall the getChat method
+                    this.getChat(contactId).then((chat) => {
+                        resolve(chat);
+                    });
+                });
+            }
+        });
+    }
+
+    /**
+     * Create new chat
+     *
+     * @param contactId
+     * @returns {Promise<any>}
+     */
+    createNewChat(contactId): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+
+            // Generate a new id
+            const chatId = FuseUtils.generateGUID();
+
+            // Prepare the chat object
+            const chat = {
+                id    : chatId,
+                dialog: []
+            };
+
+            // Prepare the chat list entry
+            const chatListItem = {
+                chatId         : chatId,
+                contactId      : contactId,
+                lastMessageTime: '2017-02-18T10:30:18.931Z'
+            };
+
+            // Add new chat list item to the user's chat list
+            this.user.chatList.push(chatListItem);
+
+            // Post the created chat to the server
+            this._httpClient.post('api/chat-panel-chats', {...chat})
+                .subscribe(() => {
+
+                    // Post the updated user data to the server
+                    this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
+                        .subscribe(() => {
+
+                            // Resolve the promise
+                            resolve();
+                        });
+                }, reject);
+        });
+    }
+
+    /**
+     * Update the chat
+     *
+     * @param chatId
+     * @param dialog
+     * @returns {Promise<any>}
+     */
+    updateChat(chatId, dialog): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+
+            const newData = {
+                id    : chatId,
+                dialog: dialog
+            };
+
+            this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
+                .subscribe(updatedChat => {
+                    resolve(updatedChat);
+                }, reject);
+        });
+    }
+
+    /**
+     * Get contacts
+     *
+     * @returns {Promise<any>}
+     */
+    getContacts(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this._httpClient.get('api/chat-panel-contacts')
+                .subscribe((response: any) => {
+                    resolve(response);
+                }, reject);
+        });
+    }
+
+    /**
+     * Get user
+     *
+     * @returns {Promise<any>}
+     */
+    getUser(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this._httpClient.get('api/chat-panel-user')
+                .subscribe((response: any) => {
+                    resolve(response[0]);
+                }, reject);
+        });
+    }
+}

src/app/layout/components/footer/footer.component.html

@@ -2,7 +2,7 @@
 
     <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
 
-        <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
+        <a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
            target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
            fxLayoutAlign="start center">
             <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
@@ -16,7 +16,6 @@
         </div>
 
 
-
     </div>
 
 </mat-toolbar>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.html

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

src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss

@@ -0,0 +1,3 @@
+navbar-horizontal-style-1 {
+
+}

src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-horizontal-style-1',
+    templateUrl  : './style-1.component.html',
+    styleUrls    : ['./style-1.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
+{
+    navigation: any;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}

src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarHorizontalStyle1Component } from 'app/layout/components/navbar/horizontal/style-1/style-1.component';
+
+@NgModule({
+    declarations: [
+        NavbarHorizontalStyle1Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarHorizontalStyle1Component
+    ]
+})
+export class NavbarHorizontalStyle1Module
+{
+}

src/app/layout/components/navbar/navbar.component.html

@@ -1,39 +1,11 @@
-<ng-container *ngIf="layout == 'vertical'">
+<ng-container *ngIf="variant === 'horizontal-style-1'">
-
+    <navbar-horizontal-style-1></navbar-horizontal-style-1>
-    <div class="navbar-vertical">
-
-        <div class="navbar-header">
-
-            <div class="logo">
-                <img class="logo-icon" src="assets/images/logos/fuse.svg">
-                <span class="logo-text">FUSE</span>
-            </div>
-
-            <button mat-icon-button class="toggle-sidebar-folded"
-                    (click)="toggleSidebarFolded()" fxHide.lt-lg>
-                <mat-icon>menu</mat-icon>
-            </button>
-
-            <button mat-icon-button class="toggle-sidebar-opened"
-                    (click)="toggleSidebarOpened()" fxHide.gt-md>
-                <mat-icon>arrow_back</mat-icon>
-            </button>
-
-        </div>
-
-        <div class="navbar-content" fusePerfectScrollbar
-             [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
-            <fuse-navigation layout="vertical"></fuse-navigation>
-        </div>
-
-    </div>
-
 </ng-container>
 
-<ng-container *ngIf="layout == 'horizontal'">
+<ng-container *ngIf="variant === 'vertical-style-1'">
-
+    <navbar-vertical-style-1></navbar-vertical-style-1>
-    <div class="navbar-horizontal">
+</ng-container>
-        <fuse-navigation layout="horizontal"></fuse-navigation>
+
-    </div>
+<ng-container *ngIf="variant === 'vertical-style-2'">
-
+    <navbar-vertical-style-2></navbar-vertical-style-2>
 </ng-container>

src/app/layout/components/navbar/navbar.component.scss

@@ -1,81 +1,5 @@
-@import "src/@fuse/scss/fuse";
-
-fuse-sidebar {
-
-    &.folded:not(.unfolded) {
-
-        .navbar-vertical {
-
-            .navbar-header {
-                padding: 0 13px;
-
-                .logo {
-
-                    .logo-text {
-                        opacity: 0;
-                        transition: opacity 200ms ease;
-                    }
-                }
-            }
-        }
-    }
-}
-
 navbar {
-
-    &:not(.top-navbar) {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .navbar-vertical {
     display: flex;
     flex-direction: column;
     width: 100%;
-        height: 100%;
-
-        .navbar-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 64px;
-            min-height: 64px;
-            padding: 0 16px 0 24px;
-            transition: padding 200ms ease;
-            background-color: rgba(255, 255, 255, .05);
-            @include mat-elevation(1);
-
-            .logo {
-                display: flex;
-                align-items: center;
-
-                .logo-icon {
-                    width: 38px;
-                    height: 38px;
-                }
-
-                .logo-text {
-                    margin-left: 8px;
-                    font-size: 20px;
-                    font-weight: 300;
-                    letter-spacing: 0.4px;
-                }
-            }
-        }
-
-        .navbar-content {
-            flex: 1 1 auto;
-            overflow-y: auto;
-        }
-    }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

src/app/layout/components/navbar/navbar.component.ts

@@ -1,11 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { filter, take, takeUntil } from 'rxjs/operators';
-
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 @Component({
     selector     : 'navbar',
@@ -13,148 +6,18 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
     styleUrls    : ['./navbar.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class NavbarComponent implements OnInit, OnDestroy
+export class NavbarComponent
 {
-    // Layout
+    // Variant
     @Input()
-    layout;
+    variant;
-
-    fusePerfectScrollbarUpdateTimeout: any;
-    navigation: any;
-
-    // Private
-    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
-     *
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
      */
-    constructor(
+    constructor()
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _router: Router
-    )
     {
         // Set the defaults
-        this.layout = 'vertical';
+        this.variant = 'vertical-style-1';
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
-    set directive(theDirective: FusePerfectScrollbarDirective)
-    {
-        if ( !theDirective )
-        {
-            return;
-        }
-
-        this._fusePerfectScrollbar = theDirective;
-
-        // Update the scrollbar on collapsable item toggle
-        this._fuseNavigationService.onItemCollapseToggled
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this._fusePerfectScrollbar.update();
-                }, 310);
-            });
-
-        // Scroll to the active item position
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd),
-                take(1)
-            )
-            .subscribe(() => {
-                    setTimeout(() => {
-                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
-
-                        if ( activeNavItem )
-                        {
-                            const activeItemOffsetTop       = activeNavItem.offsetTop,
-                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
-                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
-
-                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
-                        }
-                    });
-                }
-            );
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
-            )
-            .subscribe(() => {
-                    if ( this._fuseSidebarService.getSidebar('navbar') )
-                    {
-                        this._fuseSidebarService.getSidebar('navbar').close();
-                    }
-                }
-            );
-
-        // Get current navigation
-        this._fuseNavigationService.onNavigationChanged
-            .pipe(filter(value => value !== null))
-            .subscribe(() => {
-                this.navigation = this._fuseNavigationService.getCurrentNavigation();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        if ( this.fusePerfectScrollbarUpdateTimeout )
-        {
-            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
-        }
-
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle sidebar opened status
-     */
-    toggleSidebarOpened(): void
-    {
-        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
-    }
-
-    /**
-     * Toggle sidebar folded status
-     */
-    toggleSidebarFolded(): void
-    {
-        this._fuseSidebarService.getSidebar('navbar').toggleFold();
     }
 }

src/app/layout/components/navbar/navbar.module.ts

@@ -1,21 +1,22 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';
 
-import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
+import { NavbarHorizontalStyle1Module } from 'app/layout/components/navbar/horizontal/style-1/style-1.module';
+import { NavbarVerticalStyle1Module } from 'app/layout/components/navbar/vertical/style-1/style-1.module';
+import { NavbarVerticalStyle2Module } from 'app/layout/components/navbar/vertical/style-2/style-2.module';
 
 @NgModule({
     declarations: [
         NavbarComponent
     ],
     imports     : [
-        MatButtonModule,
-        MatIconModule,
-
         FuseSharedModule,
-        FuseNavigationModule
+
+        NavbarHorizontalStyle1Module,
+        NavbarVerticalStyle1Module,
+        NavbarVerticalStyle2Module
     ],
     exports     : [
         NavbarComponent

src/app/layout/components/navbar/vertical/style-1/style-1.component.html

@@ -0,0 +1,41 @@
+<div class="navbar-top mat-indigo-700-bg">
+
+    <div class="logo">
+        <img class="logo-icon" src="assets/images/logos/fuse.svg">
+        <span class="logo-text secondary-text">FUSE</span>
+    </div>
+
+    <div class="buttons">
+
+        <button mat-icon-button class="toggle-sidebar-folded"
+                (click)="toggleSidebarFolded()" fxHide.lt-lg>
+            <mat-icon class="secondary-text">menu</mat-icon>
+        </button>
+
+        <button mat-icon-button class="toggle-sidebar-opened"
+                (click)="toggleSidebarOpened()" fxHide.gt-md>
+            <mat-icon class="secondary-text">arrow_back</mat-icon>
+        </button>
+
+    </div>
+
+</div>
+
+
+<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+
+    <div class="user mat-indigo-700-bg" fxLayout="column">
+
+        <div class="h3 username">Charlie Adams</div>
+        <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
+        <div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
+            <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
+        </div>
+
+    </div>
+
+    <div class="navbar-content">
+        <fuse-navigation layout="vertical"></fuse-navigation>
+    </div>
+
+</div>

src/app/layout/components/navbar/vertical/style-1/style-1.component.scss

@@ -0,0 +1,159 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-sidebar {
+    overflow: hidden;
+
+    &.folded:not(.unfolded) {
+
+        navbar {
+
+            navbar-vertical-style-1 {
+
+                .navbar-top {
+                    padding: 12px 0;
+                    justify-content: center;
+
+                    .buttons {
+                        display: none;
+                    }
+
+                    .logo {
+
+                        .logo-icon {
+                            width: 32px;
+                            height: 32px;
+                        }
+
+                        .logo-text {
+                            display: none;
+                        }
+                    }
+                }
+
+                .navbar-scroll-container {
+
+                    .user {
+                        padding: 12px 0;
+
+                        .avatar-container {
+                            position: relative;
+                            top: auto;
+                            padding: 0;
+
+                            .avatar {
+                                width: 40px;
+                                height: 40px;
+                            }
+                        }
+
+                        .username,
+                        .email {
+                            display: none;
+                        }
+                    }
+
+                    .navbar-content {
+                        margin-top: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+navbar {
+
+    navbar-vertical-style-1 {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        .navbar-top {
+            display: flex;
+            flex-direction: row;
+            flex: 1 0 auto;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 64px;
+            height: 64px;
+            padding: 12px 12px 12px 20px;
+
+            @include media-breakpoint('xs') {
+                min-height: 56px;
+                height: 56px;
+            }
+
+            .logo {
+                display: flex;
+                align-items: center;
+
+                .logo-icon {
+                    width: 24px;
+                    height: 24px;
+                }
+
+                .logo-text {
+                    margin-left: 12px;
+                    font-size: 16px;
+                    font-weight: 300;
+                    letter-spacing: 0.4px;
+                    line-height: normal;
+                }
+            }
+
+            .buttons {
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        .navbar-scroll-container {
+            overflow-y: auto;
+
+            background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
+            linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
+
+            background-repeat: no-repeat;
+            background-size: 100% 40px, 100% 10px;
+            background-attachment: local, scroll;
+
+            .user {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                width: 100%;
+                padding: 24px 0 64px 0;
+
+                .avatar-container {
+                    position: absolute;
+                    top: 92px;
+                    border-radius: 50%;
+                    padding: 8px;
+
+                    .avatar {
+                        width: 72px;
+                        height: 72px;
+                        margin: 0;
+                    }
+                }
+            }
+
+            .navbar-content {
+                flex: 1 1 auto;
+                margin-top: 32px;
+            }
+        }
+    }
+
+    &.right-navbar {
+
+        .toggle-sidebar-opened {
+
+            mat-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

src/app/layout/components/navbar/vertical/style-1/style-1.component.ts

@@ -0,0 +1,167 @@
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { filter, take, takeUntil } from 'rxjs/operators';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-vertical-style-1',
+    templateUrl  : './style-1.component.html',
+    styleUrls    : ['./style-1.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
+{
+    fuseConfig: any;
+    fusePerfectScrollbarUpdateTimeout: any;
+    navigation: any;
+
+    // Private
+    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     * @param {Router} _router
+     */
+    constructor(
+        private _fuseConfigService: FuseConfigService,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService,
+        private _router: Router
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    // Directive
+    @ViewChild(FusePerfectScrollbarDirective)
+    set directive(theDirective: FusePerfectScrollbarDirective)
+    {
+        if ( !theDirective )
+        {
+            return;
+        }
+
+        this._fusePerfectScrollbar = theDirective;
+
+        // Update the scrollbar on collapsable item toggle
+        this._fuseNavigationService.onItemCollapseToggled
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this._fusePerfectScrollbar.update();
+                }, 310);
+            });
+
+        // Scroll to the active item position
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                take(1)
+            )
+            .subscribe(() => {
+                    setTimeout(() => {
+                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+
+                        if ( activeNavItem )
+                        {
+                            const activeItemOffsetTop       = activeNavItem.offsetTop,
+                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
+                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
+
+                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
+                        }
+                    });
+                }
+            );
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                    if ( this._fuseSidebarService.getSidebar('navbar') )
+                    {
+                        this._fuseSidebarService.getSidebar('navbar').close();
+                    }
+                }
+            );
+
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.fuseConfig = config;
+            });
+
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        if ( this.fusePerfectScrollbarUpdateTimeout )
+        {
+            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        }
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpened(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
+    }
+
+    /**
+     * Toggle sidebar folded status
+     */
+    toggleSidebarFolded(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleFold();
+    }
+}

src/app/layout/components/navbar/vertical/style-1/style-1.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarVerticalStyle1Component } from 'app/layout/components/navbar/vertical/style-1/style-1.component';
+
+@NgModule({
+    declarations: [
+        NavbarVerticalStyle1Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarVerticalStyle1Component
+    ]
+})
+export class NavbarVerticalStyle1Module
+{
+}

src/app/layout/components/navbar/vertical/style-2/style-2.component.html

@@ -0,0 +1,23 @@
+<div class="navbar-header">
+
+    <div class="logo">
+        <img class="logo-icon" src="assets/images/logos/fuse.svg">
+        <span class="logo-text">FUSE</span>
+    </div>
+
+    <button mat-icon-button class="toggle-sidebar-folded"
+            (click)="toggleSidebarFolded()" fxHide.lt-lg>
+        <mat-icon>menu</mat-icon>
+    </button>
+
+    <button mat-icon-button class="toggle-sidebar-opened"
+            (click)="toggleSidebarOpened()" fxHide.gt-md>
+        <mat-icon>arrow_back</mat-icon>
+    </button>
+
+</div>
+
+<div class="navbar-content" fusePerfectScrollbar
+     [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <fuse-navigation layout="vertical"></fuse-navigation>
+</div>

src/app/layout/components/navbar/vertical/style-2/style-2.component.scss

@@ -0,0 +1,81 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-sidebar {
+    overflow: hidden;
+
+    &.folded:not(.unfolded) {
+
+        navbar {
+
+            navbar-vertical-style-2 {
+
+                .navbar-header {
+                    padding: 0 13px;
+
+                    .logo {
+
+                        .logo-text {
+                            opacity: 0;
+                            transition: opacity 200ms ease;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+navbar {
+
+    navbar-vertical-style-2 {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        .navbar-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 64px;
+            min-height: 64px;
+            padding: 0 16px 0 24px;
+            transition: padding 200ms ease;
+            background-color: rgba(255, 255, 255, .05);
+            @include mat-elevation(1);
+
+            .logo {
+                display: flex;
+                align-items: center;
+
+                .logo-icon {
+                    width: 38px;
+                    height: 38px;
+                }
+
+                .logo-text {
+                    margin-left: 8px;
+                    font-size: 20px;
+                    font-weight: 300;
+                    letter-spacing: 0.4px;
+                }
+            }
+        }
+
+        .navbar-content {
+            flex: 1 1 auto;
+            overflow-y: auto;
+        }
+
+    }
+
+    &.right-navbar {
+
+        .toggle-sidebar-opened {
+
+            mat-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

src/app/layout/components/navbar/vertical/style-2/style-2.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { filter, take, takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-vertical-style-2',
+    templateUrl  : './style-2.component.html',
+    styleUrls    : ['./style-2.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
+{
+    fusePerfectScrollbarUpdateTimeout: any;
+    navigation: any;
+
+    // Private
+    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     * @param {Router} _router
+     */
+    constructor(
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService,
+        private _router: Router
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    // Directive
+    @ViewChild(FusePerfectScrollbarDirective)
+    set directive(theDirective: FusePerfectScrollbarDirective)
+    {
+        if ( !theDirective )
+        {
+            return;
+        }
+
+        this._fusePerfectScrollbar = theDirective;
+
+        // Update the scrollbar on collapsable item toggle
+        this._fuseNavigationService.onItemCollapseToggled
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this._fusePerfectScrollbar.update();
+                }, 310);
+            });
+
+        // Scroll to the active item position
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                take(1)
+            )
+            .subscribe(() => {
+                    setTimeout(() => {
+                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+
+                        if ( activeNavItem )
+                        {
+                            const activeItemOffsetTop       = activeNavItem.offsetTop,
+                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
+                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
+
+                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
+                        }
+                    });
+                }
+            );
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                    if ( this._fuseSidebarService.getSidebar('navbar') )
+                    {
+                        this._fuseSidebarService.getSidebar('navbar').close();
+                    }
+                }
+            );
+
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        if ( this.fusePerfectScrollbarUpdateTimeout )
+        {
+            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        }
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpened(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
+    }
+
+    /**
+     * Toggle sidebar folded status
+     */
+    toggleSidebarFolded(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleFold();
+    }
+}

src/app/layout/components/navbar/vertical/style-2/style-2.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarVerticalStyle2Component } from 'app/layout/components/navbar/vertical/style-2/style-2.component';
+
+@NgModule({
+    declarations: [
+        NavbarVerticalStyle2Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarVerticalStyle2Component
+    ]
+})
+export class NavbarVerticalStyle2Module
+{
+}

src/app/layout/components/toolbar/toolbar.component.html

@@ -30,8 +30,8 @@
             <button mat-button [matMenuTriggerFor]="userMenu"
                     class="user-button">
                 <div fxLayout="row" fxLayoutAlign="center center">
-                    <img class="avatar" src="assets/images/avatars/profile.jpg">
+                    <img class="avatar mr-0 mr-sm-16" src="assets/images/avatars/Velazquez.jpg">
-                    <span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
+                    <span class="username mr-12" fxHide fxShow.gt-sm>Charlie Adams</span>
                     <mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
                 </div>
             </button>
@@ -83,6 +83,15 @@
 
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
+            <button mat-icon-button fxHide.gt-md
+                    class="chat-panel-toggle-button"
+                    (click)="toggleSidebarOpen('chatPanel')"
+                    aria-label="Toggle chat panel">
+                <mat-icon class="icon">chat</mat-icon>
+            </button>
+
+            <div class="toolbar-separator" fxHide.gt-md></div>
+
             <button mat-icon-button
                     class="quick-panel-toggle-button"
                     (click)="toggleSidebarOpen('quickPanel')"

src/app/layout/components/toolbar/toolbar.component.scss

@@ -36,6 +36,7 @@
     .user-button,
     fuse-search-bar,
     .language-button,
+    .chat-panel-toggle-button,
     .quick-panel-toggle-button {
         min-width: 64px;
         height: 64px;

src/app/layout/components/toolbar/toolbar.component.ts

@@ -26,6 +26,7 @@ export class ToolbarComponent implements OnInit, OnDestroy
     selectedLanguage: any;
     showLoadingBar: boolean;
     userStatusOptions: any[];
+    chatPanelLockedOpen: string;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -146,6 +147,28 @@ export class ToolbarComponent implements OnInit, OnDestroy
         this._fuseSidebarService.getSidebar(key).toggleOpen();
     }
 
+    toggleChatPanel(): void
+    {
+        // Get the chat panel sidebar
+        const chatPanelSidebar = this._fuseSidebarService.getSidebar('chatPanel');
+
+        // Store the original value
+        if ( chatPanelSidebar.lockedOpen !== '' )
+        {
+            this.chatPanelLockedOpen = chatPanelSidebar.lockedOpen;
+        }
+
+        // Toggle
+        if ( chatPanelSidebar.lockedOpen === this.chatPanelLockedOpen )
+        {
+            chatPanelSidebar.lockedOpen = '';
+        }
+        else
+        {
+            chatPanelSidebar.lockedOpen = this.chatPanelLockedOpen;
+        }
+    }
+
     /**
      * Search
      *

src/app/layout/horizontal/layout-1/layout-1.component.html

@@ -55,6 +55,14 @@
 
 </div>
 
+<!-- CHAT PANEL -->
+<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+              lockedOpen="gt-md">
+    <chat-panel></chat-panel>
+</fuse-sidebar>
+<!-- / CHAT PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
@@ -81,7 +89,7 @@
 
 <!-- TOP NAVBAR -->
 <ng-template #topNavbar>
-    <navbar layout="horizontal"
+    <navbar variant="horizontal-style-1"
             class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
             fxHide fxShow.gt-md
             *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -94,7 +102,8 @@
     <fuse-sidebar name="navbar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->

src/app/layout/horizontal/layout-1/layout-1.component.scss

@@ -14,6 +14,7 @@ horizontal-layout-1 {
         width: 100%;
         height: 100%;
         z-index: 1;
+        min-width: 0;
 
         // Boxed
         &.boxed {

src/app/layout/horizontal/layout-1/layout-1.module.ts

@@ -4,6 +4,7 @@ import { MatSidenavModule } from '@angular/material';
 import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
 
+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -23,6 +24,7 @@ import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layou
         FuseSidebarModule,
         FuseThemeOptionsModule,
 
+        ChatPanelModule,
         ContentModule,
         FooterModule,
         NavbarModule,

src/app/layout/vertical/layout-1/layout-1.component.html

@@ -67,6 +67,14 @@
 
 </div>
 
+<!-- CHAT PANEL -->
+<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+              lockedOpen="gt-md">
+    <chat-panel></chat-panel>
+</fuse-sidebar>
+<!-- / CHAT PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
@@ -97,7 +105,8 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -108,7 +117,8 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-1/layout-1.component.scss

@@ -14,6 +14,7 @@ vertical-layout-1 {
         width: 100%;
         height: 100%;
         z-index: 1;
+        min-width: 0;
 
         // Boxed
         &.boxed {

src/app/layout/vertical/layout-1/layout-1.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
 
+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -22,6 +23,7 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
         FuseSharedModule,
         FuseSidebarModule,
 
+        ChatPanelModule,
         ContentModule,
         FooterModule,
         NavbarModule,

src/app/layout/vertical/layout-2/layout-2.component.html

@@ -67,6 +67,14 @@
 
 </div>
 
+<!-- CHAT PANEL -->
+<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+              lockedOpen="gt-md">
+    <chat-panel></chat-panel>
+</fuse-sidebar>
+<!-- / CHAT PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
@@ -97,7 +105,8 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -108,7 +117,8 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-2/layout-2.component.scss

@@ -14,6 +14,7 @@ vertical-layout-2 {
         width: 100%;
         height: 100%;
         z-index: 1;
+        min-width: 0;
 
         // Boxed
         &.boxed {

src/app/layout/vertical/layout-2/layout-2.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
 
+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -22,6 +23,7 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
         FuseSharedModule,
         FuseSidebarModule,
 
+        ChatPanelModule,
         ContentModule,
         FooterModule,
         NavbarModule,

src/app/layout/vertical/layout-3/layout-3.component.html

@@ -53,6 +53,14 @@
 
 </div>
 
+<!-- CHAT PANEL -->
+<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+              lockedOpen="gt-md">
+    <chat-panel></chat-panel>
+</fuse-sidebar>
+<!-- / CHAT PANEL -->
+
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
     <quick-panel></quick-panel>
@@ -83,7 +91,8 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
@@ -94,7 +103,8 @@
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
     </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->

src/app/layout/vertical/layout-3/layout-3.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../@fuse/scss/fuse";
+@import "src/@fuse/scss/fuse";
 
 vertical-layout-3 {
     display: flex;
@@ -14,6 +14,7 @@ vertical-layout-3 {
         width: 100%;
         height: 100%;
         z-index: 1;
+        min-width: 0;
 
         // Boxed
         &.boxed {

src/app/layout/vertical/layout-3/layout-3.module.ts

@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseSidebarModule } from '@fuse/components/index';
 import { FuseSharedModule } from '@fuse/shared.module';
 
+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -22,6 +23,7 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
         FuseSharedModule,
         FuseSidebarModule,
 
+        ChatPanelModule,
         ContentModule,
         FooterModule,
         NavbarModule,