Initial commit

BookieClient/src/app/layout/shell.component.ts

@@ -0,0 +1,47 @@
+import { Component, inject, signal } from '@angular/core';
+import { RouterOutlet, RouterLink, RouterLinkActive, Router } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { AuthService } from '../core/services/auth.service';
+
+interface NavItem { path: string; label: string; icon: string; }
+
+@Component({
+  selector: 'app-shell',
+  imports: [
+    RouterOutlet, RouterLink, RouterLinkActive,
+    MatToolbarModule, MatSidenavModule, MatListModule, MatIconModule, MatButtonModule, MatMenuModule,
+  ],
+  templateUrl: './shell.component.html',
+  styleUrl: './shell.component.scss',
+})
+export class ShellComponent {
+  private auth = inject(AuthService);
+  private router = inject(Router);
+
+  readonly opened = signal(true);
+  readonly username = this.auth.username;
+  readonly role = this.auth.role;
+
+  readonly nav: NavItem[] = [
+    { path: '/dashboard', label: 'Dashboard', icon: 'dashboard' },
+    { path: '/pre-match', label: 'Pre-Match Reports', icon: 'query_stats' },
+    { path: '/matches', label: 'Matches', icon: 'sports_soccer' },
+    { path: '/leagues', label: 'Leagues', icon: 'emoji_events' },
+    { path: '/seasons', label: 'Seasons', icon: 'calendar_month' },
+    { path: '/teams', label: 'Teams', icon: 'groups' },
+    { path: '/players', label: 'Players', icon: 'person' },
+    { path: '/contracts', label: 'Contracts', icon: 'description' },
+  ];
+
+  toggle() { this.opened.update((v) => !v); }
+
+  logout() {
+    this.auth.logout();
+    this.router.navigate(['/login']);
+  }
+}