header

src/app/landing-page/tools/tools.component.html

@@ -1,6 +1,6 @@
 <section class="tools">
   <h1>See you later 16 different HR tools</h1>
-  <div class="gap-30" fxLayout="row wrap" fxLayoutAlign="center center">
+  <div class="gap-10" fxLayout="row wrap" fxLayoutAlign="center center">
     <div class="content">
       <img src="../../../assets/images/tool_1.png" alt="" title="" />
       <div class="overlay"></div>

src/app/modules/components/header/header.component.html

@@ -1 +1,38 @@
-<p>header works!</p>
+<header>
+  <h1>Good morning, Mohamed!</h1>
+  <div>
+    <mat-chip-listbox aria-label="Fish selection">
+      <mat-chip-option>Check in </mat-chip-option>
+      <mat-chip-option>Check out</mat-chip-option>
+    </mat-chip-listbox>
+  </div>
+
+  <div class="search">
+    <mat-form-field class="example-full-width" appearance="outline">
+      <input type="search" matInput placeholder="Search..." />
+    </mat-form-field>
+  </div>
+  <div>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      aria-label="Example icon-button with a menu"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>
+        <mat-icon>dialpad</mat-icon>
+        <span>Redial</span>
+      </button>
+      <button mat-menu-item disabled>
+        <mat-icon>voicemail</mat-icon>
+        <span>Check voice mail</span>
+      </button>
+      <button mat-menu-item>
+        <mat-icon>notifications_off</mat-icon>
+        <span>Disable alerts</span>
+      </button>
+    </mat-menu>
+  </div>
+</header>

src/app/shared/shared.module.ts

@@ -12,6 +12,8 @@ import { WarningComponent } from './components/warning/warning.component';
 import { FileUploadComponent } from './components/file-upload/file-upload.component';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatMenuModule } from '@angular/material/menu';
 
 const MATERIAL_MODULES = [
   FlexLayoutModule,
@@ -22,7 +24,9 @@ const MATERIAL_MODULES = [
   NgxOtpInputModule,
   MatCheckboxModule,
   MatSidenavModule,
+  MatMenuModule,
   // ErrorStateMatcher,
+  MatChipsModule,
 ];
 
 const COMPONENTS = [WarningComponent, FileUploadComponent];