changes

src/app/site-header/site-header.ts

@@ -1,11 +1,14 @@
-import { Component, inject, signal } from '@angular/core';
+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],
+  imports: [RouterLink, TranslatePipe, UpperCasePipe],
   templateUrl: './site-header.html',
   styleUrl: './site-header.scss'
 })
@@ -13,9 +16,33 @@ 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); }
-  setLang(lang: Lang): void { this.i18n.setLanguage(lang); }
+  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);
+    }
+  }
 }