src/app/components/header/menu-content/menu-content.component.ts
Displays the menu for mobile screens
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cns-menu-content |
| imports |
HraCommonModule
RouterExtModule
MatIconModule
ButtonsModule
MatDividerModule
|
| templateUrl | ./menu-content.component.html |
| styleUrl | ./menu-content.component.scss |
Inputs |
| menu | |
Type : Menu
|
|
| Required : true | |
|
Menu data to display |
|
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 { Menu } from '../types/menus.schema';
/**
* Displays the menu for mobile screens
*/
@Component({
selector: 'cns-menu-content',
imports: [HraCommonModule, RouterExtModule, MatIconModule, ButtonsModule, MatDividerModule],
templateUrl: './menu-content.component.html',
styleUrl: './menu-content.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MenuContentComponent {
/** Menu data to display */
readonly menu = input.required<Menu>();
}
@if (menu().featured; as featured) {
<a mat-button class="featured-link" [hraLink]="featured.url" [hraLinkExternal]="featured.external">
<div class="featured-content-container">
<div class="featured-content">
<span class="label">{{ featured.label }}</span>
<span class="tagline">{{ featured.tagline }}</span>
</div>
<mat-icon>arrow_right_alt</mat-icon>
</div>
</a>
}
@for (group of menu().items; track group) {
<div class="group">
<div class="group-label">
{{ group.label }}
</div>
@if (group.description; as description) {
<div class="group-description">
{{ description }}
</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>
}