next-ucap-messenger/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

<div class="main-container">
  <div class="left-side">
    <app-layout-messenger-left-nav> </app-layout-messenger-left-nav>
  </div>

  <mat-drawer-container class="contents" autosize>
    <mat-drawer #drawer mode="side" opened>
      <app-layout-messenger-left-side
        (openProfile)="onClickOpenProfile($event)"
        (sendCall)="sendClickToCall($event)"
        (sendSms)="openSms($event)"
      ></app-layout-messenger-left-side>
    </mat-drawer>
    <div class="chat-messages">
      <app-layout-messenger-intro
        *ngIf="!(this.selectedChat$ | async)"
      ></app-layout-messenger-intro>
      <!-- <app-layout-messenger-intro
        *ngIf="!(this.selectedChat$ | async)"
      ></app-layout-messenger-intro> -->
      <app-layout-messenger-messages
        *ngIf="!!(this.selectedChat$ | async)"
        (openProfile)="onClickOpenProfile($event)"
        (closeRightDrawer)="onCloseRightDrawer()"
      ></app-layout-messenger-messages>
    </div>
    <mat-drawer
      #rightDrawer
      mode="side"
      position="end"
      (openedChange)="onOpenedChange($event)"
      class="rightDrawer"
    >
      <app-layout-messenger-right-drawer
        [selectedRightDrawer]="selectedRightDrawer$ | async"
        (openProfile)="onClickOpenProfile($event)"
        (closeRightDrawer)="onCloseRightDrawer()"
      >
      </app-layout-messenger-right-drawer>
    </mat-drawer>
  </mat-drawer-container>

  <!-- <div class="right-side">
    <app-layout-messenger-right-side></app-layout-messenger-right-side>
  </div> -->
</div>