remove fix top bar

src/ui/src/app/app.component.ts

@@ -1,23 +1,40 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { TopBarComponent } from './top-bar/top-bar.component';
+import { AsyncPipe, NgStyle } from '@angular/common';
+import { Component, computed } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { LoaderComponent } from './shared/ui/loader/loader.component';
 import { LoaderService } from './shared/ui/loader/loader.service';
-import { AsyncPipe } from '@angular/common';
+import { TopBarComponent } from './top-bar/top-bar.component';
 
 @Component({
   selector: 'ppo-root',
   standalone: true,
-  imports: [RouterOutlet, TopBarComponent, LoaderComponent, AsyncPipe],
+  imports: [RouterOutlet, TopBarComponent, LoaderComponent, AsyncPipe, NgStyle],
   template: `
+  <section [ngStyle]="rootStyles()">
   <ppo-top-bar></ppo-top-bar>
   <router-outlet></router-outlet>
   @if (loading$ | async) {
     <ppo-loader></ppo-loader>
   }
+</section>
   `,
 })
 export class AppComponent {
-  constructor(private loaderService: LoaderService) { }
+  event = toSignal(this.router.events);
+  rootStyles = computed(() => {
+    const e = this.event();
+    if (e instanceof NavigationEnd && e.url === '/') {
+      return {
+        'background': "url('/assets/home-background.png')",
+        'background-size': 'cover'
+      };
+    } else {
+      return {
+        'background-color': 'var(--neutral--900)'
+      };
+    }
+  });
+  constructor(private loaderService: LoaderService, private route: ActivatedRoute, private router: Router) { }
   loading$ = this.loaderService.loading$;
 }

src/ui/src/app/home/homepage.component.ts

@@ -14,12 +14,9 @@ import { Router } from '@angular/router';
   styles: [`
   :host {
     flex-grow: 1;
-    background: url('/assets/home-background.png');
-    background-size: cover;
     min-height: 100vh;
   }
   .homepage-content {
-    padding-top: 92px;
     display: flex;
     flex-direction: column;
     align-items: center;

src/ui/src/app/play/play.component.css

@@ -1,5 +1,4 @@
 :host {
   flex: 1;
   display: flex;
-  background-color: var(--neutral--900);
 }

src/ui/src/styles/components/top-bar.css

@@ -5,7 +5,6 @@
   justify-content: space-between;
   align-items: center;
   padding: var(--padding);
-  position: fixed;
 }
 .top-bar .link {
   font-weight: 600;