additional files

src/app/navbar/navbar.component.ts

@@ -1,16 +1,40 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive, Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { AuthService } from '../services/auth.service';
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [RouterLink, RouterLinkActive],
+  imports: [CommonModule, RouterLink, RouterLinkActive],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss',
 })
-export class NavbarComponent {
+export class NavbarComponent implements OnInit {
+  private auth = inject(AuthService);
+  private router = inject(Router);
+  private destroyRef = inject(DestroyRef);
+
   menuOpen = false;
 
+  isLoggedIn = false;
+  isAdmin = false;
+  displayName = '';
+
+  ngOnInit(): void {
+    // Subscribe to auth state — drives all three properties from a single source.
+    // isLoggedIn and isAdmin are derived from the user object, not from separate
+    // checks (localStorage vs BehaviorSubject), eliminating a race condition where
+    // the token exists but the /me call hasn't returned yet.
+    this.auth.authState$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((user) => {
+      this.isLoggedIn = !!user;
+      this.isAdmin = user?.is_admin ?? false;
+      this.displayName = user?.display_name ?? '';
+    });
+  }
+
   toggleMenu(): void {
     this.menuOpen = !this.menuOpen;
   }
@@ -18,4 +42,9 @@ export class NavbarComponent {
   closeMenu(): void {
     this.menuOpen = false;
   }
+
+  onLogout(): void {
+    this.auth.logout();
+    this.router.navigate(['/']);
+  }
 }