AltitudeWeb/frontend/src/app/header/header.component.ts
Teriuihi 5aec42320a Add background image support to header components
Updated header components to accept and render background images via a new `[background_image]` input property. Modified relevant templates to apply the background image dynamically and updated usage in `home` and `map` components.
2025-04-05 18:52:29 +02:00

47 lines
1.1 KiB
TypeScript

import {Component, HostListener, Input} from '@angular/core';
import {ALTITUDE_VERSION} from '../constant';
@Component({
standalone: false,
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
@Input() title: string = '';
@Input() sub_title: string = '';
@Input() current_page: string = '';
@Input() background_image: string = '';
public active: string = '';
@HostListener('window:scroll', [])
onWindowScroll(): void {
const scrollPosition = window.scrollY;
if (scrollPosition > 0) {
this.active = 'active';
} else {
this.active = '';
}
}
scrollToSection(): void {
const element = document.getElementById('scrollingpoint');
if (element) {
element.scrollIntoView({behavior: 'smooth', block: 'start'});
} else {
console.error('Element with id "scrollingpoint" not found.');
}
}
public getCurrentPageId(options: string[]) {
if (options.includes(this.current_page)) {
return 'current_page'
}
return null;
}
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
}