Add language selection dropdown and update language handling

Author: MessiasLima

src/app/component/nav/nav.html

@@ -23,6 +23,8 @@
       <a href="#blog" class="navbar-item">News</a>
       <a href="#contact" class="navbar-item">Contact</a>
 
+
+
       <div class="navbar-item">
         <div class="buttons">
           <a class="button brand-gradient" href="#contact">
@@ -33,6 +35,20 @@
           </a>
         </div>
       </div>
+
+        <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">
+          {{ selectedLanguage.name }}
+        </a>
+
+        <div class="navbar-dropdown">
+          <a class="navbar-item">{{ defaultLanguage.name }}</a>
+
+          @for (translation of availableTranslation; track $index) {
+            <a class="navbar-item">{{ translation.name }}</a>
+          }
+        </div>
+      </div>
     </div>
   </div>
 </nav>

src/app/component/nav/nav.ts

@@ -1,15 +1,36 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+declare var window: any; // To avoid TypeScript errors for window usage
 
 @Component({
   selector: 'app-nav',
   imports: [],
   templateUrl: './nav.html',
-  styleUrl: './nav.scss'
+  styleUrl: './nav.scss',
 })
-export class Nav {
+export class Nav implements AfterViewInit {
   isActive = false;
 
   toogleActive() {
     this.isActive = !this.isActive;
   }
+
+  defaultLanguage: Language = { name: '🇬🇧 Eng', baseHref: '' };
+  availableTranslation: Language[] = [{ name: '🇧🇷 Por', baseHref: '/pt/' }];
+  selectedLanguage: Language = this.defaultLanguage;
+
+  ngAfterViewInit() {
+    this.selectedLanguage = this.updateSelectedLanguage();
+  }
+
+  private updateSelectedLanguage(): Language {
+    const match = this.availableTranslation.find((lang) =>
+      window.location.href.includes(lang.baseHref)
+    );
+    return match || this.defaultLanguage;
+  }
+}
+
+interface Language {
+  name: string;
+  baseHref: string;
 }