Code Documentation for cns-website
  1. Components
  2. MenuContentComponent

File

src/app/components/header/menu-content/menu-content.component.ts

Description

Displays the menu for mobile screens

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector cns-menu-content
imports HraCommonModule RouterExtModule MatIconModule ButtonsModule MatDividerModule
templateUrl ./menu-content.component.html
styleUrl ./menu-content.component.scss

Index

Inputs

Inputs

menu
Type : Menu
Required :  true
Defined in src/app/components/header/menu-content/menu-content.component.ts:21

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>
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""