add function

src/app/home/home.component.html

@@ -31,7 +31,11 @@
             <i class="fas fa-caret-down"></i>
           </a>
           <ul class="submenu">
-            <li><a routerLink="/pronunciation-improvement" routerLinkActive="active-link">Pronunciation Improvement</a></li>
+            <li>
+              <a href="#" (click)="openPronunciation(); $event.preventDefault()" role="button" aria-pressed="false">
+                Pronunciation Trainer
+              </a>
+            </li>
             <li><a routerLink="/personality-improvement" routerLinkActive="active-link">Personality Improvement</a></li>
             <li><a routerLink="/body-language-improvement" routerLinkActive="active-link">Body Language Improvement</a></li>
           </ul>

src/app/home/home.component.ts

@@ -3,6 +3,8 @@ import { Router } from '@angular/router';
 import { AuthService } from '../auth/auth.service';
 import { Subscription } from 'rxjs';
 import { BrandService } from '../shared/brand.service';
+import { MatDialog } from '@angular/material/dialog';
+import { PronunciationComponent } from '../pronunciation/pronunciation.component';
 
 @Component({
   selector: 'app-home',
@@ -41,7 +43,8 @@ export class HomeComponent implements AfterViewInit, OnInit, OnDestroy {
     private router: Router,
     private authService: AuthService,
     private host: ElementRef,
-    public brand: BrandService
+    public brand: BrandService,
+    private dialog: MatDialog
   ) { }
 
   // -------------------- Lifecycle Hooks --------------------
@@ -158,4 +161,13 @@ export class HomeComponent implements AfterViewInit, OnInit, OnDestroy {
   closeTermsPopup(): void {
     this.showTermsPopup = false;
   }
+
+  openPronunciation(): void {  
+    const dialogRef = this.dialog.open(PronunciationComponent, {
+      width: '90vw',
+      maxWidth: '95vw',
+      height: '85vh',    
+      disableClose: true
+    });
+  }
 }