next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

<div class="container">
  <div>
    LG ucap
    <button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
      <mat-icon>chat</mat-icon>
    </button>
  </div>
  <mat-tab-group mat-stretch-tabs>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon>group</mat-icon>
      </ng-template>
      <app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon [matBadgeHidden]="((badgeChatUnReadCount$ | async) <= 0)" [matBadge]="badgeChatUnReadCount$ | async"
          matBadgeDescription="확인하지 않은 메시지가 있습니다." matBadgeColor="accent" matBadgePosition="above after">chat</mat-icon>
      </ng-template>
      <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon>device_hub</mat-icon>
      </ng-template>
      <app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon>phone</mat-icon>
      </ng-template>
      <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
    </mat-tab>
  </mat-tab-group>
</div>