Create a modal window to open a new horizontal window providing access to the selected settings.

src/app/components/modal/modal.component.html

@@ -0,0 +1,3 @@
+<div class="fixed inset-0 z-50 bg-[#f7f6f2] animate-slide-in ion-padding">
+    <ng-content></ng-content>
+</div>

src/app/components/modal/modal.component.scss

@@ -0,0 +1,8 @@
+@keyframes slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}

src/app/components/modal/modal.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+
+@Component({
+    selector: 'app-modal',
+    templateUrl: './modal.component.html',
+    styleUrls: ['./modal.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class ModalComponent {
+
+}

src/app/components/settings-options/settings-options.component.html

@@ -10,28 +10,29 @@
             } @else {
                 @switch (n) {
                     @case (1) {
-                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
+                                  (click)="navigate.emit('gallery')">
                             <p class="text-sm text-gray-600">Ma galerie</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
                     @case (2) {
                         <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
-                                  (click)="updateProfileState(true)">
+                                  (click)="navigate.emit('profile')">
                             <p class="text-sm text-gray-600">Modifier mes informations</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
                     @case (3) {
                         <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
-                                  (click)="updatePasswordState(true)">
+                                  (click)="navigate.emit('password')">
                             <p class="text-sm text-gray-600">Modifier mon mot de passe</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
                     @case (4) {
                         <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
-                                  (click)="updateDesignationState(true)">
+                                  (click)="navigate.emit('designation')">
                             <p class="text-sm text-gray-600">Changer de désignation</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>

src/app/components/settings-options/settings-options.component.ts

@@ -1,8 +1,9 @@
-import {Component, inject, signal} from '@angular/core';
+import {Component, inject, output} from '@angular/core';
 import {IonicModule, LoadingController, NavController} from "@ionic/angular";
 import {logOutOutline, chevronForwardOutline, chevronBack} from "ionicons/icons";
 import {addIcons} from "ionicons";
 import {AuthManageService} from "../../services/auth-manage";
+import {ModalComponent} from "../modal/modal.component";
 
 addIcons({
     'logout': logOutOutline,
@@ -15,7 +16,7 @@ addIcons({
     templateUrl: './settings-options.component.html',
     styleUrls: ['./settings-options.component.scss'],
     imports: [
-        IonicModule
+        IonicModule,
     ]
 })
 export class SettingsOptionsComponent {
@@ -25,23 +26,9 @@ export class SettingsOptionsComponent {
 
     options = [1, 2, 3, 4, 5];
 
-    profileState = signal<boolean>(false);
-    passwordState = signal<boolean>(false);
-    designationState = signal<boolean>(false);
+    navigate = output<'profile' | 'password' | 'designation' | 'gallery'>();
 
-    updateProfileState(state: boolean) {
-        this.profileState.set(state);
-    }
-
-    updatePasswordState(state: boolean) {
-        this.passwordState.set(state);
-    }
-
-    updateDesignationState(state: boolean) {
-        this.designationState.set(state);
-    }
-
-    async logOut(){
+    async logOut() {
         const loading = await this.loadCtrl.create({
             message: 'Déconnexion en cours...',
             spinner: 'lines-sharp-small'
@@ -53,4 +40,4 @@ export class SettingsOptionsComponent {
 
         await loading.dismiss();
     }
-}
+}