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 #leftSideDrawer mode="side" opened>
      <app-layout-messenger-left-side
        #leftSideContainer
        (openProfile)="onClickOpenProfile($event)"
        (sendCall)="sendClickToCall($event)"
        (sendSms)="openSms($event)"
        (mouseenter)="onMouseEnterLeftSideContainer($event)"
        (mouseleave)="onMouseLeaveLeftSideContainer($event)"
      ></app-layout-messenger-left-side>
    </mat-drawer>
    <div class="chat-messages bg-accent-brightest">
      <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>
      <button
        mat-icon-button
        class="left-drawer-toggle"
        *ngIf="
          !showLeftDrawer || showLeftDrawerIndicator || onLeftDrawerIndicator
        "
        (click)="onClickLeftDrawerToggle()"
        (mouseover)="onMouseOverLeftDrawerIndicator($event)"
        (mouseleave)="onMouseLeaveLeftDrawerIndicator($event)"
      >
        <span
          class="mdi"
          [class.mdi-chevron-right]="!showLeftDrawer"
          [class.mdi-chevron-left]="showLeftDrawer"
        ></span>
      </button>
    </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>