added modalnavbar

src/app/app.css

@@ -15,7 +15,6 @@
     height: 64px;
     padding-right: 24px;
     line-height: 64px;
-  background: #001529;
 }
 
 .logo img {
@@ -44,3 +43,32 @@ nz-content {
     background: #fff;
     height: 100%;
 }
+
+.header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.top-nav {
+    flex: 1;
+    margin-left: 40px;
+}
+
+.right-icons {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.right-icons nz-icon:hover {
+    color: #40a9ff;
+}

src/app/app.html

@@ -57,9 +57,15 @@
                     <span>Utilisateur</span>
                 </a>
             </li>
-            <li nz-menu-item><nz-icon nzType="bell" nzTheme="outline" /></li>
-            <li nz-menu-item><nz-icon nzType="user" nzTheme="outline" /></li>
-            <li nz-menu-item><nz-icon nzType="setting" nzTheme="outline" /></li>
+            <li nz-menu-item>
+                <app-modalNav nameIcon="bell" name="Notification"></app-modalNav>
+            </li>
+            <li nz-menu-item>
+                <app-modalNav nameIcon="user" name="Profil"></app-modalNav>
+            </li>
+            <li nz-menu-item>
+                <app-modalNav nameIcon="setting" name="Paramètres"></app-modalNav>
+            </li>
         </ul>
     </nz-header>
     <nz-content>

src/app/app.ts

@@ -4,10 +4,11 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import {NzFlexDirective} from "ng-zorro-antd/flex";
 import {NzIconDirective} from "ng-zorro-antd/icon";
+import {ModalNav} from "./components/modalNav/modalNav";
 
 @Component({
   selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzFlexDirective, NzIconDirective, RouterLinkActive, RouterLink],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzFlexDirective, NzIconDirective, RouterLinkActive, RouterLink, ModalNav],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

src/app/components/modalNav/modalNav.html

@@ -0,0 +1,18 @@
+<div (click)="showModal()">
+    <nz-icon [nzType]="nameIcon" nzTheme="outline"></nz-icon>
+</div>
+
+<ng-template #modalContent>
+    <ng-content></ng-content>
+</ng-template>
+
+<nz-modal
+        [(nzVisible)]="isVisible"
+        [nzTitle]="name"
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()"
+        [nzOkLoading]="isOkLoading"
+        [nzContent]="modalContent"
+>
+</nz-modal>
+

src/app/components/modalNav/modalNav.ts

@@ -0,0 +1,34 @@
+import {Component, Input, input} from '@angular/core';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import {NzIconDirective} from "ng-zorro-antd/icon";
+
+@Component({
+    selector: 'app-modalNav',
+    imports: [NzButtonModule, NzModalModule, NzIconDirective],
+    templateUrl: 'modalNav.html',
+    styleUrls: ['./modalNav.css'],
+})
+export class ModalNav {
+    @Input() nameIcon: string = '';
+    @Input() name: string = '';
+
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 1000);
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+    }
+}

src/app/pages/welcome/welcome.html

@@ -1 +1 @@
-<p>welcome works!</p>
+<p>hello work</p>

src/app/pages/welcome/welcome.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import {ModalNav} from "../../components/modalNav/modalNav";
+import {NzIconDirective} from "ng-zorro-antd/icon";
 
 @Component({
   selector: 'app-welcome',
-  imports: [],
+    imports: [
+        ModalNav,
+        NzIconDirective
+    ],
   templateUrl: './welcome.html',
   styleUrl: './welcome.css'
 })