save

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

@@ -8,14 +8,11 @@
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content height-100">
-
-    <div class="d-flex height-100">
-
-      <!--  -->
+  <div class="main-content d-flex height-100">
+      <!-- Aside left -->
       <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-toolbar class="width-100">
           <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
             <ion-segment-button value="Contactos">
               Conversas
@@ -26,11 +23,11 @@
           </ion-segment>
         </ion-toolbar>
         <div class="overflow-y-auto d-flex flex-wrap">
-        <div [ngSwitch]="segment">
+        <div class="width-100" [ngSwitch]="segment">
           <ion-list *ngSwitchCase="'Contactos'">
             <ion-item-group>
               <ion-item-sliding>
-                  <div *ngFor="let dm of userDirectMessages" class="item">
+                  <div class="item width-100" *ngFor="let dm of userDirectMessages">
                     <div class="item-icon">
                       <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
                     </div>
@@ -50,6 +47,26 @@
                       </div>
                     </div>
                   </div>
+                  <div class="item" >
+                    <div class="item-icon">
+                      <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+                    </div>
+                    <div class="item-content">
+                      <div class="item-title-time">
+                        <div class="item-title">
+                          <ion-label >
+                            <span>
+                            Tiago
+                          </span>
+                          </ion-label>
+                        </div>
+                        <div class="item-date">23/03/202 12:20</div>
+                      </div>
+                      <div class="item-description">
+                        <ion-label>oI...</ion-label>
+                      </div>
+                    </div>
+                  </div>
               </ion-item-sliding>
             </ion-item-group>
           </ion-list>
@@ -79,12 +96,11 @@
         </div>
         </div>
       </div>
-      <!-- -->
-      <div class="d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
-        <app-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.messages"></app-messages>
-
+      <!-- Aside right -->
+      <div class="aside-content d-none flex-1 aside-content height-100 overflow-y-auto pt-25">
+        <app-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showMessages"></app-messages>
+        <app-group-messages class="d-flex flex-1 flex-column height-100" *ngIf="desktopComponent.showGroupMessages"></app-group-messages>
       </div>
-    </div>
   </div>
 </ion-content>
 

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

@@ -53,6 +53,10 @@ ion-content{
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
 
+  .aside-wrapper{
+    justify-content: flex-start !important;
+  }
+
   .iconschatnew-group{
     width: 30px;
     height: 30px;
@@ -65,6 +69,7 @@ ion-content{
     object-fit: contain;
     margin: 0 5px 0 5px;
   }
+
 }
 
 .item{
@@ -109,25 +114,37 @@ ion-content{
     color: #000;
   }
 }
-
 @media only screen and (min-width: 1024px) {
   .main-content{
+    border: 1px solid blue;
+    overflow: auto;
+
     .aside-wrapper{
+      width: 40%;
       border: 1px solid red;
-      justify-content: flex-start !important;
       .aside-title{
-        font-family: Roboto;
-        font-size: 25px;
         text-align: left;
+        font-size: 25px;
+        
       }
     }
     .aside{
       width: 340px;
     }
     .aside-content{
+      width: 60%;
       display: flex !important;
       background-color: white;
     }
+    .item{
+      .item-icon{
+        width: 10%;
+      }
+      .item-content{
+        width: 90%;
+      }
+    }
+    
   }
 
 }

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

@@ -39,7 +39,8 @@ export class ChatPage implements OnInit {
   dmUsers:any;
 
   desktopComponent: any = {
-    messages: false,
+    showMessages: false,
+    showGroupMessages: false,
   }
 
   constructor(
@@ -56,7 +57,7 @@ export class ChatPage implements OnInit {
     }
     closeAllDesktopComponent(){
       this.desktopComponent = {
-        messages: false,
+        showMessages: false,
       }
     }
   ngOnInit() {
@@ -192,7 +193,7 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  
+
   async openGroupMessages(room:any){
     let classs;
     if( window.innerWidth <= 1024){