Ajout de la navbar

src/app/app.component.html

@@ -1,3 +1,3 @@
-<!-- <app-book-menu></app-book-menu> -->
+<app-book-menu></app-book-menu>
 
 <router-outlet (activate)="onActivate($event)"></router-outlet>

src/app/components/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 

src/app/components/sudoku/sudoku.component.html

@@ -1,4 +1,4 @@
-<app-book-menu></app-book-menu> 
+<!-- <app-book-menu></app-book-menu>  -->
 
 <p>sudoku works!</p>
 
@@ -16,7 +16,7 @@
 </button>
 
 <button (click)="corriger()">
-    verrifier
+    verifier
 </button>
 
 <p>nombre d'indice: {{nbIndice}}</p>
@@ -27,7 +27,7 @@
     <h2>Vous avez gagné !</h2>
     <div class="menu">
         <button routerLink="/">
-            retour à la page d'acceuille
+            retour à la page d'accueil
         </button>
         <button routerLink="/sudoku/">
             nouvelle partie

src/app/components/user-accueil/user-accueil.component.html

@@ -1,4 +1,4 @@
-<app-book-menu></app-book-menu>
+<!-- <app-book-menu></app-book-menu> -->
 
 <h2>{{formattedDate}}</h2>
 

src/app/components/user-list/user-list.component.html

@@ -1,4 +1,4 @@
-<app-book-menu></app-book-menu>
+<!-- <app-book-menu></app-book-menu> -->
 
 <h2>User list</h2>
 

src/app/components/user-menu/user-menu.component.html

@@ -1,8 +1,15 @@
-<button mat-button [matMenuTriggerFor]="menu">Menu</button>
 <mat-menu #menu="matMenu">
-  <a mat-menu-item routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">{{userconnecte}}</a>
-  <a mat-menu-item routerLink="/accueil" routerLinkActive="active" ariaCurrentWhenActive="page">Accueil</a>
-  <a mat-menu-item routerLink="/users" routerLinkActive="active" ariaCurrentWhenActive="page">Classement</a>
-  <a mat-menu-item routerLink="{{route}}" routerLinkActive="active" ariaCurrentWhenActive="page">Details</a>
   <a mat-menu-item routerLink="/sudoku" routerLinkActive="active" ariaCurrentWhenActive="page">Sudoku</a> 
+  <a mat-menu-item routerLink="/morpion" routerLinkActive="active" ariaCurrentWhenActive="page" aria-disabled="true">Morpion</a> 
+  <a mat-menu-item routerLink="/echec" routerLinkActive="active" ariaCurrentWhenActive="page" aria-disabled="true">Echec</a> 
+  <a mat-menu-item routerLink="/starars" routerLinkActive="active" ariaCurrentWhenActive="page" aria-disabled="true">Star Wars Rebellion</a> 
+
 </mat-menu>
+
+<nav mat-tab-nav-bar>
+  <mat-tab-link label="userconnecte" routerLink="/" mat-flat-button color="primary">{{userconnecte}}</mat-tab-link> 
+  <mat-tab-link label="Accueil" routerLink="/accueil" >Accueil</mat-tab-link>
+  <mat-tab-link label="Classement" routerLink="/users">Classement</mat-tab-link>
+  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
+
+</nav>

src/app/components/user-menu/user-menu.component.ts

@@ -3,11 +3,14 @@ import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { UserService } from '../../services/user-service';
+import { MatTabsModule } from '@angular/material/tabs'; 
+import { RouterLink } from '@angular/router';
+import { MatTabNav } from '@angular/material/tabs';
 
 @Component({
   selector: 'app-book-menu',
   standalone: true,
-  imports: [RouterModule, MatButtonModule, MatMenuModule],
+  imports: [RouterModule, MatButtonModule, MatMenuModule,MatTabsModule,RouterLink,MatTabNav],
   templateUrl: './user-menu.component.html'
 })
 
@@ -34,5 +37,4 @@ export class UserMenuComponent {
       this.route = "/users/0";
     }
   }
-
 }