Add search in header

src/app/shared/header/header.page.html

@@ -52,8 +52,22 @@
       </div>
 
       <div class="d-flex">
-        <div (click)="openSearch()" class="mr-10">
-          <ion-icon   class="font-45" src='assets/images/icons-search.svg'></ion-icon>
+        <div class="mr-10 d-flex align-center">
+          <ion-icon *ngIf="!showSearch" (click)="showSearch=true" class="font-45"  (click)="openSearch()" src='assets/images/icons-search.svg'></ion-icon>
+          <ion-icon  *ngIf="showSearch" (click)="closeSearch()" (click)="showSearch=false" class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+          <ion-form  *ngIf="showSearch">
+            <div class="d-flex search-input-container   ml-10 justify-between"  *ngIf="showSearch" >
+              <div class="icon" (click)="basicSearch()">
+                <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
+              </div>
+              <div class="input-text d-flex ion-align-items-center">
+                <ion-input [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch($event)" class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input>
+              </div>
+              <div class="icon" (click)="clearSearchInput()">
+                <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+              </div>
+            </div>
+          </ion-form>
         </div>
 
         <div class="div-profile justify-end d-flex" (click)="openProfile()">

src/app/shared/header/header.page.scss

@@ -40,4 +40,26 @@
 
 .active{
   border-top: 7px solid white;
+}
+
+
+.search-input-container{
+  background-color: white;
+  border-radius: 27.5px;
+  border: solid 1px #ebebeb;
+  .icon{
+    color: #797979;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    font-size: 25px;
+    align-items: center;
+  }
+  .input-text{
+    width: 100%;
+  }
+  .icon-z{
+    width: 20px;
+  }
 }

src/app/shared/header/header.page.ts

@@ -12,6 +12,8 @@ import { ProfileComponent } from '../headers/header-no-search/profile/profile.co
 export class HeaderPage implements OnInit {
 
   profile: string = 'mdgpr';
+  searchSubject: string = '';
+  showSearch:false;
 
   constructor(
     private router: Router,private modalController: ModalController,
@@ -33,7 +35,7 @@ export class HeaderPage implements OnInit {
   async openSearch() {
     const modal = await this.modalController.create({
       component: SearchPage,
-      cssClass: 'group-messages modal-desktop',
+      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
       componentProps: {
       }
     });
@@ -45,7 +47,6 @@ export class HeaderPage implements OnInit {
   }
 
 
-
   async openProfile() {
 
     const enterAnimation = (baseEl: any) => {
@@ -83,5 +84,26 @@ export class HeaderPage implements OnInit {
     return await modal.present();
   }
 
-}
+  async dynamicSearch(){
+    console.log('dynamic')
+    window['dynamicSearch'](this.searchSubject)
+  }
 
+
+  async closeSearch(){
+    document.querySelectorAll('.search-modal').forEach((e)=>e.remove())
+
+  }
+
+    /**
+    * @description set empty value to searchSubject
+    */
+   clearSearchInput(){
+    this.searchSubject = "";
+    window['dynamicSearch'](this.searchSubject)
+   }
+
+   async basicSearch(){
+    window['searchTriger']()
+   }
+}