next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html

<mat-card class="confirm-card mat-elevation-z setting-frame">
  <mat-card-header>
    <mat-card-title
      cdkDrag
      cdkDragRootElement=".cdk-overlay-pane"
      cdkDragHandle
      >{{ 'settings.label' | translate }}</mat-card-title
    >
    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <div fxFlex class="setting-tab">
      <mat-tab-group animationDuration="0ms" vertical>
        <mat-tab class="setting">
          <ng-template mat-tab-label>
            <span class="mdi mdi-settings"></span>
            {{ 'settings.typeGenernal' | translate }}
          </ng-template>

          <perfect-scrollbar>
            <ucap-settings-general
              class="setting-category general"
              [setting]="appUserInfo.settings.general"
              (changed)="onChangedGeneralSetting($event)"
            ></ucap-settings-general>
          </perfect-scrollbar>
        </mat-tab>
        <!-- <mat-tab>
          <ng-template mat-tab-label>
            <span class="mdi mdi-lock"></span>
            개인정보취급방침
          </ng-template>
          <ucap-settings-privacy
            class="setting-category"
          ></ucap-settings-privacy>
        </mat-tab> -->
        <mat-tab class="setting">
          <ng-template mat-tab-label>
            <span class="mdi mdi-bell"></span>
            {{ 'settings.typeNotification' | translate }}
          </ng-template>
          <perfect-scrollbar>
            <ucap-settings-notification
              [setting]="appUserInfo.settings.notification"
              (changed)="onChangedNotificationSetting($event)"
              class="setting-category"
            ></ucap-settings-notification>
          </perfect-scrollbar>
        </mat-tab>
        <!-- <mat-tab>
          <ng-template mat-tab-label>
            <span class="mdi mdi-headset"></span>
            장치
          </ng-template>
          <ucap-settings-device class="setting-category"></ucap-settings-device>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <span class="mdi mdi-view-grid-plus"></span>
            사용권한
          </ng-template>
          <ucap-settings-permission
            class="setting-category"
          ></ucap-settings-permission>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <span class="mdi mdi-phone"></span>
            통화
          </ng-template>
          <ucap-settings-call class="setting-category"></ucap-settings-call>
        </mat-tab> -->
        <mat-tab class="setting">
          <ng-template mat-tab-label>
            <span class="mdi mdi-chat"></span>
            {{ 'settings.typeChat' | translate }}
          </ng-template>
          <perfect-scrollbar>
            <ucap-settings-chat
              [setting]="appUserInfo.settings.chat"
              (changed)="onChangedChatSetting($event)"
              class="setting-category"
            ></ucap-settings-chat>
          </perfect-scrollbar>
        </mat-tab>
      </mat-tab-group>

      <!-- <div class="left-side-tabs-body">
        <div
          #tabs
          id="tabs-0"
          class="left-side-tabs-contents"
          style="display: block;"
        >
          ddddd
        </div>
        <div
          #tabs
          id="tabs-1"
          class="left-side-tabs-contents"
          style="display: none;"
        >
          dddagadsfgadsf
        </div>
        <div
          #tabs
          id="tabs-2"
          class="left-side-tabs-contents"
          style="display: none;"
        >
          fbkasfldsafkskdf
        </div>
        <div
          #tabs
          id="tabs-3"
          class="left-side-tabs-contents"
          style="display: none;"
        >
          rgkdsfgkdfglkdsflgs
        </div>
      </div> -->
    </div>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.no' | translate }}
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
      {{ 'common.messages.yes' | translate }}
    </button>
  </mat-card-actions>
</mat-card>