next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

<mat-toolbar class="app-layout-native-title-bar">
  <div class="app-layout-native-title-bar-logo">
    <img src="assets/images/logo/64_64.png" />
  </div>
  <div class="app-layout-native-title-bar-title">DS Talk</div>
  <div class="app-layout-native-title-bar-spacer"></div>
  <div class="btn-area">
    <div *ngIf="!!loginRes" class="app-layout-native-title-bar-link">
      <ng-container *ngFor="let link of weblink" [ngSwitch]="link.key">
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Webhard"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink webhard">웹하드</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Dsp"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink dsp">DSP</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Sms"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink sms">SMS</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Conf"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink vc">화상회의</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Ep"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink ep">EP</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Som"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink S_OM">S&OM</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Elephant"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink elephant">코끼리</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Itsvcdesk"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink it-service">IT</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.UrgntNews"
          class="button"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink Personal-news">NEWS</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Mail"
          class="button"
          [matBadgeHidden]="webLinkBadgeMail === 0"
          [matBadge]="webLinkBadgeMail"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
          matBadgePosition="above after"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink mail">메일</span>
        </button>
        <button
          mat-icon-button
          *ngSwitchCase="WebLinkType.Payment"
          class="button"
          [matBadgeHidden]="webLinkBadgePayment === 0"
          [matBadge]="webLinkBadgePayment"
          matBadgeDescription="확인하지 않은 메시지가 있습니다."
          matBadgeColor="accent"
          matBadgePosition="above after"
          [matTooltip]="link.title"
          (click)="onClickWebLink(link)"
        >
          <span class="weblink approved">결제</span>
        </button>
      </ng-container>
      <button
        *ngIf="updateInfo$ | async as updateInfo"
        mat-icon-button
        class="button app-layout-native-title-bar-setting"
        matTooltip="업데이트"
        (click)="onClickUpdate()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          alt="업데이트"
        >
          <circle cx="12" cy="12" r="3"></circle>
          <path
            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
          ></path>
        </svg>
      </button>
      <span
        *ngIf="(!!weblink && weblink.length > 0) || (updateInfo$ | async)"
        class="stroke-bar"
      ></span>
      <!--S[삭제예정] 마이프로필 설정을 이동
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-setting"
        matTooltip="공지사항"
        (click)="onClickNotice()"
      >
        <svg class="svg-icon" viewBox="0 0 24 24" fill="currentColor">
          <path
            d="M22.13,8.91h-1.94V1.56c0-0.31-0.18-0.58-0.47-0.7c-0.28-0.12-0.61-0.05-0.82,0.16c-3.35,3.35-6.25,4.95-8.09,5.7
      	C8.82,7.54,7.61,7.56,7.6,7.56H1.87c-0.42,0-0.76,0.34-0.76,0.76v6.76c0,0.42,0.34,0.76,0.76,0.76h0.77l2.86,6.9
      	c0.12,0.28,0.39,0.47,0.7,0.47h4.19c0,0,0,0,0,0c0.42,0,0.76-0.34,0.76-0.76c0-0.12-0.03-0.23-0.08-0.33l-2.55-6.16
      	c1.69,0.33,5.57,1.6,10.38,6.42c0.14,0.14,0.34,0.22,0.53,0.22c0,0,0.01,0,0.01,0c0.41-0.01,0.74-0.34,0.74-0.76
      	c0-0.02,0-0.03,0-0.05l0-7.31h1.94c0.42,0,0.76-0.34,0.76-0.76V9.67C22.88,9.25,22.54,8.91,22.13,8.91z M2.63,9.07h4.22v5.25H2.63
      	V9.07z M6.7,21.68l-2.35-5.67h2.55l2.35,5.67H6.7z M8.36,14.39V9c1.57-0.24,5.45-1.26,10.31-5.68v6.34v0v4.05c0,0,0,0,0,0l0,6.34
      	C13.81,15.65,9.93,14.63,8.36,14.39z M21.37,12.97h-1.19v-2.54h1.19V12.97z"
          />
        </svg>
      </button>

      <button
        mat-icon-button
        class="button app-layout-native-title-bar-setting"
        matTooltip="환경설정"
        (click)="onClickSettings()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
           matTooltip="환경설정"
        >
          <circle cx="12" cy="12" r="3"></circle>
          <path
            d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
          ></path>
        </svg>
      </button>

      <button
        mat-icon-button
        class="button app-layout-native-title-bar-logout"
        matTooltip="로그아웃"
        (click)="onClickLogout()"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          matTooltip="로그아웃"
          class="stroke-warn-color"
        >
          <path
            d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"
          />
        </svg>
      </button>
      E[삭제예정] 마이프로필 설정을 이동-->
    </div>
    <ucap-profile-my-profile-widget
      [profileImageRoot]="sessionVerinfo.profileRoot"
      [profileImageFile]="getMyProfileImageWidget()"
      *ngIf="!!loginRes"
      class="myprofile-item"
      [matMenuTriggerFor]="profileMenu"
    ></ucap-profile-my-profile-widget>

    <div class="app-layout-native-title-bar-actions">
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-minimize"
        (click)="onClickMinimize()"
      >
        <!--<mat-icon>minimize</mat-icon>-->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="butt"
          stroke-linejoin="round"
          alt="창 최소화"
        >
          <line x1="5" y1="18" x2="19" y2="18"></line>
        </svg>
      </button>
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-maximize"
        (click)="onClickMaxmize()"
      >
        <ng-container [ngSwitch]="windowStateChanged$ | async">
          <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="butt"
            stroke-linejoin="round"
            *ngSwitchCase="WindowState.Maximized"
            alt="창 이전크기"
          >
            <path
              class="st0"
              d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z"
            />
            <path
              class="st0"
              d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8"
            />
          </svg>

          <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="butt"
            stroke-linejoin="round"
            *ngSwitchDefault
            alt="창크기 최대"
          >
            <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
          </svg>
        </ng-container>
      </button>
      <button
        mat-icon-button
        class="button app-layout-native-title-bar-close"
        (click)="onClickClose()"
      >
        <!--<mat-icon>close</mat-icon>-->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="butt"
          stroke-linejoin="round"
          alt="창닫기"
        >
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>
</mat-toolbar>

