49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { UpperCasePipe } from '@angular/common';
|
|
import { Component, HostListener, inject, signal } from '@angular/core';
|
|
import { RouterLink } from '@angular/router';
|
|
import { TranslatePipe } from '../translate/translate.pipe';
|
|
import { TranslationService, Lang } from '../translate/translation.service';
|
|
|
|
interface LangOption { code: Lang; label: string; flag: string; }
|
|
|
|
@Component({
|
|
selector: 'app-site-header',
|
|
imports: [RouterLink, TranslatePipe, UpperCasePipe],
|
|
templateUrl: './site-header.html',
|
|
styleUrl: './site-header.scss'
|
|
})
|
|
export class SiteHeader {
|
|
private i18n = inject(TranslationService);
|
|
|
|
menuOpen = signal(false);
|
|
langOpen = signal(false);
|
|
currentLang = this.i18n.currentLang;
|
|
|
|
langs: LangOption[] = [
|
|
{ code: 'ru', label: 'Русский', flag: '/flags/ru.svg' },
|
|
{ code: 'en', label: 'English', flag: '/flags/en.svg' },
|
|
{ code: 'hy', label: 'Հայերեն', flag: '/flags/arm.svg' },
|
|
];
|
|
|
|
get activeLang(): LangOption {
|
|
return this.langs.find(l => l.code === this.currentLang()) ?? this.langs[0];
|
|
}
|
|
|
|
toggleMenu(): void { this.menuOpen.update(v => !v); }
|
|
closeMenu(): void { this.menuOpen.set(false); }
|
|
toggleLang(): void { this.langOpen.update(v => !v); }
|
|
closeLang(): void { this.langOpen.set(false); }
|
|
|
|
setLang(lang: Lang): void {
|
|
this.i18n.setLanguage(lang);
|
|
this.langOpen.set(false);
|
|
}
|
|
|
|
@HostListener('document:click', ['$event.target'])
|
|
onDocClick(target: EventTarget | null): void {
|
|
if (!(target instanceof HTMLElement) || !target.closest('.lang-select')) {
|
|
this.langOpen.set(false);
|
|
}
|
|
}
|
|
}
|