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></app-layout-messenger-left-side>
  </div>
  <mat-drawer-container class="contents" autosize>
    <div class="messages">
      <app-layout-messenger-intro
        (click)="drawer.toggle()"
        *ngIf="!(this.selectedChat$ | async)"
      ></app-layout-messenger-intro>
      <app-layout-messenger-messages
        *ngIf="!!(this.selectedChat$ | async)"
      ></app-layout-messenger-messages>
    </div>
    <mat-drawer #drawer mode="side" position="end">
      <p>Auto-resizing sidenav</p>
    </mat-drawer>
  </mat-drawer-container>

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