Added disconnect button

src/app/components/layout/layout.css

@@ -96,6 +96,15 @@ nz-header {
     transition: transform 0.2s ease, color 0.2s ease;
 }
 
+.disconnect {
+    transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.disconnect:hover {
+    color: #40a9ff;
+    transform: scale(1.2);
+}
+
 .right-icons app-modal-nav:hover {
     color: #40a9ff;
     transform: scale(1.2);

src/app/components/layout/layout.html

@@ -69,6 +69,7 @@
 
             <!-- ICONES À DROITE -->
             <div class="right-icons">
+                <nz-icon nzType="logout" nzTheme="outline" class="disconnect" (click)="disconnect()"/>
                 <app-modal-nav nameIcon="user" name="Profil">
                     <app-profil></app-profil>
                 </app-modal-nav>

src/app/components/layout/layout.ts

@@ -1,11 +1,12 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {ModalNav} from "../modal-nav/modal-nav";
 import {NzContentComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
 import {Profil} from "../profil/profil";
-import {RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
+import {Router, RouterLink, RouterLinkActive, RouterOutlet} from "@angular/router";
 import {SettingForm} from "../setting-form/setting-form";
+import {AuthService} from "../../services/auth.service";
 
 @Component({
     selector: 'app-layout',
@@ -28,5 +29,11 @@ import {SettingForm} from "../setting-form/setting-form";
     styleUrl: './layout.css',
 })
 export class Layout {
+    private authService = inject(AuthService);
+    private router = inject(Router);
 
+    async disconnect(){
+        this.authService.logout();
+        await this.router.navigate(['/login']);
+    }
 }