Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 2x 2x 2x 2x 2x 14x 14x 14x 14x 14x 14x 14x 12x 13x 13x 13x 15x 2x 2x 1x 1x 1x 2x 2x 2x 1x 1x 2x 2x 2x 1x 1x 2x 2x 1x 2x 2x 2x 1x 1x 1x 1x 1x 1x | import { ChangeDetectorRef, Component, OnInit, OnDestroy, HostListener } from '@angular/core';
import { AuthService, User } from '../services/auth.service';
import { Subscription } from 'rxjs';
import { RouterLink } from '@angular/router';
import { MatIcon } from '@angular/material/icon';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css'],
imports: [
RouterLink,
MatIcon
],
})
export class HeaderComponent implements OnInit, OnDestroy {
// Property to track the state of the mobile menu
isMenuOpen: boolean = false;
// Track active dropdown in desktop
activeDropdown: string | null = null;
// Track open submenus in mobile
activeMobileSubmenu: string | null = null;
// Authentication state
currentUser: User | null = null;
isAuthenticated: boolean = false;
private authSubscription?: Subscription;
constructor(
private authService: AuthService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
// Subscribe to authentication state changes
this.authSubscription = this.authService.currentUser.subscribe(user => {
this.currentUser = user;
this.isAuthenticated = !!user;
this.cdr.markForCheck();
});
}
ngOnDestroy(): void {
this.authSubscription?.unsubscribe();
}
/**
* Toggles the state of the mobile menu and manages body overflow.
*/
toggleMenu(): void {
this.isMenuOpen = !this.isMenuOpen;
if (this.isMenuOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
this.activeMobileSubmenu = null;
}
}
/**
* Closes the menu specifically.
*/
closeMenu(): void {
this.isMenuOpen = false;
this.activeMobileSubmenu = null;
document.body.style.overflow = '';
}
/**
* Desktop Dropdown logic - Hover support
*/
onHover(menu: string): void {
this.activeDropdown = menu;
}
onLeave(): void {
this.activeDropdown = null;
}
/**
* Desktop Dropdown logic - Click to Toggle
*/
toggleDropdown(menu: string, event: Event): void {
event.preventDefault();
event.stopPropagation();
if (this.activeDropdown === menu) {
this.activeDropdown = null;
} else {
this.activeDropdown = menu;
}
}
/**
* Close dropdowns when clicking outside
*/
@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent): void {
const target = event.target as HTMLElement;
// If we click outside the header or on a non-dropdown item, close any open dropdowns
if (!target.closest('.has-dropdown')) {
this.activeDropdown = null;
}
}
/**
* Mobile Submenu logic
*/
toggleMobileSubmenu(menu: string, event: Event): void {
event.preventDefault();
event.stopPropagation();
if (this.activeMobileSubmenu === menu) {
this.activeMobileSubmenu = null;
} else {
this.activeMobileSubmenu = menu;
}
}
/**
* Logout user
*/
logout(): void {
this.authService.logout();
this.closeMenu();
}
openApplyPage(): void {
window.open('https://apply.creditcard.pnb.bank.in/', '_blank');
}
openloginPage(): void {
window.open('https://pnbcard.in/portal/index', '_blank');
}
} |