<mat-menu
  #profileMenu="matMenu"
  class="myset"
  xPosition="after"
  yPosition="below"
>
  <div class="setting">
    <button mat-menu-item [matMenuTriggerFor]="presenseMenu">대화 가능</button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickOpenProfile($event)">
      프로필 보기
    </button>
  </div>
  <!-- <div class="setting">
    <button
      mat-menu-item
      class="zoom minus-square"
      (click)="onClickZoomOut($event)"
    >
      축소</button
    ><span class="set-size">100%</span
    ><button
      mat-menu-item
      class="zoom plus-square"
      (click)="onClickZoomIn($event)"
    >
      확대
    </button>
  </div> -->
  <div class="setting">
    <button mat-menu-item (click)="onClickNotice()">공지사항</button>
  </div>
  <div class="setting">
    <button mat-menu-item (click)="onClickSettings()">설정</button>
  </div>
  <mat-divider></mat-divider>
  <div class="setting">
    <button mat-menu-item (click)="onClickLogout()">로그아웃</button>
  </div>
</mat-menu>

<mat-menu #presenseMenu="matMenu" class="status-pc-set">
  <div class="setting">
    <button mat-menu-item><span class="presence pcOn"> </span>온라인</button>
  </div>
  <div class="setting">
    <button mat-menu-item><span class="presence pcOut"> </span>부재중</button
    ><button mat-menu-item class="clock"></button>
  </div>
  <div class="setting">
    <button mat-menu-item>
      <span class="presence pcOther"> </span>다른용무중</button
    ><button mat-menu-item class="edit"></button>
  </div>
  <div class="setting">
    <button mat-menu-item><span class="presence pcOther"> </span>회의중</button
    ><button mat-menu-item class="edit"></button>
  </div>
  <div class="setting">
    <button mat-menu-item>
      <span class="presence pcOther"> </span>집중근무중</button
    ><button mat-menu-item class="edit"></button>
  </div>
</mat-menu>