MT-work-fronted/src/app/modules/components/header/header.component.html

<header fxLayout="row wrap" fxLayoutAlign="space-between center">
  <h1 fxFlex.lt-md="100" fxFlex.gt-sm="20">Good morning, Mohamed!</h1>

  <div
    fxFlex.lt-md="100"
    fxFlex.gt-sm="30"
    fxLayout="row"
    fxLayoutAlign="center center"
    class="gap-20 white"
  >
    <mat-slide-toggle> <span class="white"> Check In</span></mat-slide-toggle>
    <mat-slide-toggle><span class="white"> Check Out</span></mat-slide-toggle>
  </div>

  <div
    class="gap-20"
    fxLayout="row wrap"
    fxLayoutAlign="end center"
    fxFlex.lt-md="100"
    fxFlex.gt-sm="50"
  >
    <div class="search" fxHide.lt-sm>
      <input type="search" matInput placeholder="Search..." />
    </div>

    <div
      fxLayout="row"
      fxLayoutAlign="start center"
      class="gap-10"
      fxHide.lt-sm
    >
      <img class="ptr" src="/assets/images/calendar-days.svg" alt="" title="" />
      <img class="ptr" src="/assets/images/notification.svg" alt="" title="" />
      <img
        class="ptr"
        src="/assets/images/chat.svg"
        alt=""
        title=""
        (click)="onOpenChat()"
      />
    </div>

    <img
      class="profile"
      src="../../../../assets/images/fox-hub-2.jpg"
      alt=""
      title=""
      [matMenuTriggerFor]="menu"
      aria-label="Example icon-button with a menu"
    />
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span [routerLink]="['./profile']">Profile</span>
      </button>
      <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Disable alerts</span>
      </button>
    </mat-menu>
  </div>
</header>