src/app/components/header/mega-menu/mega-menu.component.ts
A menu to be shown when certain header options are clicked
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cns-mega-menu |
| imports |
HraCommonModule
RouterExtModule
MatIconModule
ButtonsModule
MatDividerModule
|
| templateUrl | ./mega-menu.component.html |
| styleUrl | ./mega-menu.component.scss |
Inputs |
| menu | |
Type : Menu
|
|
| Required : true | |
|
Menu data to display |
|
| socials | |
Default value : CNS_SOCIAL_IDS
|
|
|
Social media button data |
|
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { HraCommonModule } from '@hra-ui/common';
import { RouterExtModule } from '@hra-ui/common/router-ext';
import { ButtonsModule } from '@hra-ui/design-system/buttons';
import { CNS_SOCIAL_IDS } from '../../static-data/parsed';
import { Menu } from '../types/menus.schema';
/**
* A menu to be shown when certain header options are clicked
*/
@Component({
selector: 'cns-mega-menu',
imports: [HraCommonModule, RouterExtModule, MatIconModule, ButtonsModule, MatDividerModule],
templateUrl: './mega-menu.component.html',
styleUrl: './mega-menu.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MegaMenuComponent {
/** Menu data to display */
readonly menu = input.required<Menu>();
/** Social media button data */
readonly socials = input(CNS_SOCIAL_IDS);
}
@if (menu().featured; as featured) {
<div class="featured-section">
<a mat-button class="featured-link" [hraLink]="featured.url" [hraLinkExternal]="featured.external">
<div class="featured-content-container">
@if (featured.imgSrc; as src) {
<img class="featured-image" alt="" [src]="src | assetUrl" />
}
<div class="featured-bottom">
<div class="featured-label">
<span class="label">{{ featured.label }}</span>
@if (featured.tagline; as tagline) {
<span class="tagline">{{ tagline }}</span>
}
</div>
<mat-icon>arrow_right_alt</mat-icon>
</div>
</div>
</a>
</div>
}
<div class="right-side">
<div class="nav-items">
<div class="groups">
@for (group of menu().items; track group) {
<div class="group">
<div class="group-label">
{{ group.label }}
</div>
<mat-divider class="divider" />
<div class="items">
@for (item of group.items; track item) {
<a
mat-button
hraSecondaryButton
hraClickEvent
class="item-label"
[hraFeature]="item.label | slugify"
[hraLink]="item.url"
[hraLinkExternal]="item.external"
>
{{ item.label }}
</a>
}
</div>
</div>
}
</div>
</div>
<div class="socials">
@for (id of socials(); track id) {
<hra-social-media-button size="large" variant="color" [id]="$any(id)" />
}
</div>
</div>