NavbarComponent

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterLinkActive],
  templateUrl: './navbar.html',
  styleUrls: ['./navbar.css'],
})

private tokenStorage = inject(TokenStorageService);
public router = inject(Router);

get isLoggedIn(): boolean

<nav *ngIf="isLoggedIn">
  <!-- Navigation items -->
</nav>

get usuarioNombre(): string

<span class="user-name">{{ usuarioNombre }}</span>

get rol(): string

get isAdmin(): boolean

<a *ngIf="isAdmin" routerLink="/libros">Gestionar Libros</a>

get isUser(): boolean

<a *ngIf="isUser" routerLink="/catalogo">Catálogo</a>

ngOnInit(): void

logout(): void

<button (click)="logout()">
  Cerrar Sesión
</button>

// Component method (navbar.ts:48-52)
logout(): void {
  this.tokenStorage.signOut();
  localStorage.clear();
  this.router.navigate(['/auth/login']);
}

<nav *ngIf="isLoggedIn" class="navbar">
  <div class="brand">Biblioteca Virtual</div>
  
  <div *ngIf="isAdmin" class="nav-links">
    <a routerLink="/libros" routerLinkActive="active">Libros</a>
    <a routerLink="/autores" routerLinkActive="active">Autores</a>
    <a routerLink="/generos" routerLinkActive="active">Géneros</a>
    <a routerLink="/prestamos" routerLinkActive="active">Préstamos</a>
  </div>
  
  <div *ngIf="isUser" class="nav-links">
    <a routerLink="/catalogo" routerLinkActive="active">Catálogo</a>
  </div>
  
  <div class="user-info">
    <span>{{ usuarioNombre }}</span>
    <button (click)="logout()">Salir</button>
  </div>
</nav>

// app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './shared/components/navbar/navbar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent],
  template: `
    <app-navbar />
    <router-outlet />
  `,
})
export class AppComponent {}