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

<div class="container">
  <as-split
    unit="pixel"
    gutterSize="5"
    useTransition="true"
    gutterDblClickDuration="300"
    (dragEnd)="onGutterDragEnd($event)"
    (gutterDblClick)="onGutterDblClick($event)"
  >
    <as-split-area
      #asSplitLeft
      [size]="leftSideComponentWidth"
      minSize="300"
      maxSize="500"
      class="split-area"
    >
      <div class="left-side">
        <app-layout-messenger-left-side
          (openProfile)="onClickOpenProfile($event)"
        ></app-layout-messenger-left-side>
      </div>
    </as-split-area>
    <as-split-area size="*">
      <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)"
          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>
    </as-split-area>
  </as-split>

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