Updated changelog

(AppComponent) Moved boxed class to the body
Fixed: Horizontal layout navbar covers entire screen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.0",
+  "version": "6.2.4",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,19 +19,19 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.0.7",
+    "@angular/animations": "6.0.9",
     "@angular/cdk": "6.3.3",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/core": "6.0.7",
+    "@angular/common": "6.0.9",
+    "@angular/compiler": "6.0.9",
+    "@angular/core": "6.0.9",
     "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.7",
-    "@angular/http": "6.0.7",
+    "@angular/forms": "6.0.9",
+    "@angular/http": "6.0.9",
     "@angular/material": "6.3.3",
     "@angular/material-moment-adapter": "6.3.3",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
+    "@angular/platform-browser": "6.0.9",
+    "@angular/platform-browser-dynamic": "6.0.9",
+    "@angular/router": "6.0.9",
     "@ngrx/effects": "6.0.1",
     "@ngrx/router-store": "6.0.1",
     "@ngrx/store": "6.0.1",
@@ -52,7 +52,7 @@
     "moment": "2.22.2",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.4.0",
+    "ngx-color-picker": "6.5.0",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.4.0",
     "prismjs": "1.15.0",
@@ -63,13 +63,13 @@
   },
   "devDependencies": {
     "@angular/cli": "6.0.8",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/language-service": "6.0.7",
+    "@angular/compiler-cli": "6.0.9",
+    "@angular/language-service": "6.0.9",
     "@angular-devkit/build-angular": "0.6.8",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.110",
+    "@types/lodash": "4.14.111",
     "@types/node": "8.9.5",
     "codelyzer": "4.2.1",
     "jasmine-core": "2.99.1",

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

@@ -4,4 +4,5 @@
     background: #263238;
     cursor: text;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }

src/@fuse/components/index.ts

@@ -4,6 +4,7 @@ export * from './demo/demo.module';
 export * from './highlight/highlight.module';
 export * from './material-color-picker/material-color-picker.module';
 export * from './navigation/navigation.module';
+export * from './progress-bar/progress-bar.module';
 export * from './search-bar/search-bar.module';
 export * from './shortcuts/shortcuts.module';
 export * from './sidebar/sidebar.module';

src/@fuse/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,5 @@
+<ng-container *ngIf="visible">
+
+    <mat-progress-bar color="accent" [bufferValue]="bufferValue" [mode]="mode" [value]="value"></mat-progress-bar>
+
+</ng-container>

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

@@ -0,0 +1,17 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-progress-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 99998;
+
+    mat-progress-bar {
+
+        .mat-progress-bar-buffer {
+            background-color: #C5C6CB !important;
+        }
+    }
+}

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

@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseProgressBarService } from '@fuse/components/progress-bar/progress-bar.service';
+
+@Component({
+    selector     : 'fuse-progress-bar',
+    templateUrl  : './progress-bar.component.html',
+    styleUrls    : ['./progress-bar.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseProgressBarComponent implements OnInit, OnDestroy
+{
+    bufferValue: number;
+    mode: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+    value: number;
+    visible: boolean;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseProgressBarService} _fuseProgressBarService
+     */
+    constructor(
+        private _fuseProgressBarService: FuseProgressBarService
+    )
+    {
+        // Set the defaults
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to the progress bar service properties
+
+        // Buffer value
+        this._fuseProgressBarService.bufferValue
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((bufferValue) => {
+                this.bufferValue = bufferValue;
+            });
+
+        // Mode
+        this._fuseProgressBarService.mode
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((mode) => {
+                this.mode = mode;
+            });
+
+        // Value
+        this._fuseProgressBarService.value
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((value) => {
+                this.value = value;
+            });
+
+        // Visible
+        this._fuseProgressBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.visible = visible;
+            });
+
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { MatButtonModule, MatIconModule, MatProgressBarModule } from '@angular/material';
+
+import { FuseProgressBarComponent } from './progress-bar.component';
+
+@NgModule({
+    declarations: [
+        FuseProgressBarComponent
+    ],
+    imports     : [
+        CommonModule,
+        RouterModule,
+
+        MatButtonModule,
+        MatIconModule,
+        MatProgressBarModule
+    ],
+    exports     : [
+        FuseProgressBarComponent
+    ]
+})
+export class FuseProgressBarModule
+{
+}

src/@fuse/components/progress-bar/progress-bar.service.ts

@@ -6,9 +6,12 @@ import { filter } from 'rxjs/operators';
 @Injectable({
     providedIn: 'root'
 })
-export class FuseLoadingBarService
+export class FuseProgressBarService
 {
     // Private
+    private _bufferValue: BehaviorSubject<number>;
+    private _mode: BehaviorSubject<string>;
+    private _value: BehaviorSubject<number>;
     private _visible: BehaviorSubject<boolean>;
 
     /**
@@ -28,9 +31,50 @@ export class FuseLoadingBarService
     // @ Accessors
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * Buffer value
+     */
+    get bufferValue(): Observable<any>
+    {
+        return this._bufferValue.asObservable();
+    }
+
+    setBufferValue(value: number): void
+    {
+        this._bufferValue.next(value);
+    }
+
+    /**
+     * Mode
+     */
+    get mode(): Observable<any>
+    {
+        return this._mode.asObservable();
+    }
+
+    setMode(value: 'determinate' | 'indeterminate' | 'buffer' | 'query'): void
+    {
+        this._mode.next(value);
+    }
+
+    /**
+     * Value
+     */
+    get value(): Observable<any>
+    {
+        return this._value.asObservable();
+    }
+
+    setValue(value: number): void
+    {
+        this._value.next(value);
+    }
+
+    /**
+     * Visible
+     */
     get visible(): Observable<any>
     {
-        // Return the _visible as observable
         return this._visible.asObservable();
     }
 
@@ -45,24 +89,23 @@ export class FuseLoadingBarService
      */
     private _init(): void
     {
-        // Initialize the behavior subject
+        // Initialize the behavior subjects
+        this._bufferValue = new BehaviorSubject(0);
+        this._mode = new BehaviorSubject('indeterminate');
+        this._value = new BehaviorSubject(0);
         this._visible = new BehaviorSubject(false);
 
         // Subscribe to the router events to show/hide the loading bar
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationStart)
-            )
+            .pipe(filter((event) => event instanceof NavigationStart))
             .subscribe(() => {
-                this.showLoadingBar();
+                this.show();
             });
 
         this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
+            .pipe(filter((event) => event instanceof NavigationEnd))
             .subscribe(() => {
-                this.hideLoadingBar();
+                this.hide();
             });
     }
 
@@ -71,20 +114,18 @@ export class FuseLoadingBarService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Show the loading bar
+     * Show the progress bar
      */
-    showLoadingBar(): void
+    show(): void
     {
-        // Show
         this._visible.next(true);
     }
 
     /**
-     * Hide the loading bar
+     * Hide the progress bar
      */
-    hideLoadingBar(): void
+    hide(): void
     {
-        // Hide
         this._visible.next(false);
     }
 }

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

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
     display: flex;
     flex-direction: column;
