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

<div id="chat" class="page-layout carded fullwidth inner-scroll">
  <!-- TOP BACKGROUND -->
  <div class="top-bg accent"></div>
  <!-- / TOP BACKGROUND -->

  <!-- CENTER -->
  <div class="center">
    <!-- CONTENT CARD -->
    <div class="content-card">
      <mat-sidenav-container>
        <!-- LEFT SIDENAV -->
        <mat-sidenav
          class="sidenav"
          position="start"
          opened="true"
          mode="side"
          matIsLockedOpen="gt-md"
        >
          <app-layout-chat-left-sidenav></app-layout-chat-left-sidenav>
        </mat-sidenav>
        <!-- / LEFT SIDENAV -->

        <!-- CONTENT -->
        <app-layout-chat-intro *ngIf="!selectedChat"></app-layout-chat-intro>

        <app-layout-chat-messages
          *ngIf="selectedChat"
        ></app-layout-chat-messages>
        <!-- / CONTENT -->
        <!-- RIGHT SIDENAV -->
        <mat-sidenav class="sidenav" position="end" opened="true" mode="side">
          <app-layout-chat-right-sidenav></app-layout-chat-right-sidenav>
        </mat-sidenav>
        <!-- / RIGHT SIDENAV -->
      </mat-sidenav-container>
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
</div>