subtle background, routes, routerlink active

Author: esthersoftwaredev

src/app/app.component.ts

@@ -48,7 +48,7 @@ export class AppComponent implements OnDestroy {
 	navItems = [
 		{
 			name: "Software Developers",
-			route: "",
+			route: "home",
 			icon: "developer_board",
 		},
 		{
@@ -233,7 +233,6 @@ export class AppComponent implements OnDestroy {
 			route: "/women-in-tech",
 			icon: "developer_board",
 			submenu: [
-				// { name: "Open Source Involved", route: "/open-source", icon: "developer_board"},
 				{
 					name: "Data Scientists / Analysts",
 					route: "/developers",

src/app/app.routes.ts

@@ -1,17 +1,16 @@
 import { Routes } from '@angular/router';
 import { DevelopersComponent } from './components/developers/developers.component';
 import { WomenInTechComponent } from './components/women-in-tech/women-in-tech.component';
-import { OpenSourceComponent } from './components/open-source/open-source.component';
 import { HistoryComponent } from './components/pages/history/history.component';
 import { AboutComponent } from './components/pages/about/about.component';
 import { FqaComponent } from './components/pages/fqa/fqa.component';
 
 export const routes: Routes = [
-  { path: '', component: DevelopersComponent },
+  { path: 'home', component: DevelopersComponent },
   { path: 'women-in-tech', component: WomenInTechComponent },
-  { path: 'open-source', component: OpenSourceComponent },
   { path: 'history', component: HistoryComponent},
   { path: 'fqa', component: FqaComponent },
   { path: 'about', component: AboutComponent },
-  { path: "**", redirectTo: "", pathMatch: "full"}
+  { path: '', redirectTo: 'home', pathMatch: 'full' },
+  { path: "**", redirectTo: "home", pathMatch: "full"}
 ];

src/app/components/header/header.component.ts

@@ -28,7 +28,6 @@ import { ThemeService } from "../../services/theme.service";
 	styleUrl: "./header.component.scss",
 })
 export class HeaderComponent implements OnInit, AfterViewInit {
-
 	@Output() toggleSidenav = new EventEmitter<void>();
 
 	title = "";
@@ -37,31 +36,31 @@ export class HeaderComponent implements OnInit, AfterViewInit {
 	router = inject(Router);
 	themeService = inject(ThemeService);
 
-  ngOnInit() {
-    // Subscribe to router events to detect route changes
-    this.router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        let title = '';
-        switch (this.router.url) {
-          case '/':
-            title = '';
-            break;
-          case '/open-source':
-            title = 'Open Source Involved';
-            break;
-          case '/developers':
-            title = 'Software Engineers & Developers';
-            break;
-          case '/history':
-            title = 'Throughout History';
-            break;
-          default:
-            title = ''; // Set a default title if needed
-        }
-        this.title = title;
-      }
-    });
-  }
+	ngOnInit() {
+		// Subscribe to router events to detect route changes
+		this.router.events.subscribe((event) => {
+			if (event instanceof NavigationEnd) {
+				let title = "";
+				switch (this.router.url) {
+					case "/":
+						title = "";
+						break;
+					case "/home":
+						title = "Software Developers & Engineers";
+						break;
+					case "/women-in-tech":
+						title = "Women in Tech";
+						break;
+					case "/history":
+						title = "Throughout History";
+						break;
+					default:
+						title = ""; // Set a default title if needed
+				}
+				this.title = title;
+			}
+		});
+	}
 
 	onToggleSidenav() {
 		this.toggleSidenav.emit();
@@ -79,4 +78,3 @@ export class HeaderComponent implements OnInit, AfterViewInit {
 		this.themeService.updateTheme();
 	}
 }
-