From d67f1a4f87f58b606bd3aa3610c5e5072011edf9 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sun, 1 Mar 2026 02:34:12 +0100
Subject: [PATCH] Replace Input() with input.required in header and made map
 header full height

---
 .../app/pages/features/map/map.component.html |  3 ++-
 .../pages/header/header/header.component.html |  2 +-
 .../pages/header/header/header.component.ts   | 20 +++++++++----------
 .../src/app/pages/home/home.component.html    |  7 +++++--
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/pages/features/map/map.component.html b/frontend/src/app/pages/features/map/map.component.html
index f151758..fb678f7 100644
--- a/frontend/src/app/pages/features/map/map.component.html
+++ b/frontend/src/app/pages/features/map/map.component.html
@@ -1,7 +1,8 @@
 <ng-container>
   <app-header [current_page]="'map'"
               [background_image]="'public/img/backgrounds/map.jpg'"
-              [overlay_gradient]=0.65>
+              [overlay_gradient]=0.65
+              [height]="'100vh'">
     <div class="title" header-content>
       <h1>Dynamic Server Maps</h1>
       <h2>Which server would you like to see?</h2>
diff --git a/frontend/src/app/pages/header/header/header.component.html b/frontend/src/app/pages/header/header/header.component.html
index 6d45cf1..8aa2d16 100644
--- a/frontend/src/app/pages/header/header/header.component.html
+++ b/frontend/src/app/pages/header/header/header.component.html
@@ -1,6 +1,6 @@
 <ng-container>
   <header id="top"
-          [ngStyle]="{ 'background-image': getBackgroundImage(),'height': height, 'background-position': getBackgroundPosition() }">
+          [ngStyle]="{ 'background-image': getBackgroundImage(),'height': height(), 'background-position': getBackgroundPosition() }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
diff --git a/frontend/src/app/pages/header/header/header.component.ts b/frontend/src/app/pages/header/header/header.component.ts
index 2d6cca0..d728852 100644
--- a/frontend/src/app/pages/header/header/header.component.ts
+++ b/frontend/src/app/pages/header/header/header.component.ts
@@ -1,4 +1,4 @@
-import {Component, computed, HostListener, inject, Input, OnDestroy, Signal} from '@angular/core';
+import {Component, computed, HostListener, inject, input, OnDestroy, Signal} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {ThemeComponent} from '@shared-components/theme/theme.component';
 import {RouterLink} from '@angular/router';
@@ -25,10 +25,10 @@ export class HeaderComponent implements OnDestroy {
   private authService: AuthService = inject(AuthService)
   private dialog: MatDialog = inject(MatDialog)
 
-  @Input() current_page: string = '';
-  @Input() background_image: string = '';
-  @Input() height: string = '';
-  @Input() overlay_gradient: number = 0;
+  current_page = input.required<string>();
+  background_image = input.required<string>();
+  height = input.required<string>();
+  overlay_gradient = input.required<number>();
 
   public active: string = '';
   public inverseYPos: number = 0;
@@ -52,23 +52,23 @@ export class HeaderComponent implements OnDestroy {
   }
 
   public getBackgroundImage() {
-    if (this.overlay_gradient) {
-      return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
+    if (this.overlay_gradient()) {
+      return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient()}), rgba(0, 0, 0, ${this.overlay_gradient()})), url(${this.background_image()})`;
     } else {
-      return `url(${this.background_image})`;
+      return `url(${this.background_image()})`;
     }
   }
 
 
   public getCurrentPageId(options: string[]) {
-    if (options.includes(this.current_page)) {
+    if (options.includes(this.current_page())) {
       return 'current_page'
     }
     return null;
   }
 
   public getBackgroundPosition() {
-    if (this.current_page === 'home') {
+    if (this.current_page() === 'home') {
       return 'center ' + this.inverseYPos + 'px'
     } else {
       return '';
diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html
index f064bb7..7f1df76 100644
--- a/frontend/src/app/pages/home/home.component.html
+++ b/frontend/src/app/pages/home/home.component.html
@@ -1,6 +1,9 @@
 <ng-container>
-  <app-header [current_page]="'home'" height="100vh"
-              [background_image]="'/public/img/backgrounds/120spawn-min.png'">
+  <app-header [current_page]="'home'"
+              [height]="'100vh'"
+              [background_image]="'/public/img/backgrounds/120spawn-min.png'"
+              [overlay_gradient]="0"
+  >
     <div class="title" header-content>
       <h1 style="display: none;">Altitude</h1>
       <img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"