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 | 1x 7x 7x 7x 24x 24x 8x 2x 2x | import { NgOptimizedImage } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
HostListener,
signal,
} from '@angular/core';
import type { WritableSignal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import type { IconDefinition } from '@fortawesome/angular-fontawesome';
import { faBars, faX } from '@fortawesome/free-solid-svg-icons';
/**
* Primary header for standard views of logged in users. Contains the user account menu and logo.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [ FaIconComponent, NgOptimizedImage, RouterLink ],
selector: 'app-header',
styleUrl: './header.component.scss',
templateUrl: './header.component.html',
})
export class HeaderComponent {
/** Toggles the collapsible User Account menu. */
public readonly $showMenu: WritableSignal<boolean> = signal<boolean>(false);
/** Hamburger icon for the User Accounts menu in mobile view. */
public readonly faBars: IconDefinition = faBars;
/** Close icon for User Accounts menu. */
public readonly faX: IconDefinition = faX;
/**
* Close the menu if the user clicks on a link.
*/
@HostListener('click', [ '$event' ])
public onClick(event: Event): void {
const { target } = event;
if (target instanceof HTMLAnchorElement) {
this.$showMenu.set(false);
}
}
/**
* Sets the expanded class on the .menu list, and updates aria-expanded and the icon.
*/
public toggleMenu(): void {
const menuShown = this.$showMenu();
this.$showMenu.set(!menuShown);
}
}
|