additional files

src/app/navbar/navbar.component.html

@@ -21,7 +21,20 @@
         <li><a routerLink="/schedule" routerLinkActive="active" (click)="closeMenu()">Schedule</a></li>
         <li><a routerLink="/events" routerLinkActive="active" (click)="closeMenu()">Events</a></li>
         <li><a routerLink="/contact" routerLinkActive="active" (click)="closeMenu()">Contact</a></li>
+        @if (isAdmin) {
+          <li><a routerLink="/admin" routerLinkActive="active" (click)="closeMenu()" class="nav-admin">Admin</a></li>
+        }
       </ul>
+      <div class="nav-auth">
+        @if (isLoggedIn) {
+          <div class="user-menu">
+            <span class="user-name">{{ displayName }}</span>
+            <button class="btn-logout" (click)="onLogout()">Sign Out</button>
+          </div>
+        } @else {
+          <a routerLink="/login" class="btn-sign-in" (click)="closeMenu()">Sign In</a>
+        }
+      </div>
       <a routerLink="/donate" class="btn btn-donate-nav" (click)="closeMenu()">Donate Now</a>
     </div>
   </div>

src/app/navbar/navbar.component.scss

@@ -99,6 +99,62 @@
       background: rgba(232, 122, 46, 0.1);
     }
   }
+
+  .nav-admin {
+    color: var(--color-accent-light);
+    font-weight: 600;
+  }
+}
+
+// Auth section in navbar
+.nav-auth {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-left: $spacing-sm;
+}
+
+.user-menu {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+
+  .user-name {
+    color: var(--color-light);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+}
+
+.btn-logout {
+  background: none;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: var(--color-light);
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-sm;
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: border-color $transition-fast, color $transition-fast;
+
+  &:hover {
+    border-color: var(--color-accent);
+    color: var(--color-accent-light);
+  }
+}
+
+.btn-sign-in {
+  color: var(--color-accent-light);
+  font-size: 0.9rem;
+  font-weight: 500;
+  text-decoration: none;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-sm;
+  transition: color $transition-fast, background $transition-fast;
+
+  &:hover {
+    color: var(--color-accent);
+    background: rgba(232, 122, 46, 0.1);
+  }
 }
 
 .btn-donate-nav {

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(['/']);
+  }
 }