Test deployment new 22

.gitignore

@@ -1,6 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # Compiled output
+/docs
 /dist
 /tmp
 /out-tsc

src/app/modules/app-routing.module.ts

@@ -1,17 +1,17 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router'; // CLI imports router
-import { NameGeneratorComponent } from '../name-generator/name-generator.component';
-import { UserGeneratorComponent } from '../user-generator/user-generator.component';
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router"; // CLI imports router
+import { NameGeneratorComponent } from "../name-generator/name-generator.component";
+import { UserGeneratorComponent } from "../user-generator/user-generator.component";
 
 const routes: Routes = [
-  { path: '', redirectTo: 'generate-users', pathMatch: 'full' },
-  { path: 'generate-names', component: NameGeneratorComponent },
-  { path: 'generate-users', component: UserGeneratorComponent },
+  { path: "", redirectTo: "generate-users", pathMatch: "full" },
+  { path: "generate-names", component: NameGeneratorComponent },
+  { path: "generate-users", component: UserGeneratorComponent },
 ];
 
 // configures NgModule imports and exports
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/navigation-bar/navigation-bar.component.html

@@ -10,15 +10,15 @@
           <a
             class="nav-link"
             [class.active]="activeLink === 'generate-users'"
-            href="generate-users"
+            href="#generate-users"
             >Generate Users</a
           >
         </li>
         <li class="nav-item">
           <a
             class="nav-link"
             [class.active]="activeLink === 'generate-names'"
-            href="generate-names"
+            href="#generate-names"
             >Generate Names</a
           >
         </li>

src/app/navigation-bar/navigation-bar.component.ts

@@ -1,27 +1,37 @@
-import { Component } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { Component } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { Router, NavigationEnd } from "@angular/router";
 
 @Component({
-  selector: 'app-navigation-bar',
-  templateUrl: './navigation-bar.component.html',
-  styleUrls: ['./navigation-bar.component.css'],
+  selector: "app-navigation-bar",
+  templateUrl: "./navigation-bar.component.html",
+  styleUrls: ["./navigation-bar.component.css"],
 })
 export class NavigationBarComponent {
   currentLanguage: string;
-  activeLink: string = 'generate-users';
+  activeLink: string = "generate-users";
 
-  constructor(private languageService: TranslateService) {
-    const currentPageLink = window.location.pathname.substring(1) || '';
-    this.activeLink = currentPageLink;
+  constructor(
+    private languageService: TranslateService,
+    private router: Router
+  ) {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        // Get the current page link after each navigation
+        const currentPageLink = this.router.url.substring(1) || "";
+        console.log(currentPageLink);
+        this.activeLink = currentPageLink;
+      }
+    });
 
-    const storedLanguage = sessionStorage.getItem('language');
+    const storedLanguage = sessionStorage.getItem("language");
     this.currentLanguage = storedLanguage || languageService.currentLang;
     this.languageService.use(this.currentLanguage);
   }
 
   changeLanguage(language: string): void {
     this.currentLanguage = language;
     this.languageService.use(language);
-    sessionStorage.setItem('language', language);
+    sessionStorage.setItem("language", language);
   }
 }