nav début

src/app/pages/menu/menu-nav/menu-nav.component.css

@@ -19,3 +19,92 @@
         box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
     }
 }
+
+.modal-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: linear-gradient(160deg, #f9e8e8 0%, #f2c4c4 35%, #e89898 70%, #d97070 100%);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 12px;
+    border-bottom: 1px solid rgba(189, 90, 90, 0.15);
+}
+
+.modal-title {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #7a2e2e;
+    margin: 0;
+}
+
+.modal-close-btn {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    background: white;
+    border: none;
+    box-shadow: 0 2px 8px rgba(180, 80, 80, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #bd5a5a;
+    cursor: pointer;
+    font-size: 1.2rem;
+    transition: transform 0.15s;
+
+    &:active { transform: scale(0.92); }
+}
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 24px 20px;
+}
+
+.input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.custom-item {
+    --background: white;
+    --border-radius: 12px;
+    --padding-start: 14px;
+    --inner-padding-end: 14px;
+    --color: #7a2e2e;
+    --highlight-color-focused: #bd5a5a;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.1);
+}
+
+.error-msg {
+    color: #7a2e2e;
+    font-size: 0.8rem;
+    padding-left: 4px;
+    margin: 0;
+}
+
+.submit-btn {
+    background: white;
+    color: #bd5a5a;
+    border: none;
+    border-radius: 14px;
+    padding: 14px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.15);
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.2s;
+
+    &:active {
+        transform: scale(0.97);
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
+    }
+}

src/app/pages/menu/menu-nav/menu-nav.component.html

@@ -5,3 +5,36 @@
                 <path d="M56,48c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0zM56,32c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0zM56,16c2.209,0 4,1.791 4,4c0,2.209 -1.791,4 -4,4c-1.202,0 -38.798,0 -40,0c-2.209,0 -4,-1.791 -4,-4c0,-2.209 1.791,-4 4,-4c1.202,0 38.798,0 40,0z"></path></g></g>
     </svg>
 </button>
+
+<ion-modal [isOpen]="isModalOpen()" (didDismiss)="closeNav()">
+    <ng-template>
+        <div class="modal-layout">
+
+            <div class="modal-header">
+                <h2 class="modal-title">Nouvelle conversation</h2>
+                <button class="modal-close-btn" (click)="closeNav()">
+                    <ion-icon name="close-outline" />
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="input-wrapper">
+                    <ion-item class="custom-item">
+                        <ion-input
+                                label="Nom d'utilisateur"
+                                labelPlacement="floating"
+                                placeholder="ex: jean_dupont"
+                        />
+                    </ion-item>
+                    <!-- message d'erreur — affiché plus tard via logique -->
+                    <!-- <p class="error-msg">Utilisateur introuvable.</p> -->
+                </div>
+
+                <button class="submit-btn">
+                    Démarrer la conversation
+                </button>
+            </div>
+
+        </div>
+    </ng-template>
+</ion-modal>

src/app/pages/menu/menu-nav/menu-nav.component.ts

@@ -1,16 +1,31 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {Router} from "@angular/router";
+import {addIcons} from "ionicons";
+import {closeOutline} from "ionicons/icons";
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader, IonIcon, IonInput,
+  IonItem,
+  IonModal,
+  IonTitle,
+  IonToolbar
+} from "@ionic/angular/standalone";
 
 @Component({
   selector: 'app-menu-nav',
-  imports: [],
+  imports: [IonModal, IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonContent, IonItem, IonInput, IonIcon],
   templateUrl: './menu-nav.component.html',
   styleUrl: './menu-nav.component.css'
 })
 export class MenuNav {
-  private router = inject(Router)
+  isModalOpen = signal(false);
 
-  openNav() {
+  constructor() {
-    this.router.navigate(['/main/messages']);
+    addIcons({ closeOutline });
   }
+
+  openNav() { this.isModalOpen.set(true); }
+  closeNav() { this.isModalOpen.set(false); }
 }

src/app/pages/menu/menu/menu.component.html

@@ -9,5 +9,4 @@
 
     </div>
 
-
 </div>