feat: update topbar with correct page title

Author: jmdotdev

eventz-ui/src/components/admin/side-nav/side-nav.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ISideNav } from '../../../interfaces/interface';
 import { sideNavLinks } from '../data/side-nav-links';
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
@@ -15,16 +15,17 @@ import { Router } from '@angular/router';
 export class SideNavComponent implements OnInit {
   links: ISideNav[] = sideNavLinks;
   activeLink: ISideNav | undefined;
+  @Output() selectedLinkEmitter = new EventEmitter<string>();
 
   constructor ( private router:Router) {}
   ngOnInit(): void {
-    console.log(this.router.url.split('/')[2]);
     this.activeLink = this.links.find(link => link.name.toLowerCase() === (this.router.url.split('/')[2] || 'dashboard'));
     if (this.activeLink) {
       this.links = this.links.map((l) => ({
         ...l,
         isActive: l.name === this.activeLink?.name ? true : false
       }));
+      this.selectedLinkEmitter.emit(this.activeLink.name);
     }
   }
 
@@ -33,6 +34,7 @@ export class SideNavComponent implements OnInit {
       ...l,
       isActive: l.name === link.name ? true : false
     }));
-    link.name.toLowerCase() === 'dashboard' ? this.router.navigate(['admin']) : this.router.navigate([`admin/${link.name.toLowerCase()}`])
+    link.name.toLowerCase() === 'dashboard' ? this.router.navigate(['admin']) : this.router.navigate([`admin/${link.name.toLowerCase()}`]);
+    this.selectedLinkEmitter.emit(link.name);
   }
 }

eventz-ui/src/components/admin/top-bar/top-bar.component.html

@@ -2,8 +2,8 @@
     <button class="lg:hidden ml-4" (click)="menuClick.emit()">
   <fa-icon [icon]="faBars"></fa-icon>
 </button>
-    <div class="text-lg font-semibold">
-        Dashboard
+    <div class="text-lg font-semibold my-3">
+        {{activeLink}}
     </div>
     <div class="flex items-center justify-end w-1/6 pe-6">
         <div class="flex items-center justify-center w-10 h-10 rounded-full bg-adminBackground">

eventz-ui/src/components/admin/top-bar/top-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { faBell, faDotCircle, faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CommonModule } from '@angular/common';
@@ -14,4 +14,5 @@ export class TopBarComponent {
     faDotCircle = faDotCircle;
     faBars = faBars;
     @Output() menuClick = new EventEmitter<void>();
+    @Input() activeLink: string = '';
 }

eventz-ui/src/layouts/admin-layout/admin-layout.component.html

@@ -2,7 +2,7 @@
 
   <!-- Desktop sidenav -->
   <div class="hidden lg:block w-[15%]">
-    <app-side-nav></app-side-nav>
+    <app-side-nav (selectedLinkEmitter)="handleEmittedLink($event)"></app-side-nav>
   </div>
 
   <!-- Mobile backdrop -->
@@ -17,13 +17,13 @@
     class="fixed top-0 left-0 h-full w-64 bg-white z-50 transform transition-transform duration-300 lg:hidden"
     [ngClass]="showSideNav ? 'translate-x-0' : '-translate-x-full'"
   >
-    <app-side-nav></app-side-nav>
+    <app-side-nav (selectedLinkEmitter)="handleEmittedLink($event)"></app-side-nav>
   </div>
 
   <!-- Main content -->
   <div class="flex flex-col w-full lg:w-[85%] max-h-screen overflow-y-auto">
     <div class="h-14 bg-white flex items-center">
-      <app-top-bar (menuClick)="toggleSideNav()"></app-top-bar>
+      <app-top-bar (menuClick)="toggleSideNav()" [activeLink]="activeLink"></app-top-bar>
     </div>
 
     <div>

eventz-ui/src/layouts/admin-layout/admin-layout.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { SideNavComponent } from "../../components/admin/side-nav/side-nav.component";
 import { RouterOutlet } from '@angular/router';
 import { TopBarComponent } from "../../components/admin/top-bar/top-bar.component";
@@ -12,10 +12,15 @@ import { CommonModule } from '@angular/common';
   styleUrl: './admin-layout.component.scss'
 })
 export class AdminLayoutComponent {
-showSideNav = false;
+  showSideNav = false;
+  activeLink: string = '';
 
-toggleSideNav() {
-  this.showSideNav = !this.showSideNav;
-}
 
+  toggleSideNav() {
+    this.showSideNav = !this.showSideNav;
+  }
+  handleEmittedLink(linkName: string) {
+    this.activeLink = linkName;
+    console.log('Active Link in Layout:', this.activeLink);
+  }
 }