refactor: rename components and update dialog implementations; add confirm dialog for deletion actions

client/src/app/components/navbar/main-navbar/main-navbar.component.css

@@ -0,0 +1,24 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.brand {
+  font-weight: bold;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.nav-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.mat-menu-item mat-icon {
+  margin-right: 8px;
+}

client/src/app/components/navbar/main-navbar/main-navbar.component.html

@@ -0,0 +1,33 @@
+<mat-toolbar color="primary">
+  <div class="container">
+    <div class="brand" [routerLink]="'/'">Game Over'gne App</div>
+    <div class="nav-actions">
+      @if (getUser(); as user) {
+        <button mat-button [matMenuTriggerFor]="userMenu">
+          <mat-icon>account_circle</mat-icon>
+         Connecté en tant que {{ user.username }}
+          <mat-icon>expand_more</mat-icon>
+        </button>
+        <mat-menu #userMenu="matMenu">
+          @if (authService.hasRole('Administrator')) {
+            <button mat-menu-item [routerLink]="'/admin'">
+            <mat-icon>admin_panel_settings</mat-icon>
+              Administration
+            </button>
+          }
+          <button mat-menu-item [routerLink]="'/profile'">
+            <mat-icon>person</mat-icon>
+            Profil
+          </button>
+          <button mat-menu-item (click)="logout()">
+            <mat-icon>logout</mat-icon>
+            Se déconnecter
+          </button>
+        </mat-menu>
+      } @else {
+        <button mat-button [routerLink]="'/login'">Se connecter</button>
+        <button mat-button [routerLink]="'/register'">S'inscrire</button>
+      }
+    </div>
+  </div>
+</mat-toolbar>

client/src/app/components/navbar/main-navbar/main-navbar.component.ts

@@ -0,0 +1,43 @@
+import {Component, inject} from '@angular/core';
+import {MatToolbar} from '@angular/material/toolbar';
+import {MatButton} from '@angular/material/button';
+import {Router, RouterLink} from '@angular/router';
+import {AuthService} from '../../../services/auth/auth.service';
+import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
+import {MatIcon} from '@angular/material/icon';
+
+@Component({
+  selector: 'app-main-navbar',
+  standalone: true,
+  imports: [
+    MatToolbar,
+    MatButton,
+    RouterLink,
+    MatMenuTrigger,
+    MatIcon,
+    MatMenu,
+    MatMenuItem
+  ],
+  templateUrl: './main-navbar.component.html',
+  styleUrl: './main-navbar.component.css'
+})
+export class MainNavbarComponent {
+
+  protected readonly authService = inject(AuthService);
+  private readonly router: Router = inject(Router);
+
+  logout() {
+    this.authService.logout().subscribe({
+      next: () => {
+        this.router.navigate(['/login'], {queryParams: {redirect: '/profile'}}).then();
+      },
+      error: (err) => {
+        console.error('Logout failed:', err);
+      }
+    });
+  }
+
+  getUser() {
+    return this.authService.user();
+  }
+}