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

<div class="container">
  <div class="left-side">
    <app-layout-messenger-left-side
      (openProfile)="onClickOpenProfile($event)"
    ></app-layout-messenger-left-side>
  </div>
  <mat-drawer-container class="contents" autosize>
    <!-- <mat-drawer #drawer mode="over">
      <p>Auto-resizing sidenav</p>
    </mat-drawer> -->
    <div class="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)"
      ></app-layout-messenger-messages>
    </div>
    <mat-drawer
      #rightDrawer
      mode="side"
      position="end"
      (openedChange)="onOpenedChange($event)"
    >
      <app-layout-messenger-right-drawer
        [selectedRightDrawer]="selectedRightDrawer$ | async"
        (openProfile)="onClickOpenProfile($event)"
      >
      </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>