UI-Prototype/src/app/dashboard/dashboard.component.html

<main class="main" [ngClass]="cs.theme">
    <div class="content">
      <div class="left">
      </div>
      <!--<div class="divider" role="separator" aria-label="Divider"></div>-->
      <div class="center">
        @if (!loginService.user?.token?.ucp) {
          <div class="header">
            <img id="site-logo" src="https://cdn.swopt.com/fis/image/fis-logo.webp" alt="FIS"/>
            <!--<h1>{{'welcome'|tr:'Welcome'}}</h1>-->
          </div>
          <div class="login">
            <inputx [field]="goto.field" [value]="goto.value" (onChange)="goto.onChange($event)"></inputx>
            <login/>
          </div>
        } @else {
          <mat-expansion-panel class="segment" expanded="true">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <h2>{{'eleave'|tr:'eLeave'}}</h2>
              </mat-panel-title>
            </mat-expansion-panel-header>
            <div class="dashitems">
              <leave-submission-dashitem></leave-submission-dashitem>
              @if (this.hasAccess.leaveApproval) {
                <leave-approval-dashitem></leave-approval-dashitem>
              }
            </div>
          </mat-expansion-panel>
        }
        <div class="social-links">
          
          <a
            aria-label="Twitter"
            target="_blank"
            rel="noopener"
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              alt="Twitter"
            >
              <path
                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
              />
            </svg>
          </a>
          <a
            aria-label="Youtube"
            target="_blank"
            rel="noopener"
          >
            <svg
              width="29"
              height="20"
              viewBox="0 0 29 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              alt="Youtube"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M27.4896 1.52422C27.9301 1.96749 28.2463 2.51866 28.4068 3.12258C29.0004 5.35161 29.0004 10 29.0004 10C29.0004 10 29.0004 14.6484 28.4068 16.8774C28.2463 17.4813 27.9301 18.0325 27.4896 18.4758C27.0492 18.9191 26.5 19.2389 25.8972 19.4032C23.6778 20 14.8068 20 14.8068 20C14.8068 20 5.93586 20 3.71651 19.4032C3.11363 19.2389 2.56449 18.9191 2.12405 18.4758C1.68361 18.0325 1.36732 17.4813 1.20683 16.8774C0.613281 14.6484 0.613281 10 0.613281 10C0.613281 10 0.613281 5.35161 1.20683 3.12258C1.36732 2.51866 1.68361 1.96749 2.12405 1.52422C2.56449 1.08095 3.11363 0.76113 3.71651 0.596774C5.93586 0 14.8068 0 14.8068 0C14.8068 0 23.6778 0 25.8972 0.596774C26.5 0.76113 27.0492 1.08095 27.4896 1.52422ZM19.3229 10L11.9036 5.77905V14.221L19.3229 10Z"
              />
            </svg>
          </a>
        </div>
      </div>
      <div class="right"></div>
    </div>
  </main>