Merge branch 'master' into skeleton

Updated the changelog
Theme options button adjustments

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "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(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
                     background: new FormControl(),
                     folded    : new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl(),
                     variant   : new FormControl()
                 }),
-                toolbar: this._formBuilder.group({
+                toolbar  : this._formBuilder.group({
                     background: new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl()
                 }),
-                footer : this._formBuilder.group({
+                footer   : this._formBuilder.group({
                     background: new FormControl(),
                     hidden    : new FormControl(),
                     position  : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden: new FormControl(),
+                    position  : new FormControl()
                 })
             }),
             customScrollbars: new FormControl()

src/@fuse/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.scss

@@ -11,7 +11,7 @@
     .theme-options-button {
         position: absolute;
         top: 160px;
-        right: 70px;
+        right: 0;
         width: 48px;
         height: 48px;
         line-height: 48px;
@@ -23,10 +23,6 @@
         opacity: .90;
         z-index: 998;
 
-        @include media-breakpoint-down('md') {
-            right: 0;
-        }
-
         mat-icon {
             animation: rotating 3s linear infinite;
         }

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',
-        width  : 'fullwidth',
-        navbar : {
+        style    : 'vertical-layout-1',
+        width    : 'fullwidth',
+        navbar   : {
             background: 'mat-fuse-dark-700-bg',
             folded    : false,
             hidden    : false,
             position  : 'left',
             variant   : 'vertical-style-1'
         },
-        toolbar: {
+        toolbar  : {
             background: 'mat-white-500-bg',
             hidden    : false,
             position  : 'below-static'
         },
-        footer : {
+        footer   : {
             background: 'mat-fuse-dark-900-bg',
             hidden    : false,
             position  : 'below-fixed'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
         }
     },
     customScrollbars: true

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,60 +1,63 @@
 @import "src/@fuse/scss/fuse";
 
 fuse-sidebar {
-    overflow: hidden;
 
-    &.folded:not(.unfolded) {
+    &.navbar-fuse-sidebar {
+        overflow: hidden;
 
-        navbar {
+        &.folded:not(.unfolded) {
 
-            navbar-vertical-style-1 {
+            navbar {
 
-                .navbar-top {
-                    padding: 12px 0;
-                    justify-content: center;
+                navbar-vertical-style-1 {
 
-                    .buttons {
-                        display: none;
-                    }
+                    .navbar-top {
+                        padding: 12px 0;
+                        justify-content: center;
 
-                    .logo {
-
-                        .logo-icon {
-                            width: 32px;
-                            height: 32px;
-                        }
-
-                        .logo-text {
+                        .buttons {
                             display: none;
                         }
+
+                        .logo {
+
+                            .logo-icon {
+                                width: 32px;
+                                height: 32px;
+                            }
+
+                            .logo-text {
+                                display: none;
+                            }
+                        }
                     }
-                }
 
-                .navbar-scroll-container {
+                    .navbar-scroll-container {
 
-                    .user {
-                        padding: 12px 0;
+                        .user {
+                            padding: 12px 0;
 
-                        .avatar-container {
-                            position: relative;
-                            top: auto;
-                            padding: 0;
+                            .avatar-container {
+                                position: relative;
+                                top: auto;
+                                padding: 0;
 
-                            .avatar {
-                                width: 40px;
-                                height: 40px;
+                                .avatar {
+                                    width: 40px;
+                                    height: 40px;
+                                }
+                            }
+
+                            .username,
+                            .email {
+                                display: none;
                             }
                         }
 
-                        .username,
-                        .email {
-                            display: none;
+                        .navbar-content {
+                            margin-top: 0;
                         }
                     }
-
-                    .navbar-content {
-                        margin-top: 0;
-                    }
                 }
             }
         }

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

@@ -1,22 +1,25 @@
 @import "src/@fuse/scss/fuse";
 
 fuse-sidebar {
-    overflow: hidden;
 
-    &.folded:not(.unfolded) {
+    &.navbar-fuse-sidebar {
+        overflow: hidden;
 
-        navbar {
+        &.folded:not(.unfolded) {
 
-            navbar-vertical-style-2 {
+            navbar {
 
-                .navbar-header {
-                    padding: 0 13px;
+                navbar-vertical-style-2 {
 
-                    .logo {
+                    .navbar-header {
+                        padding: 0 13px;
 
-                        .logo-text {
-                            opacity: 0;
-                            transition: opacity 200ms ease;
+                        .logo {
+
+                            .logo-text {
+                                opacity: 0;
+                                transition: opacity 200ms ease;
+                            }
                         }
                     }
                 }

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

@@ -83,15 +83,6 @@
 
             <div class="toolbar-separator" fxHide fxShow.gt-xs></div>
 
-            <button mat-icon-button fxHide.gt-md
-                    class="chat-panel-toggle-button"
-                    (click)="toggleSidebarOpen('chatPanel')"
-                    aria-label="Toggle chat panel">
-                <mat-icon class="icon">chat</mat-icon>
-            </button>
-
-            <div class="toolbar-separator" fxHide.gt-md></div>
-
             <button mat-icon-button
                     class="quick-panel-toggle-button"
                     (click)="toggleSidebarOpen('quickPanel')"

src/app/layout/components/toolbar/toolbar.component.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,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above -->
@@ -55,13 +63,13 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -99,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"
                   *ngIf="!fuseConfig.layout.navbar.hidden">
         <navbar [variant]="fuseConfig.layout.navbar.variant"

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

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

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

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

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

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

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

@@ -1,3 +1,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
@@ -67,13 +75,13 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -101,7 +109,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 +121,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.module.ts

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

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

@@ -1,3 +1,11 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
 
     <!-- TOOLBAR: Above fixed -->
@@ -53,13 +61,13 @@
 
 </div>
 
-<!-- CHAT PANEL -->
-<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
-              [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
-              lockedOpen="gt-md">
-    <chat-panel></chat-panel>
-</fuse-sidebar>
-<!-- / CHAT PANEL -->
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- PANEL CONTENT -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
 
 <!-- QUICK PANEL -->
 <fuse-sidebar name="quickPanel" position="right" class="quick-panel">
@@ -87,7 +95,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 +107,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.module.ts

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