Moved and modified navbar component

src/app/components/navbar/navbar.component.css

@@ -0,0 +1,41 @@
+.header {
+  background: white;
+  padding: 20px 40px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 24px;
+  color: #667eea;
+  font-weight: 700;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.username {
+  font-weight: 500;
+  color: #333;
+}
+
+.btn-logout {
+  padding: 8px 20px;
+  background-color: #667eea;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.3s;
+}
+
+.btn-logout:hover {
+  background-color: #5568d3;
+}

src/app/components/navbar/navbar.component.html

@@ -0,0 +1,9 @@
+<header class="header">
+  <h1>Kanban Board</h1>
+  <div class="user-info">
+    @if (authService.currentUser()) {
+      <span class="username">{{ authService.currentUser()?.email }}</span>
+      <button class="btn-logout" (click)="logout()">Logout</button>
+    }
+  </div>
+</header>

src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,27 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.css'
+})
+export class NavbarComponent {
+  protected authService = inject(AuthService);
+
+  logout() {
+    this.authService.logout().subscribe({
+      next: () => {
+        console.log('Logout successful');
+      },
+      error: (error) => {
+        console.error('Logout error:', error);
+        // Even if the API call fails, clear local state and redirect
+        this.authService.clearAuthState();
+      }
+    });
+  }
+}

src/app/navbar/navbar.css

@@ -1,15 +0,0 @@
-nav .navbar {
-    width: 100%;
-    height: max-content;
-    
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    padding: 1.5rem;
-
-}
-
-span .navbar-title {
-    display: block;
-}

src/app/navbar/navbar.html

@@ -1,4 +0,0 @@
-<nav class="navbar">
-    <span class="navbar-title">KanbanCloneAngular</span>
-    
-</nav>

src/app/navbar/navbar.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Navbar } from './navbar';
-
-describe('Navbar', () => {
-  let component: Navbar;
-  let fixture: ComponentFixture<Navbar>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Navbar]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Navbar);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/navbar/navbar.ts

@@ -1,14 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { AuthService } from '../services/auth.service';
-
-@Component({
-  selector: 'app-navbar',
-  imports: [],
-  templateUrl: './navbar.html',
-  styleUrl: './navbar.css',
-})
-export class Navbar {
-  protected authService = inject(AuthService);
-
-  
-}