refactor: language picker as select (#406)

DDonochVA · web-flow · commit de8c001d263d · 2025-03-20T13:02:43.000+01:00
diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json
@@ -25,7 +25,11 @@
     "about": "About us",
     "meetups": "Angular Meetups",
     "become_author": "Become an author",
-    "navLinks": "Navigation links"
+    "navLinks": "Navigation links",
+    "languagePicker": {
+      "pl": "Polish",
+      "en": "English"
+    }
   },
   "authorPage": {
     "posted_by": "Posted by {{name}}"
diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json
@@ -25,7 +25,11 @@
     "about": "O nas",
     "meetups": "Angular Meetups",
     "become_author": "Zostań autorem",
-    "navLinks": "Menu"
+    "navLinks": "Menu",
+    "languagePicker": {
+      "pl": "Polski",
+      "en": "Angielski"
+    }
   },
   "home": {
     "latest": "Latest articles"
diff --git a/apps/blog/src/assets/icons/arrow-down.svg b/apps/blog/src/assets/icons/arrow-down.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"></path></svg>
diff --git a/apps/blog/src/assets/icons/translate.svg b/apps/blog/src/assets/icons/translate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m42 42-2.286-5M26 42l2.286-5m0 0L34 24l5.714 13m-11.428 0h11.428M16 6l1 3M6 11h22m-18 5s1.79 6.26 6.263 9.74C20.737 29.216 28 32 28 32"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M24 11s-1.79 8.217-6.263 12.783C13.263 28.348 6 32 6 32"/></svg>
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-language-button.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-language-button.component.ts
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-language.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-language.component.ts
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts
@@ -6,7 +6,10 @@ import {
   output,
 } from '@angular/core';
 
-import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
+import {
+  LanguagePickerComponent,
+  NavigationComponent,
+} from '@angular-love/blog/layouts/ui-navigation';
 
 @Component({
   standalone: true,
@@ -17,14 +20,23 @@ import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
       [ngClass]="{ 'translate-y-[100%]': isOpened() }"
       [attr.aria-hidden]="isOpened()"
     >
-      <al-navigation (navigated)="closed.emit()" layout="vertical" />
+      <al-navigation (navigated)="closed.emit()" layout="vertical">
+        <li class="flex justify-center">
+          <al-language-picker
+            [language]="language()"
+            (languageChange)="languageChange.emit($event)"
+          />
+        </li>
+      </al-navigation>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NavigationComponent, NgClass],
+  imports: [NavigationComponent, NgClass, LanguagePickerComponent],
 })
 export class HeaderMobileMenuComponent {
   readonly isOpened = input.required<boolean>();
+  readonly language = input.required<string>();
 
+  protected languageChange = output<string>();
   readonly closed = output<void>();
 }
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/components/index.ts b/libs/blog/layouts/ui-layouts/src/lib/header/components/index.ts
@@ -1,4 +1,3 @@
 export * from './header-hamburger.component';
-export * from './header-language.component';
 export * from './header-logo.component';
 export * from './header-mobile-menu.component';
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts
@@ -6,11 +6,13 @@ import {
   signal,
 } from '@angular/core';
 
-import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
+import {
+  LanguagePickerComponent,
+  NavigationComponent,
+} from '@angular-love/blog/layouts/ui-navigation';
 
 import {
   HeaderHamburgerComponent,
-  HeaderLanguageComponent,
   HeaderLogoComponent,
   HeaderMobileMenuComponent,
 } from './components';
@@ -25,10 +27,11 @@ import {
       >
         <al-header-logo />
 
-        <div class="flex flex-row items-center">
-          <al-navigation class="hidden lg:block" />
+        <al-navigation class="hidden lg:block" />
 
-          <al-header-language
+        <div class="flex flex-row items-center">
+          <al-language-picker
+            class="mr-3 hidden md:block"
             [language]="language()"
             (languageChange)="languageChange.emit($event)"
           />
@@ -43,15 +46,20 @@ import {
       </div>
     </header>
 
-    <al-header-mobile-menu [isOpened]="showNav()" (closed)="toggleNav()" />
+    <al-header-mobile-menu
+      [isOpened]="showNav()"
+      [language]="language()"
+      (closed)="toggleNav()"
+      (languageChange)="languageChange.emit($event)"
+    />
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NavigationComponent,
     HeaderLogoComponent,
-    HeaderLanguageComponent,
     HeaderHamburgerComponent,
     HeaderMobileMenuComponent,
+    LanguagePickerComponent,
   ],
 })
 export class HeaderComponent {
diff --git a/libs/blog/layouts/ui-navigation/src/index.ts b/libs/blog/layouts/ui-navigation/src/index.ts
@@ -1 +1,2 @@
 export * from './lib/navigation/navigation.component';
+export * from './lib/language-picker/language-picker.component';
diff --git a/libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts b/libs/blog/layouts/ui-navigation/src/lib/language-picker/language-picker.component.ts
@@ -0,0 +1,61 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+import { TranslocoPipe } from '@jsverse/transloco';
+import { FastSvgComponent } from '@push-based/ngx-fast-svg';
+
+import { Lang } from '@angular-love/shared/utils-i18n';
+
+@Component({
+  standalone: true,
+  selector: 'al-language-picker',
+  template: `
+    <div class="flex h-full items-center text-sm">
+      <label
+        class="relative block text-gray-400 focus-within:text-gray-600"
+        for="language"
+      >
+        <span class="sr-only">Select language</span>
+        <fast-svg
+          name="translate"
+          class="text-al-primary pointer-events-none absolute left-0 top-1/2 !block -translate-y-1/2"
+          size="20"
+        />
+
+        <select
+          id="language"
+          #selectLang
+          class="bg-al-background appearance-none rounded-md px-8 py-1"
+          (change)="languageChange.emit(selectLang.value)"
+        >
+          @for (lang of availableLangs; track $index) {
+            <option [selected]="lang.value === language()" [value]="lang.value">
+              {{ lang.translationPath | transloco }}
+            </option>
+          }
+        </select>
+
+        <fast-svg
+          name="arrow-down"
+          class="pointer-events-none absolute right-0 top-1/2 !block -translate-y-1/2"
+          size="20"
+        />
+      </label>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FastSvgComponent, TranslocoPipe],
+})
+export class LanguagePickerComponent {
+  readonly language = input.required<string>();
+
+  readonly languageChange = output<string>();
+
+  readonly availableLangs = [
+    { value: 'pl', translationPath: 'nav.languagePicker.pl' },
+    { value: 'en', translationPath: 'nav.languagePicker.en' },
+  ] satisfies { value: Lang; translationPath: string }[];
+}
diff --git a/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html b/libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html
@@ -42,5 +42,7 @@
         </li>
       }
     }
+
+    <ng-content />
   </ul>
 </nav>

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './lib/navigation/navigation.component';`
	`2`	`+export * from './lib/language-picker/language-picker.component';`