Add profile component

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

@@ -8,7 +8,7 @@
     <div class="div-logo height-fit-content">
       <img src='assets/images/logo-no-bg.png' alt='logo'>
     </div>
-    <div class="div-profile">
+    <div class="div-profile"  (click)="openProfile()">
       <ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
       <ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
     </div>
@@ -55,7 +55,7 @@
           <ion-icon src='assets/images/icons-search.svg'></ion-icon>
         </div>
     
-        <div class="div-profile">
+        <div class="div-profile" (click)="openProfile()">
           <ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
           <ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
         </div>

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

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { Router } from '@angular/router';
+import { ProfileComponent } from '../headers/header-no-search/profile/profile.component';
 
 @Component({
   selector: 'app-header',
@@ -12,8 +13,9 @@ export class HeaderPage implements OnInit {
 
   profile: string = 'mdgpr';
 
-  constructor(private modalController: ModalController,
-    private router: Router) {
+  constructor(
+    private router: Router,private modalController: ModalController,
+    private animationController: AnimationController,) {
     
     window['header'] = (profile:string) => {
       this.profile = profile;
@@ -37,4 +39,42 @@ export class HeaderPage implements OnInit {
   changeRoute(path){
     this.router.navigateByUrl(path)
   }
+
+
+  async openProfile() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ProfileComponent,
+      cssClass: 'model profile-modal',
+      componentProps: {
+      }
+    });
+    return await modal.present();
+  }
 }