Updated changelog and nav badge

(Chat Panel) Fixed: IE11 issues

package-lock.json

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

package.json

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

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/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,17 +19,19 @@
 
     </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 -->
     <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
@@ -37,7 +40,7 @@
              class="contacts-list-item"
              [ngClass]="contact.status"
              [class.active]="contact.id === selectedContact?.id"
-             (click)="goToChat(contact)">
+             (click)="toggleChat(contact)">
 
             <img class="avatar" [src]="contact.avatar"
                  [matTooltip]="contact.name"
@@ -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,23 @@ 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
@@ -55,8 +72,24 @@ chat-panel {
             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 {
@@ -76,14 +109,17 @@ chat-panel {
 
             .avatar {
                 margin: 0;
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
             }
 
             .unread-count {
                 position: absolute;
                 min-width: 18px;
                 height: 18px;
-                top: 4px;
+                top: 8px;
-                left: 10px;
+                left: 12px;
                 border-radius: 9px;
                 padding: 0 5px;
                 font-size: 11px;
@@ -100,9 +136,9 @@ chat-panel {
                 position: absolute;
                 width: 12px;
                 height: 12px;
-                bottom: 3px;
+                bottom: 10px;
                 left: 44px;
-                border: 2px solid white;
+                border: 2px solid #F9F9F9;
                 border-radius: 50%;
 
                 &.online {
@@ -125,7 +161,11 @@ chat-panel {
     }
 
     #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;
@@ -152,6 +192,7 @@ chat-panel {
                     align-items: center;
                     justify-content: center;
                     padding: 12px;
+                    max-width: 100%;
 
                     .message {
                         white-space: pre-wrap;
@@ -165,6 +206,7 @@ chat-panel {
                         font-size: 11px;
                         margin-top: 8px;
                         top: 100%;
+                        left: 0;
                         color: $black-87-opacity;
                         white-space: nowrap;
                     }
@@ -212,7 +254,7 @@ chat-panel {
 
                     .bubble {
                         margin-left: auto;
-                        background-color: #FFFFFF;
+                        background-color: #E0E0E0;
                         color: $black-87-opacity;
 
                         border-top-left-radius: 20px;
@@ -292,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 {
@@ -350,6 +414,20 @@ fuse-sidebar {
             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

@@ -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/navbar/navbar.component.scss

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

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

@@ -41,6 +41,8 @@ fuse-sidebar {
                                 position: relative;
                                 top: auto;
                                 padding: 0;
+                                transform: translateX(0);
+                                left: auto;
 
                                 .avatar {
                                     width: 40px;
@@ -79,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;
             }
 
@@ -134,6 +138,8 @@ navbar {
                     top: 92px;
                     border-radius: 50%;
                     padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
 
                     .avatar {
                         width: 72px;

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">

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">

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">

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">

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

@@ -19,6 +19,75 @@
 
         <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 -->
             <!-- --------------------------------------------------------------------------------------------- -->
@@ -31,26 +100,27 @@
 
                 <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>
-                            <ul>
+                            <li>(Chat Panel) Mobile width issues</li>
-                                <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>
                         </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>
+                            <li>Removed chat panel from auth pages using layout options</li>
                         </ul>
                     </div>
 

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