@@ -7,6 +9,7 @@ fuse-sidebar {
     bottom: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     width: 280px;
     min-width: 280px;
     max-width: 280px;
@@ -14,6 +17,12 @@ fuse-sidebar {
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
     background: white;
 
+    @include media-breakpoint-down('xs') {
+        min-width: 0 !important;
+        max-width: 80vw !important;
+        width: 80vw !important;
+    }
+
     &.left-positioned {
         left: 0;
         transform: translateX(-100%);

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

@@ -132,6 +132,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
                 <!-- VERTICAL LAYOUT #2 -->
@@ -226,6 +243,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
                 <!-- VERTICAL LAYOUT #3 -->
@@ -318,6 +352,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
                 <!-- HORIZONTAL LAYOUT #1 -->
@@ -405,6 +456,23 @@
 
                     </div>
 
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
+                    </div>
+
                 </ng-container>
 
             </ng-container>

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

@@ -19,6 +19,7 @@
         flex: 1 0 auto;
         padding: 40px 24px 24px 24px;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .header {
             display: flex;

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

@@ -62,24 +62,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
         // noinspection TypeScriptValidateTypes
         this.form = this._formBuilder.group({
             layout          : this._formBuilder.group({
-                style  : new FormControl(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
                     background: new FormControl(),
                     folded    : new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl(),
                     variant   : new FormControl()
                 }),
-                toolbar: this._formBuilder.group({
+                toolbar  : this._formBuilder.group({
                     background: new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl()
                 }),
-                footer : this._formBuilder.group({
+                footer   : this._formBuilder.group({
                     background: new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden: new FormControl(),
+                    position  : new FormControl()
                 })
             }),
             customScrollbars: new FormControl()

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

@@ -6,6 +6,11 @@
     }
 }
 
+// Fix: "Smooth scrolling for iOS"
+.mat-dialog-container {
+    -webkit-overflow-scrolling: touch;
+}
+
 // Fix: "Inconsistent font sizes across elements"
 .mat-form-field-wrapper {
     font-size: 16px;

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

@@ -10,4 +10,15 @@ body {
     padding: 0;
     overflow: hidden;
     background: #F5F5F5;
+}
+
+body {
+
+    // Boxed
+    &.boxed {
+        max-width: 1200px;
+        margin: 0 auto;
+
+        @include mat-elevation(8);
+    }
 }

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

@@ -143,8 +143,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         flex: 1 1 auto;
 
                         > .content {
-                            overflow: auto;
                             flex: 1 1 auto;
+                            overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
                 }
@@ -166,6 +167,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -346,6 +348,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
@@ -358,6 +361,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
                         > .content {
                             flex: 1 1 auto;
                             overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
                 }
@@ -379,6 +383,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                                             .tab-content {
                                                 overflow: auto;
+                                                -webkit-overflow-scrolling: touch;
                                             }
                                         }
                                     }
@@ -500,12 +505,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                     .content {
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
 
                 > .center {
                     flex: 1 1 auto;
                     overflow: auto;
+                    -webkit-overflow-scrolling: touch;
                 }
             }
 
@@ -528,12 +535,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
 
                         .content {
                             overflow: auto;
+                            -webkit-overflow-scrolling: touch;
                         }
                     }
 
                     > .center {
                         flex: 1 1 auto;
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
             }

src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss

@@ -146,6 +146,7 @@ owl-date-time {
         padding: .25em;
         background-color: rgba(0, 0, 0, .1);
         overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
     .owl-calendar-wrapper {

src/@fuse/scss/partials/plugins/_ngx-color-picker.scss

@@ -11,6 +11,7 @@
         height: 140px;
         overflow-y: auto;
         overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
 
         > hr {
             display: none;

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

@@ -19,6 +19,10 @@ export interface FuseConfig
             background: string,
             hidden: boolean,
             position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
+        },
+        sidepanel: {
+            hidden: boolean,
+            position: 'left' | 'right'
         }
     };
     customScrollbars: boolean;

src/app/app.component.html

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

src/app/app.component.scss

@@ -11,7 +11,7 @@
     .theme-options-button {
         position: absolute;
         top: 160px;
-        right: 70px;
+        right: 0;
         width: 48px;
         height: 48px;
         line-height: 48px;
@@ -23,8 +23,15 @@
         opacity: .90;
         z-index: 998;
 
-        @include media-breakpoint-down('md') {
-            right: 0;
+        &.right-side-panel {
+
+            @include media-breakpoint-up('lg') {
+                right: 70px;
+            }
+        }
+
+        &.side-panel-hidden {
+            right: 0 !important;
         }
 
         mat-icon {

src/app/app.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -20,8 +22,8 @@ import { locale as navigationTurkish } from 'app/navigation/i18n/tr';
 })
 export class AppComponent implements OnInit, OnDestroy
 {
-    navigation: any;
     fuseConfig: any;
+    navigation: any;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
     /**
      * Constructor
      *
+     * @param {DOCUMENT} document
      * @param {FuseConfigService} _fuseConfigService
      * @param {FuseNavigationService} _fuseNavigationService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {FuseSplashScreenService} _fuseSplashScreenService
      * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
+     * @param {Platform} _platform
      * @param {TranslateService} _translateService
      */
     constructor(
+        @Inject(DOCUMENT) private document: any,
         private _fuseConfigService: FuseConfigService,
         private _fuseNavigationService: FuseNavigationService,
         private _fuseSidebarService: FuseSidebarService,
         private _fuseSplashScreenService: FuseSplashScreenService,
         private _fuseTranslationLoaderService: FuseTranslationLoaderService,
-        private _translateService: TranslateService
+        private _translateService: TranslateService,
+        private _platform: Platform
     )
     {
         // Get default navigation
@@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
         // Use a language
         this._translateService.use('en');
 
+        // Add is-mobile class to the body if the platform is mobile
+        if ( this._platform.ANDROID || this._platform.IOS )
+        {
+            this.document.body.classList.add('is-mobile');
+        }
+
         // Set the private defaults
         this._unsubscribeAll = new Subject();
     }
@@ -84,6 +96,15 @@ export class AppComponent implements OnInit, OnDestroy
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((config) => {
                 this.fuseConfig = config;
+
+                if ( this.fuseConfig.layout.width === 'boxed' )
+                {
+                    this.document.body.classList.add('boxed');
+                }
+                else
+                {
+                    this.document.body.classList.remove('boxed');
+                }
             });
     }
 

src/app/app.module.ts

@@ -11,7 +11,7 @@ import 'hammerjs';
 
 import { FuseModule } from '@fuse/fuse.module';
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
+import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 
 import { fuseConfig } from 'app/fuse-config';
 
@@ -72,6 +72,7 @@ const appRoutes: Routes = [
 
         // Fuse modules
         FuseModule.forRoot(fuseConfig),
+        FuseProgressBarModule,
         FuseSharedModule,
         FuseSidebarModule,
         FuseThemeOptionsModule,

src/app/fuse-config/index.ts

@@ -10,24 +10,28 @@ import { FuseConfig } from '@fuse/types';
 
 export const fuseConfig: FuseConfig = {
     layout          : {
-        style  : 'vertical-layout-1',
-        width  : 'fullwidth',
-        navbar : {
+        style    : 'vertical-layout-1',
+        width    : 'fullwidth',
+        navbar   : {
             background: 'mat-fuse-dark-700-bg',
             folded    : false,
             hidden    : false,
             position  : 'left',
             variant   : 'vertical-style-1'
         },
-        toolbar: {
+        toolbar  : {
             background: 'mat-white-500-bg',
             hidden    : false,
             position  : 'below-static'
         },
-        footer : {
+        footer   : {
             background: 'mat-fuse-dark-900-bg',
             hidden    : false,
             position  : 'below-fixed'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
         }
     },
     customScrollbars: true

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

@@ -2,7 +2,8 @@
 
     <ng-container *ngIf="selectedContact === null">
 
-        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
+        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
+             (click)="unfoldSidebarTemporarily()">
             <mat-icon class="s-32 white-fg">chat</mat-icon>
             <h3 class="ml-12">Team Chat</h3>
         </div>
@@ -18,36 +19,38 @@
 
     </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 mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
+            fxHide fxShow.gt-md>
+        <mat-icon class="secondary-text s-20">close</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 mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
+            fxHide.gt-md>
+        <mat-icon class="secondary-text">close</mat-icon>
     </button>
 
 </div>
 
-<div>
+<div class="content">
 
     <!-- Contacts -->
-    <mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <div 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>
+        <div *ngFor="let contact of contacts"
+             class="contacts-list-item"
+             [ngClass]="contact.status"
+             [class.active]="contact.id === selectedContact?.id"
+             (click)="toggleChat(contact)">
 
-            <img matListAvatar [src]="contact.avatar">
+            <img class="avatar" [src]="contact.avatar"
+                 [matTooltip]="contact.name"
+                 matTooltipPosition="left">
             <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
             <div class="status-icon" [ngClass]="contact.status"></div>
 
-        </mat-list-item>
+        </div>
 
-    </mat-list>
+    </div>
     <!-- / Contacts -->
 
     <!-- Chat -->
@@ -78,7 +81,7 @@
 
             </ng-container>
 
-            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
+            <ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
 
                 <div class="no-messages-icon">
                     <mat-icon class="s-128">chat</mat-icon>
@@ -87,11 +90,29 @@
                 <div class="no-messages secondary-text">
                     Start a conversation by typing your message below.
                 </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="!selectedContact">
+
+                <div class="no-contact-selected">
+
+                    <div class="no-contact-icon">
+                        <mat-icon class="s-128">chat</mat-icon>
+                    </div>
+
+                    <div class="no-contact secondary-text">
+                        Select a contact to start a conversation.
+                    </div>
+
+                </div>
+
             </ng-container>
 
         </div>
 
-        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
+        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
+             *ngIf="selectedContact">
 
             <form #replyForm="ngForm"
                   (ngSubmit)="reply($event)"

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

@@ -10,12 +10,20 @@ chat-panel {
     z-index: 99;
     overflow: hidden;
 
+    @include media-breakpoint-down('xs') {
+        max-width: none !important;
+        width: 100% !important;
+    }
+
     .header {
+        position: relative;
         height: 64px;
         max-height: 64px;
         min-height: 64px;
+        z-index: 10;
 
         .title {
+            cursor: pointer;
 
             mat-icon {
                 margin-left: 4px;
@@ -26,14 +34,24 @@ chat-panel {
                 transition: opacity 300ms ease-in-out;
             }
         }
+
+    }
+
+    .content {
+        flex: 1 1 100%;
+        min-height: 0;
     }
 
     #contacts-list {
-        padding: 8px 0;
-        overflow: auto;
+        position: relative;
+        z-index: 5;
+        padding: 16px 0;
         width: 72px;
         min-width: 72px;
         max-width: 72px;
+        background-color: #F9F9F9;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         // Perfect scrollbar
         .ps__rail-y {
@@ -44,13 +62,34 @@ chat-panel {
             }
         }
 
-        .mat-list-item {
-            cursor: pointer;
+        .contacts-list-item {
             position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+            height: 56px;
+            cursor: pointer;
 
             &.active {
-                background-color: mat-color(mat-palette($mat-grey, 300));
-                @include mat-elevation(2);
+                position: relative;
+                background-color: mat-color(mat-palette($mat-indigo, 50));
+
+                .status-icon {
+                    border-color: mat-color(mat-palette($mat-indigo, 50));
+                }
+
+                &:after {
+                    position: absolute;
+                    top: 8px;
+                    right: 0;
+                    bottom: 8px;
+                    content: "";
+                    width: 4px;
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                    background-color: mat-color(mat-palette($mat-indigo));
+                }
             }
 
             &.offline {
@@ -68,62 +107,71 @@ chat-panel {
                 }
             }
 
-            .mat-list-item-content {
+            .avatar {
+                margin: 0;
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
+            }
 
-                .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);
+            .unread-count {
+                position: absolute;
+                min-width: 18px;
+                height: 18px;
+                top: 8px;
+                left: 12px;
+                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: 10px;
+                left: 44px;
+                border: 2px solid #F9F9F9;
+                border-radius: 50%;
+
+                &.online {
+                    background-color: #4CAF50;
                 }
 
-                .status-icon {
-                    position: absolute;
-                    width: 12px;
-                    height: 12px;
-                    bottom: 3px;
-                    left: 44px;
-                    border: 2px solid white;
-                    border-radius: 50%;
+                &.do-not-disturb {
+                    background-color: #F44336;
+                }
 
-                    &.online {
-                        background-color: #4CAF50;
-                    }
+                &.away {
+                    background-color: #FFC107;
+                }
 
-                    &.do-not-disturb {
-                        background-color: #F44336;
-                    }
-
-                    &.away {
-                        background-color: #FFC107;
-                    }
-
-                    &.offline {
-                        background-color: #646464;
-                    }
+                &.offline {
+                    background-color: #646464;
                 }
             }
         }
     }
 
     #chat {
-        background-color: mat-color(mat-palette($mat-grey, 300));
+        position: relative;
+        z-index: 7;
+        flex: 1 1 100%;
+        background-color: white;
+        box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
 
         .messages {
             position: relative;
-            overflow: auto;
             padding: 16px 0 40px 40px;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
 
             .message-row {
                 position: relative;
@@ -145,6 +193,7 @@ chat-panel {
                     align-items: center;
                     justify-content: center;
                     padding: 12px;
+                    max-width: 100%;
 
                     .message {
                         white-space: pre-wrap;
@@ -158,6 +207,7 @@ chat-panel {
                         font-size: 11px;
                         margin-top: 8px;
                         top: 100%;
+                        left: 0;
                         color: $black-87-opacity;
                         white-space: nowrap;
                     }
@@ -205,7 +255,7 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #FFFFFF;
+                        background-color: #E0E0E0;
                         color: $black-87-opacity;
 
                         border-top-left-radius: 20px;
@@ -285,12 +335,34 @@ chat-panel {
                 padding: 0 16px 24px 16px;
                 text-align: center;
             }
+
+            .no-contact-selected {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                transform: translateY(-50%);
+                padding: 0 24px;
+                text-align: center;
+
+                .no-contact-icon {
+
+                    mat-icon {
+                        color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+
+                .no-contact {
+                    margin-top: 24px;
+                }
+            }
         }
 
         .reply-form {
             position: relative;
 
             .message-text {
+                background-color: #E0E0E0;
                 padding: 16px 8px;
 
                 .mat-form-field-wrapper {
@@ -337,6 +409,26 @@ fuse-sidebar {
         min-width: 360px;
         max-width: 360px;
 
+        @include media-breakpoint-down('xs') {
+            min-width: 0 !important;
+            max-width: 100vw !important;
+            width: 100vw !important;
+        }
+
+        &.left-chat-panel {
+
+            .header {
+
+                .toggle-sidebar-folded,
+                .toggle-sidebar-open {
+
+                    mat-icon {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
         // Folded
         &.folded {
 

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

@@ -124,7 +124,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
             this._replyForm.reset();
 
             // Focus to the reply input
-            this._replyInput.nativeElement.focus();
+            // this._replyInput.nativeElement.focus();
 
             // Scroll to the bottom of the messages list
             if ( this._chatViewScrollbar )
@@ -142,14 +142,6 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Toggle sidebar folded status
-     */
-    toggleSidebarFolded(): void
-    {
-        this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
-    }
-
     /**
      * Fold the temporarily unfolded sidebar back
      */
@@ -214,27 +206,52 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
     }
 
     /**
-     * Go to chat with the contact
+     * Toggle chat with the contact
      *
      * @param contact
      */
-    goToChat(contact): void
+    toggleChat(contact): void
     {
-        // Unfold the sidebar temporarily
-        this.unfoldSidebarTemporarily();
+        // If the contact equals to the selectedContact,
+        // that means we will deselect the contact and
+        // unload the chat
+        if ( this.selectedContact && contact.id === this.selectedContact.id )
+        {
+            // Reset
+            this.resetChat();
+        }
+        // Otherwise, we will select the contact, open
+        // the sidebar and start the chat
+        else
+        {
+            // Unfold the sidebar temporarily
+            this.unfoldSidebarTemporarily();
 
-        // Set the selected contact
-        this.selectedContact = contact;
+            // Set the selected contact
+            this.selectedContact = contact;
 
-        // Load the chat
-        this._chatPanelService.getChat(contact.id).then((chat) => {
+            // Load the chat
+            this._chatPanelService.getChat(contact.id).then((chat) => {
 
-            // Set the chat
-            this.chat = chat;
+                // Set the chat
+                this.chat = chat;
 
-            // Prepare the chat for the replies
-            this._prepareChatForReplies();
-        });
+                // Prepare the chat for the replies
+                this._prepareChatForReplies();
+            });
+        }
+    }
+
+    /**
+     * Remove the selected contact and unload the chat
+     */
+    resetChat(): void
+    {
+        // Set the selected contact as null
+        this.selectedContact = null;
+
+        // Set the chat as null
+        this.chat = null;
     }
 
     /**

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

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
@@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
-        MatListModule,
         MatTabsModule,
         MatTooltipModule,
         MatRippleModule,

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

@@ -1,3 +1,16 @@
 navbar-horizontal-style-1 {
 
 }
+
+navbar {
+
+    &.horizontal-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 56px;
+        max-height: 56px;
+        min-height: 56px;
+    }
+}

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

@@ -1,5 +1,3 @@
 navbar {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+
 }

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

@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector     : 'navbar',
@@ -8,16 +8,46 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
 })
 export class NavbarComponent
 {
-    // Variant
-    @Input()
-    variant;
+    // Private
+    _variant: string;
 
     /**
      * Constructor
+     *
+     * @param {ElementRef} _elementRef
+     * @param {Renderer2} _renderer
      */
-    constructor()
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2
+    )
     {
-        // Set the defaults
-        this.variant = 'vertical-style-1';
+        // Set the private defaults
+        this._variant = 'vertical-style-1';
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Variant
+     */
+    get variant(): string
+    {
+        return this._variant;
+    }
+
+    @Input()
+    set variant(value: string)
+    {
+        // Remove the old class name
+        this._renderer.removeClass(this._elementRef.nativeElement, this.variant);
+
+        // Store the variant value
+        this._variant = value;
+
+        // Add the new class name
+        this._renderer.addClass(this._elementRef.nativeElement, value);
     }
 }

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

@@ -1,60 +1,65 @@
 @import "src/@fuse/scss/fuse";
 
 fuse-sidebar {
-    overflow: hidden;
 
-    &.folded:not(.unfolded) {
+    &.navbar-fuse-sidebar {
+        overflow: hidden;
 
-        navbar {
+        &.folded:not(.unfolded) {
 
-            navbar-vertical-style-1 {
+            navbar {
 
-                .navbar-top {
-                    padding: 12px 0;
-                    justify-content: center;
+                navbar-vertical-style-1 {
 
-                    .buttons {
-                        display: none;
-                    }
+                    .navbar-top {
+                        padding: 12px 0;
+                        justify-content: center;
 
-                    .logo {
-
-                        .logo-icon {
-                            width: 32px;
-                            height: 32px;
-                        }
-
-                        .logo-text {
+                        .buttons {
                             display: none;
                         }
+
+                        .logo {
+
+                            .logo-icon {
+                                width: 32px;
+                                height: 32px;
+                            }
+
+                            .logo-text {
+                                display: none;
+                            }
+                        }
                     }
-                }
 
-                .navbar-scroll-container {
+                    .navbar-scroll-container {
 
-                    .user {
-                        padding: 12px 0;
+                        .user {
+                            padding: 12px 0;
 
-                        .avatar-container {
-                            position: relative;
-                            top: auto;
-                            padding: 0;
+                            .avatar-container {
+                                position: relative;
+                                top: auto;
+                                padding: 0;
+                                transform: translateX(0);
+                                left: auto;
 
-                            .avatar {
-                                width: 40px;
-                                height: 40px;
+                                .avatar {
+                                    width: 40px;
+                                    height: 40px;
+                                }
+                            }
+
+                            .username,
+                            .email {
+                                display: none;
                             }
                         }
 
-                        .username,
-                        .email {
-                            display: none;
+                        .navbar-content {
+                            margin-top: 0;
                         }
                     }
-
-                    .navbar-content {
-                        margin-top: 0;
-                    }
                 }
             }
         }
@@ -63,6 +68,24 @@ fuse-sidebar {
 
 navbar {
 
+    &.vertical-style-1 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+
+        &.right-navbar {
+
+            .toggle-sidebar-opened {
+
+                mat-icon {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
     navbar-vertical-style-1 {
         display: flex;
         flex-direction: column;
@@ -76,11 +99,13 @@ navbar {
             align-items: center;
             justify-content: space-between;
             min-height: 64px;
+            max-height: 64px;
             height: 64px;
             padding: 12px 12px 12px 20px;
 
             @include media-breakpoint('xs') {
                 min-height: 56px;
+                max-height: 56px;
                 height: 56px;
             }
 
@@ -110,6 +135,7 @@ navbar {
 
         .navbar-scroll-container {
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
 
             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%);
@@ -131,6 +157,8 @@ navbar {
                     top: 92px;
                     border-radius: 50%;
                     padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
 
                     .avatar {
                         width: 72px;
@@ -146,14 +174,4 @@ navbar {
             }
         }
     }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

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

@@ -1,22 +1,25 @@
 @import "src/@fuse/scss/fuse";
 
 fuse-sidebar {
-    overflow: hidden;
 
-    &.folded:not(.unfolded) {
+    &.navbar-fuse-sidebar {
+        overflow: hidden;
 
-        navbar {
+        &.folded:not(.unfolded) {
 
-            navbar-vertical-style-2 {
+            navbar {
 
-                .navbar-header {
-                    padding: 0 13px;
+                navbar-vertical-style-2 {
 
-                    .logo {
+                    .navbar-header {
+                        padding: 0 13px;
 
-                        .logo-text {
-                            opacity: 0;
-                            transition: opacity 200ms ease;
+                        .logo {
+
+                            .logo-text {
+                                opacity: 0;
+                                transition: opacity 200ms ease;
+                            }
                         }
                     }
                 }
@@ -27,6 +30,24 @@ fuse-sidebar {
 
 navbar {
 
+    &.vertical-style-2 {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+
+        &.right-navbar {
+
+            .toggle-sidebar-opened {
+
+                mat-icon {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+    }
+
     navbar-vertical-style-2 {
         display: flex;
         flex-direction: column;
@@ -65,17 +86,8 @@ navbar {
         .navbar-content {
             flex: 1 1 auto;
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
         }
 
     }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
 }

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

@@ -1,7 +1,5 @@
 <mat-toolbar class="p-0 mat-elevation-z1">
 
-    <mat-progress-bar *ngIf="showLoadingBar" class="loading-bar" color="accent" mode="indeterminate"></mat-progress-bar>
-
     <div fxFlex fxFill fxLayout="row" fxLayoutAlign="start center">
 
         <div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">

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

@@ -11,17 +11,9 @@
     }
 
     .mat-toolbar {
+        position: relative;
         background: inherit;
         color: inherit;
-        position: relative;
-
-        .loading-bar {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-        }
     }
 
     .logo {

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

@@ -8,7 +8,6 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
 import { navigation } from 'app/navigation/navigation';
-import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
 
 @Component({
     selector   : 'toolbar',
@@ -24,9 +23,7 @@ export class ToolbarComponent implements OnInit, OnDestroy
     languages: any;
     navigation: any;
     selectedLanguage: any;
-    showLoadingBar: boolean;
     userStatusOptions: any[];
-    chatPanelLockedOpen: string;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -35,13 +32,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
      * Constructor
      *
      * @param {FuseConfigService} _fuseConfigService
-     * @param {FuseLoadingBarService} _fuseLoadingBarService
      * @param {FuseSidebarService} _fuseSidebarService
      * @param {TranslateService} _translateService
      */
     constructor(
         private _fuseConfigService: FuseConfigService,
-        private _fuseLoadingBarService: FuseLoadingBarService,
         private _fuseSidebarService: FuseSidebarService,
         private _translateService: TranslateService
     )
@@ -103,13 +98,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the Fuse loading bar service
-        this._fuseLoadingBarService.visible
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((visible) => {
-                this.showLoadingBar = visible;
-            });
-
         // Subscribe to the config changes
         this._fuseConfigService.config
             .pipe(takeUntil(this._unsubscribeAll))
@@ -147,28 +135,6 @@ 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/components/toolbar/toolbar.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { MatButtonModule, MatIconModule, MatMenuModule, MatProgressBarModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
 
 import { FuseSearchBarModule, FuseShortcutsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';
@@ -16,7 +16,6 @@ import { ToolbarComponent } from 'app/layout/components/toolbar/toolbar.componen
         MatButtonModule,
         MatIconModule,
         MatMenuModule,
-        MatProgressBarModule,
         MatToolbarModule,
 
         FuseSharedModule,

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

@@ -1,4 +1,18 @@
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
+<div id="main">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
@@ -55,13 +69,19 @@
 
 </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 -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -99,7 +119,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar [variant]="fuseConfig.layout.navbar.variant"

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

@@ -16,13 +16,6 @@ horizontal-layout-1 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1
         > .container {
             position: relative;
@@ -49,6 +42,7 @@ horizontal-layout-1 {
                     transform: translateZ(0);
                     overflow-x: hidden;
                     overflow-y: auto;
+                    -webkit-overflow-scrolling: touch;
 
                     // Content component
                     content {

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

@@ -1,4 +1,18 @@
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
+<div id="main">
 
     <!-- TOOLBAR: Above -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
@@ -67,13 +81,19 @@
 
 </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 -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -101,7 +121,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -113,7 +133,7 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">

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

@@ -16,13 +16,6 @@ vertical-layout-1 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1
         > .container {
             position: relative;
@@ -49,6 +42,7 @@ vertical-layout-1 {
                     transform: translateZ(0);
                     overflow-x: hidden;
                     overflow-y: auto;
+                    -webkit-overflow-scrolling: touch;
 
                     // Content component
                     content {

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

@@ -1,4 +1,18 @@
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
+<div id="main">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
@@ -67,13 +81,19 @@
 
 </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 -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -101,7 +121,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -113,7 +133,7 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">

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

@@ -16,13 +16,6 @@ vertical-layout-2 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1 (Scrollable)
         > .container {
             position: relative;
@@ -32,6 +25,7 @@ vertical-layout-2 {
             width: 100%;
             overflow-x: hidden;
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
             transform: translateZ(0);
 
             // Container 2

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

@@ -1,4 +1,18 @@
-<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
+<div id="main">
 
     <!-- TOOLBAR: Above fixed -->
     <ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
@@ -53,13 +67,19 @@
 
 </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 -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -87,7 +107,7 @@
 
 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar name="navbar"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -99,7 +119,7 @@
 
 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar name="navbar" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                   [folded]="fuseConfig.layout.navbar.folded"
                   lockedOpen="gt-md"
                   *ngIf="!fuseConfig.layout.navbar.hidden">

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

@@ -16,13 +16,6 @@ vertical-layout-3 {
         z-index: 1;
         min-width: 0;
 
-        // Boxed
-        &.boxed {
-            max-width: 1200px;
-            margin: 0 auto;
-            @include mat-elevation(8);
-        }
-
         // Container 1 (Scrollable)
         > .container {
             position: relative;
@@ -32,6 +25,7 @@ vertical-layout-3 {
             width: 100%;
             overflow-x: hidden;
             overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
             transform: translateZ(0);
 
             // Container 2

src/app/main/apps/academy/course/course.component.scss

@@ -149,6 +149,7 @@
                 left: 0;
                 padding: 48px;
                 overflow: auto;
+                -webkit-overflow-scrolling: touch;
 
                 &.ng-animating {
                     overflow: hidden;

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

@@ -33,6 +33,7 @@
         #chat-content {
             background: transparent;
             overflow: auto;
+            -webkit-overflow-scrolling: touch;
 
             .message-row {
                 padding: 16px;
@@ -113,9 +114,10 @@
                     padding-right: 16px;
 
                     textarea {
-                        overflow: auto;
                         max-height: 80px;
                         transition: height 200ms ease;
+                        overflow: auto;
+                        -webkit-overflow-scrolling: touch;
 
                         &.grow {
                             height: 80px;

src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss

@@ -42,6 +42,7 @@
 
     .sidenav-content {
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .contact-list, .chat-list {
 

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

@@ -5,6 +5,7 @@
     flex: 1;
     flex-direction: column;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 
     mat-toolbar {
 

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

@@ -5,6 +5,7 @@
     flex: 1;
     flex-direction: column;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 
     mat-toolbar {
 

src/app/main/apps/e-commerce/order/order.component.scss

@@ -35,6 +35,7 @@
                     &.compact {
                         padding: 0;
                         overflow: auto;
+                        -webkit-overflow-scrolling: touch;
 
                         .invoice-container {
                             padding: 16px;

src/app/main/apps/e-commerce/orders/orders.component.scss

@@ -33,6 +33,7 @@
         flex: 1 1 auto;
         border-bottom: 1px solid rgba(0, 0, 0, .12);
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .mat-header-row {
             min-height: 64px;

src/app/main/apps/e-commerce/products/products.component.scss

@@ -32,6 +32,7 @@
         flex: 1 1 auto;
         border-bottom: 1px solid rgba(0, 0, 0, .12);
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .mat-header-row {
             min-height: 64px;

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

@@ -43,6 +43,7 @@
         .content {
             flex: 1 1 auto;
             overflow: auto;
+            -webkit-overflow-scrolling: touch;
         }
     }
 

src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss

@@ -4,8 +4,9 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow-y: auto;
     padding: 24px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .select-message-text {
         font-size: 24px;

src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss

@@ -3,9 +3,10 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow-y: auto;
     padding: 0;
     border-right: 1px solid rgba(0, 0, 0, .12);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .no-messages-text {
         font-size: 24px;

src/app/main/apps/mail/mail-details/mail-details.component.scss

@@ -4,8 +4,9 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow-y: auto;
     padding: 24px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .select-message-text {
         font-size: 24px;

src/app/main/apps/mail/mail-list/mail-list.component.scss

@@ -3,9 +3,10 @@
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow-y: auto;
     padding: 0;
     border-right: 1px solid rgba(0, 0, 0, .12);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .no-messages-text {
         font-size: 24px;

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

@@ -28,9 +28,10 @@
 
         .list-content {
             position: relative;
+            min-height: 0;
             overflow: hidden;
             overflow-y: auto;
-            min-height: 0;
+            -webkit-overflow-scrolling: touch;
 
             .list-cards {
                 position: relative;

src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss

@@ -32,6 +32,7 @@
             > .content {
                 flex: 1 1 auto;
                 overflow-y: auto;
+                -webkit-overflow-scrolling: touch;
             }
         }
     }

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

@@ -6,6 +6,7 @@
     #boards {
         width: 100%;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         .board-list {
             padding: 32px 0;

src/app/main/apps/todo/todo-details/todo-details.component.scss

@@ -5,6 +5,7 @@
     flex: 1 0 auto;
     flex-direction: column;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .todo-header {
         padding: 24px;

src/app/main/apps/todo/todo-list/todo-list.component.scss

@@ -2,10 +2,11 @@
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
-    overflow-y: auto;
     position: relative;
     padding: 0;
     border-right: 1px solid rgba(0, 0, 0, .12);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .no-todos-text {
         font-size: 24px;

src/app/main/documentation/changelog/changelog.component.html

@@ -19,6 +19,167 @@
 
         <div class="changelog">
 
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.4 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.4</span>
+                    <span class="date">(2018-07-14)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="breaking-changes">
+                        <span class="title">Breaking Changes</span>
+                        <ul>
+                            <li>
+                                (FuseLoadingBarService) Removed in favor of the new FuseProgressBar component
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>Updated Angular to 6.0.9</li>
+                            <li>Updated various other packages</li>
+                            <li>
+                                (FuseProgressBar) New component and its service for globally controlling a progress bar
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Navbar) Moved navbar styles to the variants for better granular control</li>
+                        </ul>
+                    </div>
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Global) Scrolling is not smooth on iOS devices</li>
+                            <li>(Horizontal Layout) Navbar covers the entire screen</li>
+                            <li>(Boxed Layout) Boxed layout has alignment issues</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.3 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.3</span>
+                    <span class="date">(2018-07-13)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Navbar) Doesn't scroll on Firefox, IE & Edge</li>
+                            <li>(Navbar) IE11 style fixes</li>
+                            <li>(Chat Panel) IE11 style fixes</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Chat Panel) Style and logic tweaks</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.2 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.2</span>
+                    <span class="date">(2018-07-12)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>Added the missing 'is-mobile' check back to the AppComponent</li>
+                            <li>Scrollbar styles are being modified in some mobile devices</li>
+                            <li>(Chat Panel) Mobile scrolling and layout issues</li>
+                            <li>
+                                (Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
+                                prevent style leak
+                            </li>
+                            <li>(Toolbar) Removed unnecessary chat panel toggle method</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Skeleton) Removed chat panel from skeleton as it's more like an app</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.1 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.1</span>
+                    <span class="date">(2018-07-12)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>
+                                (Layout) Added SidePanel position to the layout for controlling Chat Panel and possible
+                                other panels
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Chat Panel) Mobile width issues</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>Removed chat panel from auth pages using layout options</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
             <!-- --------------------------------------------------------------------------------------------- -->
             <!-- @ v6.2.0 -->
             <!-- --------------------------------------------------------------------------------------------- -->
@@ -26,7 +187,7 @@
 
                 <div class="title">
                     <span class="version">v6.2.0</span>
-                    <span class="date">(TBA)</span>
+                    <span class="date">(2018-07-11)</span>
                 </div>
 
                 <div class="groups">

src/app/main/documentation/components/cards/cards.component.scss

@@ -43,9 +43,10 @@
                         display: flex !important;
                         flex: 1;
                         max-height: 400px;
-                        overflow: auto;
                         min-width: 400px;
                         margin-left: 24px;
+                        overflow: auto;
+                        -webkit-overflow-scrolling: touch;
                     }
                 }
             }

src/app/main/documentation/components/components.module.ts

@@ -11,6 +11,7 @@ import { DocsComponentsCountdownComponent } from 'app/main/documentation/compone
 import { DocsComponentsHighlightComponent } from 'app/main/documentation/components/highlight/highlight.component';
 import { DocsComponentsMaterialColorPickerComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component';
 import { DocsComponentsNavigationComponent } from 'app/main/documentation/components/navigation/navigation.component';
+import { DocsComponentsProgressBarComponent } from 'app/main/documentation/components/progress-bar/progress-bar.component';
 import { DocsComponentsSearchBarComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
 import { DocsComponentsSidebarComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
 import { DocsComponentsShortcutsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
@@ -37,6 +38,10 @@ const routes = [
         path     : 'navigation',
         component: DocsComponentsNavigationComponent
     },
+    {
+        path     : 'progress-bar',
+        component: DocsComponentsProgressBarComponent
+    },
     {
         path     : 'search-bar',
         component: DocsComponentsSearchBarComponent
@@ -62,6 +67,7 @@ const routes = [
         DocsComponentsHighlightComponent,
         DocsComponentsMaterialColorPickerComponent,
         DocsComponentsNavigationComponent,
+        DocsComponentsProgressBarComponent,
         DocsComponentsSearchBarComponent,
         DocsComponentsSidebarComponent,
         DocsComponentsShortcutsComponent,

src/app/main/documentation/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,83 @@
+<div id="progress-bar" class="page-layout simple fullwidth docs">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-18">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Documentation</span>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Components</span>
+            </div>
+            <div class="h2 mt-16">Progress Bar</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>fuse-progress-bar</code> is a custom built Fuse component allows you to have a service controlled
+            progress bar. It internally uses <code>mat-progress-bar</code> and provides a global service to control it.
+        </p>
+
+        <p class="message-box info">
+            Due to the nature of global progress bars, <code>fuse-progress-bar</code> can only be used once in the
+            entire app and it's currently located at <code>app.component.html</code> file.
+        </p>
+
+        <div class="section-title">Usage</div>
+        <p class="py-8">
+            <fuse-highlight lang="html">
+                <textarea #source>
+                    <fuse-progress-bar></fuse-progress-bar>
+                </textarea>
+            </fuse-highlight>
+        </p>
+
+        <div class="section-title">Service Usage</div>
+        <p class="mat-grey-200-bg py-8">
+
+            <fuse-highlight lang="typescript">
+                <textarea #source>
+                    export class SomeComponent implements OnInit
+                    {
+                        /**
+                        * Constructor
+                        */
+                        constructor(
+                            private _fuseProgressBarService: FuseProgressBarService
+                        ) {}
+
+                        showcase()
+                        {
+                            // Show the progress bar
+                            this._fuseProgressBarService.show();
+
+                            // Hide the progress bar
+                            this._fuseProgressBarService.hide();
+
+                            // Set the mode
+                            // mode: 'determinate' | 'indeterminate' | 'buffer' | 'query'
+                            this._fuseProgressBarService.setMode(mode);
+
+                            // Set the value
+                            // value: number
+                            this._fuseProgressBarService.setValue(value);
+
+                            // Set the buffer value
+                            // bufferValue: number
+                            this._fuseProgressBarService.setBufferValue(bufferValue);
+                        }
+                    }
+                </textarea>
+            </fuse-highlight>
+
+        </p>
+
+    </div>
+
+</div>
+

src/app/main/documentation/components/progress-bar/progress-bar.component.scss

@@ -0,0 +1,7 @@
+:host {
+
+    .content{
+        max-width: 1100px;
+    }
+
+}

src/app/main/documentation/components/progress-bar/progress-bar.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'docs-components-progress-bar',
+    templateUrl: './progress-bar.component.html',
+    styleUrls  : ['./progress-bar.component.scss']
+})
+export class DocsComponentsProgressBarComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}

src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html

@@ -1,66 +0,0 @@
-<div id="fuse-loading-bar" class="page-layout simple fullwidth docs">
-
-    <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
-        <div fxLayout="column" fxLayoutAlign="center start">
-            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="secondary-text s-18">home</mat-icon>
-                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
-                <span class="secondary-text">Documentation</span>
-                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
-                <span class="secondary-text">Services</span>
-            </div>
-            <div class="h2 mt-16">Fuse Loading Bar</div>
-        </div>
-    </div>
-    <!-- / HEADER -->
-
-    <!-- CONTENT -->
-    <div class="content p-24">
-
-        <p>
-            <code>Loading bar</code> is a custom Fuse service that allows to have a control on the loading bar that is
-            placed in the Toolbar by default.
-        </p>
-
-        <div class="section-title">Usage</div>
-        <p class="mat-grey-200-bg py-8">
-
-            <fuse-highlight lang="typescript">
-                <textarea #source>
-
-                    export class SomeComponent implements OnInit
-                    {
-                        constructor(
-                            private _fuseLoadingBarService: FuseLoadingBarService
-                        ) {}
-
-                        ngOnInit()
-                        {
-                            // Subscribe to the Fuse loading bar service
-                            this._fuseLoadingBarService.visible
-                                .subscribe((visible) => {
-                                    this.showLoadingBar = visible;
-                            });
-                        }
-
-                        showLoadingBar()
-                        {
-                            this._fuseLoadingBarService.showLoadingBar();
-                        }
-
-                        hideLoadingBar()
-                        {
-                            this._fuseLoadingBarService.hideLoadingBar();
-                        }
-                    }
-
-                </textarea>
-            </fuse-highlight>
-
-        </p>
-
-    </div>
-
-</div>
-

src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss

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

src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-loading-bar-service-docs',
-    templateUrl: './fuse-loading-bar.component.html',
-    styleUrls  : ['./fuse-loading-bar.component.scss']
-})
-export class FuseLoadingBarServiceDocsComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-
-    }
-}

src/app/main/documentation/services/services.module.ts

@@ -6,7 +6,6 @@ import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseHighlightModule } from '@fuse/components/index';
 
 import { FuseConfigServiceDocsComponent } from 'app/main/documentation/services/fuse-config/fuse-config.component';
-import { FuseLoadingBarServiceDocsComponent } from 'app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component';
 import { FuseSplashScreenServiceDocsComponent } from 'app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component';
 
 const routes = [
@@ -14,10 +13,6 @@ const routes = [
         path     : 'fuse-config',
         component: FuseConfigServiceDocsComponent
     },
-    {
-        path     : 'fuse-loading-bar',
-        component: FuseLoadingBarServiceDocsComponent
-    },
     {
         path     : 'fuse-splash-screen',
         component: FuseSplashScreenServiceDocsComponent
@@ -27,7 +22,6 @@ const routes = [
 @NgModule({
     declarations: [
         FuseConfigServiceDocsComponent,
-        FuseLoadingBarServiceDocsComponent,
         FuseSplashScreenServiceDocsComponent
     ],
     imports     : [

src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss

@@ -36,11 +36,13 @@
         }
 
         #forgot-password-form-wrapper {
-            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;
             background: #FFFFFF;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+
             @include mat-elevation(16);
 
             @include media-breakpoint('sm') {

src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.ts

@@ -28,13 +28,16 @@ export class ForgotPassword2Component implements OnInit
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/forgot-password/forgot-password.component.ts

@@ -28,13 +28,16 @@ export class ForgotPasswordComponent implements OnInit
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/lock/lock.component.ts

@@ -28,13 +28,16 @@ export class LockComponent implements OnInit
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/login-2/login-2.component.scss

@@ -36,11 +36,13 @@
         }
 
         #login-form-wrapper {
-            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;
             background: #FFFFFF;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+
             @include mat-elevation(16);
 
             @include media-breakpoint('sm') {

src/app/main/pages/authentication/login-2/login-2.component.ts

@@ -28,13 +28,16 @@ export class Login2Component implements OnInit
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/login/login.component.ts

@@ -28,13 +28,16 @@ export class LoginComponent implements OnInit
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/mail-confirm/mail-confirm.component.ts

@@ -23,13 +23,16 @@ export class MailConfirmComponent
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/register-2/register-2.component.scss

@@ -36,11 +36,13 @@
         }
 
         #register-form-wrapper {
-            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;
             background: #FFFFFF;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+
             @include mat-elevation(16);
 
             @include media-breakpoint('sm') {

src/app/main/pages/authentication/register-2/register-2.component.ts

@@ -27,13 +27,16 @@ export class Register2Component implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/register/register.component.ts

@@ -27,13 +27,16 @@ export class RegisterComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss

@@ -36,11 +36,13 @@
         }
 
         #reset-password-form-wrapper {
-            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;
             background: #FFFFFF;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+
             @include mat-elevation(16);
 
             @include media-breakpoint('sm') {

src/app/main/pages/authentication/reset-password-2/reset-password-2.component.ts

@@ -27,13 +27,16 @@ export class ResetPassword2Component implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/authentication/reset-password/reset-password.component.ts

@@ -27,13 +27,16 @@ export class ResetPasswordComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/coming-soon/coming-soon.component.ts

@@ -34,13 +34,16 @@ export class ComingSoonComponent implements OnInit, OnDestroy
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/errors/404/error-404.component.ts

@@ -21,13 +21,16 @@ export class Error404Component
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/errors/500/error-500.component.ts

@@ -21,13 +21,16 @@ export class Error500Component
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/main/pages/maintenance/maintenance.component.ts

@@ -23,13 +23,16 @@ export class MaintenanceComponent
         // Configure the layout
         this._fuseConfigService.config = {
             layout: {
-                navbar : {
+                navbar   : {
                     hidden: true
                 },
-                toolbar: {
+                toolbar  : {
                     hidden: true
                 },
-                footer : {
+                footer   : {
+                    hidden: true
+                },
+                sidepanel: {
                     hidden: true
                 }
             }

src/app/navigation/navigation.ts

@@ -849,7 +849,7 @@ export const navigation: FuseNavigation[] = [
                 icon : 'update',
                 url  : '/documentation/changelog',
                 badge: {
-                    title: '6.2.0',
+                    title: '6.2.4',
                     bg   : '#EC0C8E',
                     fg   : '#FFFFFF'
                 }
@@ -960,6 +960,12 @@ export const navigation: FuseNavigation[] = [
                         type : 'item',
                         url  : '/documentation/components/navigation'
                     },
+                    {
+                        id   : 'progress-bar',
+                        title: 'Progress Bar',
+                        type : 'item',
+                        url  : '/documentation/components/progress-bar'
+                    },
                     {
                         id   : 'search-bar',
                         title: 'Search Bar',
@@ -1057,12 +1063,6 @@ export const navigation: FuseNavigation[] = [
                         type : 'item',
                         url  : '/documentation/services/fuse-config'
                     },
-                    {
-                        id   : 'fuse-loading-bar',
-                        title: 'Fuse Loading Bar',
-                        type : 'item',
-                        url  : '/documentation/services/fuse-loading-bar'
-                    },
                     {
                         id   : 'fuse-splash-screen',
                         title: 'Fuse Splash Screen',