diff --git a/src/app/shared/header/header.page.html b/src/app/shared/header/header.page.html
index 3f899f293..f9a8e8635 100644
--- a/src/app/shared/header/header.page.html
+++ b/src/app/shared/header/header.page.html
@@ -8,7 +8,7 @@
+
diff --git a/src/app/shared/header/header.page.ts b/src/app/shared/header/header.page.ts
index dd798e36e..34897a348 100644
--- a/src/app/shared/header/header.page.ts
+++ b/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();
+ }
}
diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.html b/src/app/shared/headers/header-no-search/header-no-search.page.html
index ff30b2c02..305f6b71f 100644
--- a/src/app/shared/headers/header-no-search/header-no-search.page.html
+++ b/src/app/shared/headers/header-no-search/header-no-search.page.html
@@ -8,7 +8,7 @@
-
@@ -54,7 +54,7 @@
-->
-