feat: language switcher (#63)

* [dyad] Add language switcher to navigation - wrote 5 file(s)

* Add flags to language options in the dropdown for better visibility

Author: AppOutletTeam

src/app/component/language-switcher/language-switcher.css

@@ -0,0 +1 @@
+/* Intentionally blank */

src/app/component/language-switcher/language-switcher.html

@@ -0,0 +1,29 @@
+<!-- Dropdown for Desktop -->
+<div *ngIf="displayMode === 'dropdown'" class="relative language-switcher-container">
+  <button (click)="toggleDropdown()" class="flex items-center text-gray-700 hover:text-indigo-600 focus:outline-none transition-colors duration-200" i18n-title title="Select language">
+    <i class="ph ph-globe ph-l"></i>
+  </button>
+
+  <div 
+    *ngIf="isDropdownOpen" 
+    class="absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg z-20"
+  >
+    <div class="py-1">
+      <a href="/" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-indigo-600" (click)="closeDropdown()">
+        🇬🇧 English
+      </a>
+      <a href="/pt" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-indigo-600" (click)="closeDropdown()">
+        🇧🇷 Português
+      </a>
+    </div>
+  </div>
+</div>
+
+<!-- Inline for Mobile -->
+<div *ngIf="displayMode === 'inline'" class="w-full text-center py-2">
+  <div class="flex justify-center items-center space-x-4">
+    <a href="/" class="text-base font-medium text-gray-700 hover:text-indigo-600">English</a>
+    <span class="text-gray-300">|</span>
+    <a href="/pt" class="text-base font-medium text-gray-700 hover:text-indigo-600">Português</a>
+  </div>
+</div>

src/app/component/language-switcher/language-switcher.ts

@@ -0,0 +1,31 @@
+import { Component, HostListener, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-language-switcher',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './language-switcher.html',
+  styleUrl: './language-switcher.css'
+})
+export class LanguageSwitcher {
+  @Input() displayMode: 'dropdown' | 'inline' = 'dropdown';
+
+  isDropdownOpen = false;
+
+  toggleDropdown() {
+    this.isDropdownOpen = !this.isDropdownOpen;
+  }
+
+  closeDropdown() {
+    this.isDropdownOpen = false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.language-switcher-container')) {
+      this.closeDropdown();
+    }
+  }
+}

src/app/component/navigation/navigation.html

@@ -7,10 +7,11 @@
     </a>
 
     <!-- Desktop Menu -->
-    <div class="hidden md:flex space-x-6">
+    <div class="hidden md:flex items-center space-x-6">
       <a href="#services" class="text-gray-700 hover:text-indigo-600 text-lg font-medium transition-colors duration-200" i18n>Services</a>
       <a href="#portifolio" class="text-gray-700 hover:text-indigo-600 text-lg font-medium transition-colors duration-200" i18n>Our apps</a>
       <a href="#contact" class="text-gray-700 hover:text-indigo-600 text-lg font-medium transition-colors duration-200" i18n>Contact</a>
+      <app-language-switcher displayMode="dropdown"></app-language-switcher>
     </div>
 
     <!-- Hamburger Button -->
@@ -34,6 +35,8 @@
       <a href="#services" (click)="closeMenu()" class="block w-full text-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50" i18n>Services</a>
       <a href="#portifolio" (click)="closeMenu()" class="block w-full text-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50" i18n>Our apps</a>
       <a href="#contact" (click)="closeMenu()" class="block w-full text-center px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50" i18n>Contact</a>
+      <div class="border-t border-gray-200 w-full my-2"></div>
+      <app-language-switcher displayMode="inline"></app-language-switcher>
     </div>
   </div>
 </nav>

src/app/component/navigation/navigation.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { LanguageSwitcher } from '../language-switcher/language-switcher';
 
 @Component({
   selector: 'app-navigation',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, LanguageSwitcher],
   templateUrl: './navigation.html',
 })
 export class Navigation {