feat: add Angular frontend skeleton

2026-04-29 12:17:07 +02:00
parent 35ae0278b7
commit 5f30029f4b
20 changed files with 818 additions and 3 deletions
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+  template: `
+    <div class="app-shell">
+      <mat-toolbar class="app-toolbar">
+        <a class="brand" routerLink="/">
+          <span class="brand-mark">A</span>
+          <span class="brand-text">
+            <strong>AzioneLab</strong>
+            <small>Theatre and reservations</small>
+          </span>
+        </a>
+
+        <nav class="main-nav">
+          <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
+          <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
+          <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
+        </nav>
+      </mat-toolbar>
+
+      <main class="page-shell">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
+  `,
+  styles: [`
+    .app-shell {
+      min-height: 100vh;
+    }
+
+    .app-toolbar {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      min-height: 72px;
+      padding: 0 24px;
+      background: rgba(251, 247, 242, 0.88);
+      backdrop-filter: blur(18px);
+      border-bottom: 1px solid var(--azionelab-border);
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .brand-mark {
+      display: inline-grid;
+      place-items: center;
+      width: 42px;
+      height: 42px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--azionelab-accent), #ca6d3b);
+      color: white;
+      font-weight: 700;
+    }
+
+    .brand-text {
+      display: flex;
+      flex-direction: column;
+      line-height: 1.1;
+    }
+
+    .brand-text small {
+      color: var(--azionelab-muted);
+      font-size: 0.74rem;
+    }
+
+    .main-nav {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .main-nav .active {
+      background: rgba(159, 47, 40, 0.08);
+    }
+
+    .page-shell {
+      padding: 32px 20px 56px;
+    }
+
+    @media (max-width: 800px) {
+      .app-toolbar {
+        align-items: flex-start;
+        flex-direction: column;
+        padding: 16px 16px 14px;
+      }
+
+      .main-nav {
+        width: 100%;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent {}