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,21 +26,7 @@ export class SettingsOptionsComponent {
 
     options = [1, 2, 3, 4, 5];
 
-    profileState = signal<boolean>(false);
+    navigate = output<'profile' | 'password' | 'designation' | 'gallery'>();
-    passwordState = signal<boolean>(false);
-    designationState = signal<boolean>(false);
-
-    updateProfileState(state: boolean) {
-        this.profileState.set(state);
-    }
-
-    updatePasswordState(state: boolean) {
-        this.passwordState.set(state);
-    }
-
-    updateDesignationState(state: boolean) {
-        this.designationState.set(state);
-    }
 
     async logOut() {
         const loading = await this.loadCtrl.create({

src/app/pages/home/home.component.html

@@ -38,17 +38,41 @@
     <ng-template>
         <ion-header>
             <ion-toolbar>
-                <ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
+                <ion-buttons slot="start">
-                    <ion-back-button default-href="" (click)="setOpen(false)"></ion-back-button>
+                    <ion-button fill="clear" (click)="view == 'menu' ? setOpen(false) : backToMenu()">
+                        <ion-icon name="chevron-back"></ion-icon>
+                    </ion-button>
                 </ion-buttons>
-                <ion-title>Profil</ion-title>
+                <ion-title>
+                    @switch (view) {
+                        @case ('profile') {
+                            Modifier mon profil
+                        }
+                        @case ('password') {
+                            Mot de passe
+                        }
+                        @case ('designation') {
+                            Changer mon titre
+                        }
+                        @case ('gallery') {
+                            Ma Galerie
+                        }
+                        @default {
+                            Profil
+                        }
+                    }
+                </ion-title>
             </ion-toolbar>
         </ion-header>
-        <ion-content class="ion-padding m-1" style="--background: #f7f6f2;">
+
+        <ion-content class="ion-padding" style="--background: #f7f6f2;">
+            @switch (view) {
+                @case ('menu') {
                     <app-generic-user-info [userInfo]="user()"></app-generic-user-info>
                     <div class="mt-4">
                         <app-title-part textInfo="Mes participations"></app-title-part>
-                <app-challenges-accomplished [userChallenges]="userChallenge()"></app-challenges-accomplished>
+                        <app-challenges-accomplished
+                                [userChallenges]="userChallenge()"></app-challenges-accomplished>
                     </div>
 
                     <div class="mt-4">
@@ -58,8 +82,38 @@
 
                     <div class="mt-4">
                         <app-title-part textInfo="Paramètres de compte"></app-title-part>
-                <app-settings-options></app-settings-options>
+                        <app-settings-options (navigate)="setView($event)"></app-settings-options>
                     </div>
+                }
+                @case ('profile') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Formulaire profil</p>
+                        </div>
+                    </app-modal>
+                }
+                @case ('password') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Formulaire password</p>
+                        </div>
+                    </app-modal>
+                }
+                @case ('designation') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Formulaire designation</p>
+                        </div>
+                    </app-modal>
+                }
+                @case ('gallery') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Photos</p>
+                        </div>
+                    </app-modal>
+                }
+            }
         </ion-content>
     </ng-template>
 </ion-modal>

src/app/pages/home/home.component.ts

@@ -20,6 +20,7 @@ import {
     ChallengesAccomplishedComponent
 } from "../../components/challenges-accomplished/challenges-accomplished.component";
 import {UserAchievementsComponent} from "../../components/user-achievements/user-achievements.component";
+import {ModalComponent} from "../../components/modal/modal.component";
 
 addIcons({
     'profile': personOutline,
@@ -27,6 +28,8 @@ addIcons({
     'settings': settingsOutline,
 });
 
+type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery';
+
 @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
@@ -38,7 +41,8 @@ addIcons({
         SettingsOptionsComponent,
         GenericUserInfoComponent,
         ChallengesAccomplishedComponent,
-        UserAchievementsComponent
+        UserAchievementsComponent,
+        ModalComponent
     ]
 })
 export class HomeComponent implements OnInit {
@@ -54,6 +58,15 @@ export class HomeComponent implements OnInit {
     userAchievement = signal<GetAchievementDto[]>([])
 
     isModalOpen = false;
+    view: View = 'menu';
+
+    setView(choice: View) {
+        this.view = choice;
+    }
+
+    backToMenu() {
+        this.view = 'menu';
+    }
 
     async ngOnInit() {
         try {