style menus

src/app/shared/chat/messages/contacts/contacts.page.html

@@ -19,20 +19,22 @@
 </ion-header>
 
 <ion-content>
+  
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
       <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
       <ion-refresher-content>
       </ion-refresher-content>
     </ion-refresher>
+
   <div class="main-content">
     
-    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">
         <ion-label>{{header}}</ion-label>
       </div>
 
-      <div (click)="createRoom(user.username)" *virtualItem="let user" class="item-user">
+      <div (click)="openMessagesPage(user.username)" *virtualItem="let user" class="item-user">
          <p>{{user.name}}</p>
          <span class="icon">
           <ion-icon class="{{user.status}}" slot="end" name="ellipse"></ion-icon>

src/app/shared/chat/messages/contacts/contacts.page.scss

@@ -4,7 +4,7 @@
     --opacity: 1;
  
    .main-header{
-     width: 100%; /* 400px */
+     width: 100%;
      height: 100%;
      font-family: Roboto;
      border-top-left-radius: 25px;
@@ -27,7 +27,6 @@
        padding-left: 20px;
      }
        .title-content{
-         width: 360px;
          margin: 0px auto;
          overflow: auto;
          padding: 0 !important;
@@ -80,13 +79,13 @@
    --background:transparent;
  }
  .main-content{
-   width: 100%;
-   height: 100%;
-   font-family: Roboto;
-   margin: 0 auto;
-   background-color: #fff;
-   overflow:auto;
-   padding: 0 0 0 0;
+  width: 100%;
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 0 0 0 0;
+  overflow:auto;
  
      .item-divider{
        background: #ebebeb;

src/app/shared/chat/messages/contacts/contacts.page.ts

@@ -1,5 +1,5 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -23,6 +23,8 @@ export class ContactsPage implements OnInit {
   room:any;
   dm:any;
 
+  @Output() openMessage:EventEmitter<any> = new EventEmitter<any>();
+
   constructor(
     private modalController: ModalController,
     private http: HttpClient,
@@ -46,6 +48,22 @@ export class ContactsPage implements OnInit {
     this.textSearch = event.detail.value;
   }
 
+  openMessagesPage(username:string){
+    if( window.innerWidth <= 1024){
+      this.createRoom(username);
+    }
+    else{
+      let body = {
+        username: username,
+      }
+      this.chatService.createRoom(body).subscribe(res => {
+        console.log(res);
+        this.room = res['room'];
+        this.openMessage.emit(this.room._id);
+      });
+    }
+  }
+
   loadUsers(){
     this.options = { 
       headers: this.headers,