add initial Angular components, services, and routing setup

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

@@ -0,0 +1,24 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.brand {
+  font-weight: bold;
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+
+.nav-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.mat-menu-item mat-icon {
+  margin-right: 8px;
+}

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

@@ -0,0 +1,33 @@
+<mat-toolbar color="primary">
+  <div class="container">
+    <div class="brand" [routerLink]="'/'">Demo</div>
+    <div class="nav-actions">
+      @if (getUser(); as user) {
+        <button mat-button [matMenuTriggerFor]="userMenu">
+          <mat-icon>account_circle</mat-icon>
+         Logged in as {{ user.username }}
+          <mat-icon>expand_more</mat-icon>
+        </button>
+        <mat-menu #userMenu="matMenu">
+          @if (authService.hasRole('Administrator')) {
+            <button mat-menu-item [routerLink]="'/admin'">
+            <mat-icon>admin_panel_settings</mat-icon>
+              Admin
+            </button>
+          }
+          <button mat-menu-item [routerLink]="'/profile'">
+            <mat-icon>person</mat-icon>
+            Profile
+          </button>
+          <button mat-menu-item (click)="authService.logout().subscribe()">
+            <mat-icon>logout</mat-icon>
+            Logout
+          </button>
+        </mat-menu>
+      } @else {
+        <button mat-button [routerLink]="'/login'">Login</button>
+        <button mat-button [routerLink]="'/register'">Sign Up</button>
+      }
+    </div>
+  </div>
+</mat-toolbar>

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

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

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

@@ -0,0 +1,47 @@
+import {Component, inject} from '@angular/core';
+import {MatToolbar} from '@angular/material/toolbar';
+import {MatButton} from '@angular/material/button';
+import {Router, RouterLink} from '@angular/router';
+import {AuthService} from '../../services/auth/auth.service';
+import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
+import {MatIcon} from '@angular/material/icon';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [
+    MatToolbar,
+    MatButton,
+    RouterLink,
+    MatMenuTrigger,
+    MatIcon,
+    MatMenu,
+    MatMenuItem
+  ],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.css'
+})
+export class NavbarComponent {
+
+  protected readonly authService = inject(AuthService);
+  private readonly router: Router = inject(Router);
+
+  login() {
+    this.router.navigate(['/login'], {queryParams: {redirect: '/profile'}}).then();
+  }
+
+  logout() {
+    this.authService.logout().subscribe({
+      next: () => {
+        this.login();
+      },
+      error: (err) => {
+        console.error('Logout failed:', err);
+      }
+    });
+  }
+
+  getUser() {
+    return this.authService.user();
+  }
+}