(apps/chat) Adjustments and optimizations for smaller devices

src/app/modules/admin/apps/chat/chats/chats.component.html

@@ -6,7 +6,7 @@
 
         <!-- Drawer -->
         <mat-drawer
-            class="w-100 border-r shadow-none dark:bg-gray-900"
+            class="w-full sm:w-100 lg:border-r lg:shadow-none dark:bg-gray-900"
             [autoFocus]="false"
             [(opened)]="drawerOpened"
             #drawer>
@@ -28,7 +28,7 @@
 
             <!-- Chats list -->
             <ng-container *ngIf="chats && chats.length > 0; else noChats">
-                <div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 border-r bg-card dark:bg-transparent">
+                <div class="relative flex flex-auto flex-col w-full min-w-0 lg:min-w-100 lg:max-w-100 bg-card dark:bg-transparent">
 
                     <!-- Header -->
                     <div class="flex flex-col flex-0 py-4 px-8 border-b bg-gray-50 dark:bg-transparent">
@@ -176,7 +176,7 @@
             <!-- Conversation -->
             <ng-container *ngIf="chats && chats.length > 0">
                 <div
-                    class="flex-auto"
+                    class="flex-auto border-l"
                     [ngClass]="{'z-20 absolute inset-0 lg:static lg:inset-auto flex': selectedChat && selectedChat.id,
                                 'hidden lg:flex': !selectedChat || !selectedChat.id}">
                     <router-outlet></router-outlet>

src/app/modules/admin/apps/chat/conversation/conversation.component.html

@@ -8,9 +8,9 @@
 
             <!-- Drawer -->
             <mat-drawer
-                class="w-100 border-r shadow-none dark:bg-gray-900"
+                class="w-full sm:w-100 lg:border-l lg:shadow-none dark:bg-gray-900"
                 [autoFocus]="false"
-                [mode]="'side'"
+                [mode]="drawerMode"
                 [position]="'end'"
                 [(opened)]="drawerOpened"
                 #drawer>

src/app/modules/admin/apps/chat/conversation/conversation.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { Chat } from 'app/modules/admin/apps/chat/chat.types';
 import { ChatService } from 'app/modules/admin/apps/chat/chat.service';
 
@@ -14,6 +15,7 @@ export class ConversationComponent implements OnInit, OnDestroy
 {
     @ViewChild('messageInput') messageInput: ElementRef;
     chat: Chat;
+    drawerMode: 'over' | 'side' = 'side';
     drawerOpened: boolean = false;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -23,6 +25,7 @@ export class ConversationComponent implements OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _chatService: ChatService,
+        private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _ngZone: NgZone
     )
     {
@@ -43,6 +46,25 @@ export class ConversationComponent implements OnInit, OnDestroy
             .subscribe((chat: Chat) => {
                 this.chat = chat;
 
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
+
+        // Subscribe to media changes
+        this._fuseMediaWatcherService.onMediaChange$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(({matchingAliases}) => {
+
+                // Set the drawerMode if the given breakpoint is active
+                if ( matchingAliases.includes('lg') )
+                {
+                    this.drawerMode = 'side';
+                }
+                else
+                {
+                    this.drawerMode = 'over';
+                }
+
                 // Mark for check
                 this._changeDetectorRef.markForCheck();
             });
@@ -81,6 +103,9 @@ export class ConversationComponent implements OnInit, OnDestroy
     {
         this._chatService.resetChat();
 
+        // Close the contact info in case it's opened
+        this.drawerOpened = false;
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }