add new components for chat in shared

src/app/pages/chat/chat.page.html

@@ -1,22 +1,6 @@
-<ion-header>
-  <!-- <app-header></app-header> -->
-  <app-header-no-search></app-header-no-search>
+<ion-header class="ion-no-border">
+  <app-header></app-header>
 </ion-header>
-<!-- <ion-header  class="ion-no-border">
-  <ion-toolbar class="bg-blue">
-    <div class=" d-flex main-header">
-      <div class="title-content">
-        <div class="div-title">
-          <ion-label class="title">Chat</ion-label>
-        </div>
-        <div class="div-icon">
-          <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
-          <ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header> -->
 
 <ion-content class="height-100">
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
@@ -27,9 +11,10 @@
   <div class="main-content height-100">
 
     <div class="d-flex height-100">
+
       <!--  -->
-      <div class="d-flex flex-column justify-center">
-        <p class="text-center mt-0">Chat</p>
+      <div class="d-flex aside-wrapper flex-column pt-25 justify-center">
+        <p class="text-center mt-0 aside-title px-20">Chat</p>
         <ion-toolbar >
           <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
             <ion-segment-button value="Contactos">
@@ -96,7 +81,7 @@
       </div>
       <!-- -->
       <div class="d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
-        NONE
+        <app-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.messages"></app-messages>
 
       </div>
     </div>

src/app/pages/chat/chat.page.scss

@@ -1,4 +1,9 @@
-
+ion-content{
+   --background: transparent;
+ }
+ :host{
+  background: #0782c9;
+  }
 .main-header{
   width: 100%; /* 400px */
   height: 100%;
@@ -38,13 +43,15 @@
   }
 }
 .main-content{
-  width: 100%; /* 400px */
+  width: 100%; 
   height: 100%;
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
   overflow:auto;
   padding: 15px 20px 0 20px;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
 
   .iconschatnew-group{
     width: 30px;
@@ -102,3 +109,25 @@
     color: #000;
   }
 }
+
+@media only screen and (min-width: 1024px) {
+  .main-content{
+    .aside-wrapper{
+      border: 1px solid red;
+      justify-content: flex-start !important;
+      .aside-title{
+        font-family: Roboto;
+        font-size: 25px;
+        text-align: left;
+      }
+    }
+    .aside{
+      width: 340px;
+    }
+    .aside-content{
+      display: flex !important;
+      background-color: white;
+    }
+  }
+
+}

src/app/pages/chat/chat.page.ts

@@ -38,6 +38,10 @@ export class ChatPage implements OnInit {
   result:any;
   dmUsers:any;
 
+  desktopComponent: any = {
+    messages: false,
+  }
+
   constructor(
     private http:HttpClient,
     private chatService: ChatService,
@@ -49,9 +53,12 @@ export class ChatPage implements OnInit {
       this.headers = new HttpHeaders();
       /* this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
       this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ'); */
-      
     }
-
+    closeAllDesktopComponent(){
+      this.desktopComponent = {
+        messages: false,
+      }
+    }
   ngOnInit() {
     this.segment = "Contactos";
 
@@ -164,6 +171,14 @@ export class ChatPage implements OnInit {
     modal.onDidDismiss();
   }
   async openMessages(dm:any){
+    this.closeAllDesktopComponent();
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'chat-mobile-modal-to-Desktop'
+    }
     console.log(dm);
     
     const modal = await this.modalController.create({

src/app/pages/gabinete-digital/gabinete-digital.page.scss

@@ -154,6 +154,7 @@ ion-content{
 
   .main-content{
     .aside-wrapper{
+      border: 1px solid red;
       justify-content: flex-start !important;
       .aside-title{
         font-family: Roboto;