added modalnavbar

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;
+    }
+}