Updated changelog and nav badge

(Chat Panel) Fixed: IE11 issues

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.0",
+  "version": "6.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.0",
+  "version": "6.2.3",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",

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

@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
     display: flex;
     flex-direction: column;
@@ -14,6 +16,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.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(),
+                style    : new FormControl(),
-                width  : new FormControl(),
+                width    : new FormControl(),
-                navbar : this._formBuilder.group({
+                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/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

@@ -20,6 +20,8 @@
 
 <!-- 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>

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-side-panel {
-            right: 0;
+
+            @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';
@@ -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.className += ' is-mobile';
+        }
+
         // Set the private defaults
         this._unsubscribeAll = new Subject();
     }

src/app/fuse-config/index.ts

@@ -10,24 +10,28 @@ import { FuseConfig } from '@fuse/types';
 
 export const fuseConfig: FuseConfig = {
     layout          : {
-        style  : 'vertical-layout-1',
+        style    : 'vertical-layout-1',
-        width  : 'fullwidth',
+        width    : 'fullwidth',
-        navbar : {
+        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>
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
-        <mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
+            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>
+    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
-        <mat-icon class="secondary-text">arrow_forward</mat-icon>
+            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"
+        <div *ngFor="let contact of contacts"
-                       [ngClass]="contact.status"
+             class="contacts-list-item"
-                       [class.active]="contact.id === selectedContact?.id"
+             [ngClass]="contact.status"
-                       (click)="goToChat(contact)"
+             [class.active]="contact.id === selectedContact?.id"
-                       [matTooltip]="contact.name"
+             (click)="toggleChat(contact)">
-                       matTooltipPosition="left"
-                       matRipple>
 
-            <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;
+        position: relative;
+        z-index: 5;
+        padding: 16px 0;
         overflow: auto;
         width: 72px;
         min-width: 72px;
         max-width: 72px;
+        background-color: #F9F9F9;
+        -webkit-overflow-scrolling: touch;
 
         // Perfect scrollbar
         .ps__rail-y {
@@ -44,13 +62,34 @@ chat-panel {
             }
         }
 
-        .mat-list-item {
+        .contacts-list-item {
-            cursor: pointer;
             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));
+                position: relative;
-                @include mat-elevation(2);
+                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,57 +107,65 @@ chat-panel {
                 }
             }
 
-            .mat-list-item-content {
+            .avatar {
+                margin: 0;
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
+            }
 
-                .unread-count {
+            .unread-count {
-                    position: absolute;
+                position: absolute;
-                    min-width: 18px;
+                min-width: 18px;
-                    height: 18px;
+                height: 18px;
-                    top: 4px;
+                top: 8px;
-                    left: 10px;
+                left: 12px;
-                    border-radius: 9px;
+                border-radius: 9px;
-                    padding: 0 5px;
+                padding: 0 5px;
-                    font-size: 11px;
+                font-size: 11px;
-                    text-align: center;
+                text-align: center;
-                    display: flex;
+                display: flex;
-                    align-items: center;
+                align-items: center;
-                    justify-content: center;
+                justify-content: center;
-                    background-color: mat-color(mat-palette($mat-indigo));
+                background-color: mat-color(mat-palette($mat-indigo));
-                    color: white;
+                color: white;
-                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+                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 {
+                &.do-not-disturb {
-                    position: absolute;
+                    background-color: #F44336;
-                    width: 12px;
+                }
-                    height: 12px;
-                    bottom: 3px;
-                    left: 44px;
-                    border: 2px solid white;
-                    border-radius: 50%;
 
-                    &.online {
+                &.away {
-                        background-color: #4CAF50;
+                    background-color: #FFC107;
-                    }
+                }
 
-                    &.do-not-disturb {
+                &.offline {
-                        background-color: #F44336;
+                    background-color: #646464;
-                    }
-
-                    &.away {
-                        background-color: #FFC107;
-                    }
-
-                    &.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;
@@ -145,6 +192,7 @@ chat-panel {
                     align-items: center;
                     justify-content: center;
                     padding: 12px;
+                    max-width: 100%;
 
                     .message {
                         white-space: pre-wrap;
@@ -158,6 +206,7 @@ chat-panel {
                         font-size: 11px;
                         margin-top: 8px;
                         top: 100%;
+                        left: 0;
                         color: $black-87-opacity;
                         white-space: nowrap;
                     }
@@ -205,7 +254,7 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #FFFFFF;
+                        background-color: #E0E0E0;
                         color: $black-87-opacity;
 
                         border-top-left-radius: 20px;
@@ -285,12 +334,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 +408,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
+        // If the contact equals to the selectedContact,
-        this.unfoldSidebarTemporarily();
+        // 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
+            // Set the selected contact
-        this.selectedContact = contact;
+            this.selectedContact = contact;
 
-        // Load the chat
+            // Load the chat
-        this._chatPanelService.getChat(contact.id).then((chat) => {
+            this._chatPanelService.getChat(contact.id).then((chat) => {
 
-            // Set the chat
+                // Set the chat
-            this.chat = chat;
+                this.chat = chat;
 
-            // Prepare the chat for the replies
+                // Prepare the chat for the replies
-            this._prepareChatForReplies();
+                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/navbar.component.scss

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

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 {
+                navbar-vertical-style-1 {
-                    padding: 12px 0;
-                    justify-content: center;
 
-                    .buttons {
+                    .navbar-top {
-                        display: none;
+                        padding: 12px 0;
-                    }
+                        justify-content: center;
 
-                    .logo {
+                        .buttons {
-
-                        .logo-icon {
-                            width: 32px;
-                            height: 32px;
-                        }
-
-                        .logo-text {
                             display: none;
                         }
+
+                        .logo {
+
+                            .logo-icon {
+                                width: 32px;
+                                height: 32px;
+                            }
+
+                            .logo-text {
+                                display: none;
+                            }
+                        }
                     }
-                }
 
-                .navbar-scroll-container {
+                    .navbar-scroll-container {
 
-                    .user {
+                        .user {
-                        padding: 12px 0;
+                            padding: 12px 0;
 
-                        .avatar-container {
+                            .avatar-container {
-                            position: relative;
+                                position: relative;
-                            top: auto;
+                                top: auto;
-                            padding: 0;
+                                padding: 0;
+                                transform: translateX(0);
+                                left: auto;
 
-                            .avatar {
+                                .avatar {
-                                width: 40px;
+                                    width: 40px;
-                                height: 40px;
+                                    height: 40px;
+                                }
+                            }
+
+                            .username,
+                            .email {
+                                display: none;
                             }
                         }
 
-                        .username,
+                        .navbar-content {
-                        .email {
+                            margin-top: 0;
-                            display: none;
                         }
                     }
-
-                    .navbar-content {
-                        margin-top: 0;
-                    }
                 }
             }
         }
@@ -76,11 +81,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;
             }
 
@@ -131,6 +138,8 @@ navbar {
                     top: 92px;
                     border-radius: 50%;
                     padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
 
                     .avatar {
                         width: 72px;

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 {
+                navbar-vertical-style-2 {
-                    padding: 0 13px;
 
-                    .logo {
+                    .navbar-header {
+                        padding: 0 13px;
 
-                        .logo-text {
+                        .logo {
-                            opacity: 0;
+
-                            transition: opacity 200ms ease;
+                            .logo-text {
+                                opacity: 0;
+                                transition: opacity 200ms ease;
+                            }
                         }
                     }
                 }

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

@@ -26,7 +26,6 @@ export class ToolbarComponent implements OnInit, OnDestroy
     selectedLanguage: any;
     showLoadingBar: boolean;
     userStatusOptions: any[];
-    chatPanelLockedOpen: string;
 
     // Private
     private _unsubscribeAll: Subject<any>;
@@ -147,28 +146,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/horizontal/layout-1/layout-1.component.html

@@ -1,3 +1,17 @@
+<!-- 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" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
@@ -55,13 +69,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
+<!-- SIDE PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+
-              lockedOpen="gt-md">
+    <!-- CHAT PANEL -->
-    <chat-panel></chat-panel>
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
-</fuse-sidebar>
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-<!-- / CHAT PANEL -->
+                  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/vertical/layout-1/layout-1.component.html

@@ -1,3 +1,17 @@
+<!-- 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" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
@@ -67,13 +81,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
+<!-- SIDE PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+
-              lockedOpen="gt-md">
+    <!-- CHAT PANEL -->
-    <chat-panel></chat-panel>
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
-</fuse-sidebar>
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-<!-- / CHAT PANEL -->
+                  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.html

@@ -1,3 +1,17 @@
+<!-- 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" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
@@ -67,13 +81,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
+<!-- SIDE PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+
-              lockedOpen="gt-md">
+    <!-- CHAT PANEL -->
-    <chat-panel></chat-panel>
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
-</fuse-sidebar>
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-<!-- / CHAT PANEL -->
+                  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-3/layout-3.component.html

@@ -1,3 +1,17 @@
+<!-- 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" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
@@ -53,13 +67,19 @@
 
 </div>
 
-<!-- CHAT PANEL -->
+<!-- SIDE PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+
-              lockedOpen="gt-md">
+    <!-- CHAT PANEL -->
-    <chat-panel></chat-panel>
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
-</fuse-sidebar>
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-<!-- / CHAT PANEL -->
+                  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/main/documentation/changelog/changelog.component.html

@@ -19,6 +19,115 @@
 
         <div class="changelog">
 
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ 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 +135,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/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.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.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.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.3',
                     bg   : '#EC0C8E',
                     fg   : '#FFFFFF'
                 }