Merge branch 'feature/home' into developer

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

@@ -1,14 +1,26 @@
 <ion-toolbar class="bg-blue">
-  <div class="div-top-header">
-    <div class="div-search">
-      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
-    </div>
-    <div class="div-logo">
-      <img src='assets/images/logo-no-bg.png' alt='logo'>
-    </div>
-    <div class="div-profile">
-      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
-    </div>
-  </div>
+  
+  <ion-grid>
+  
+    <ion-row class="div-top-header ion-justify-content-between">
+      <ion-col>
+        <div (click)="openSearch()" class="div-search">
+          <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+        </div>
+      </ion-col>
+      <ion-col>
+        <div class="div-logo">
+          <img src='assets/images/logo-no-bg.png' alt='logo'>
+        </div>
+      </ion-col>
+      <ion-col>
+        <div class="div-profile">
+          <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
+        </div>
+      </ion-col>
+    </ion-row>
+  
+  </ion-grid>
+  
 </ion-toolbar>
-
+  

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

@@ -1,28 +1,32 @@
-.div-top-header{
-    width: 400px;
-    margin: 0 auto;
-    background-color: #0782c9;
-    overflow: auto;
-    padding-top: 15px;
-    border: 0!important;
+@import '~src/function.scss';
 
-    .div-search{
-      font-size: 45px;
-      float: left;
-      margin: 0 0 0 10px
-    }
-    .div-logo{
-      background: transparent;
-      width: 140px;
-      margin: 5px 0 0px 71px;
-      float: left;
-    }
-    .div-logo img{
-      width: 100%;
-    }
-    .div-profile{
-      font-size: 45px;
-      float: right;
-      margin-right: 10px;
-    }
-  }
+.div-top-header{
+  margin: 0 auto;
+  background-color: #0782c9;
+  overflow: auto;
+  padding-top: em(15px);
+  border: 0!important;
+
+  .div-search{
+    font-size: 45px;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: em(140px);
+    margin: 0px auto;
+    margin-top: 5px;
+    justify-content: center;
+    display: flex;
+  }
+  .div-logo img{
+    width: 100%;
+    margin: 0px auto;
+  }
+  .div-profile{
+    font-size: 45px;
+    margin-right: 10px;
+    justify-content: flex-end;
+    display: flex;
+  }
+}

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

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { SearchPage } from 'src/app/pages/search/search.page';
 
 @Component({
   selector: 'app-header',
@@ -7,9 +9,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderPage implements OnInit {
 
-  constructor() { }
+  constructor(private modalController: ModalController) { }
 
   ngOnInit() {
   }
 
+  async openSearch() {
+    const modal = await this.modalController.create({
+      component: SearchPage,
+      cssClass: 'search',
+      componentProps: {
+      }
+    });
+    return await modal.present();
+  }
+
+  
+
 }