src/app/components/header/mobile-menu/mobile-menu.component.ts
Display a menu for mobile sized screens
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cns-mobile-menu |
| imports |
HraCommonModule
RouterExtModule
MatDividerModule
MatExpansionModule
MatIconModule
ScrollingModule
MenuContentComponent
ButtonsModule
InlineSVGModule
SocialMediaButtonComponent
|
| templateUrl | ./mobile-menu.component.html |
| styleUrl | ./mobile-menu.component.scss |
Inputs |
Outputs |
| menuOptions | |
Type : Menus
|
|
| Required : true | |
|
Options to display on the mobile menu |
|
| socials | |
Default value : SOCIAL_IDS
|
|
|
Social media button data |
|
| closeMenu | |
|
Emits when menu is closed |
|
import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
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 { SOCIAL_IDS, SocialMediaButtonComponent } from '@hra-ui/design-system/buttons/social-media-button';
import { ScrollingModule } from '@hra-ui/design-system/scrolling';
import { InlineSVGModule } from 'ng-inline-svg-2';
import { MenuContentComponent } from '../menu-content/menu-content.component';
import { Menus } from '../types/menus.schema';
/**
* Display a menu for mobile sized screens
*/
@Component({
selector: 'cns-mobile-menu',
imports: [
HraCommonModule,
RouterExtModule,
MatDividerModule,
MatExpansionModule,
MatIconModule,
ScrollingModule,
MenuContentComponent,
ButtonsModule,
InlineSVGModule,
SocialMediaButtonComponent,
],
templateUrl: './mobile-menu.component.html',
styleUrl: './mobile-menu.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MobileMenuComponent {
/** Options to display on the mobile menu */
readonly menuOptions = input.required<Menus>();
/** Social media button data */
readonly socials = input(SOCIAL_IDS);
/** Emits when menu is closed */
readonly closeMenu = output();
}
<header class="menu-header">
<a
class="logo"
hraFeature="logo"
hraClickEvent
aria-label="Visit CNS"
hraLink="https://cns.iu.edu/"
[inlineSVG]="'assets/cns_header_logo.svg' | assetUrl"
>
</a>
<button mat-icon-button (click)="closeMenu.emit()">
<mat-icon>close</mat-icon>
</button>
</header>
<mat-divider class="divider" />
<ng-scrollbar class="categories-container">
<mat-accordion class="categories" displayMode="flat" multi="false">
@for (option of menuOptions().options; track option) {
@if (option.type === 'item') {
<a
mat-button
hraSecondaryButton
hraClickEvent
class="category link"
[hraFeature]="option.label | slugify"
[hraLink]="option.url"
[hraLinkExternal]="option.external"
>
{{ option.label }}
</a>
} @else {
<mat-expansion-panel class="category panel" hideToggle>
<mat-expansion-panel-header class="header">
<mat-panel-title class="title">
{{ option.label }}
<mat-icon class="toggle" />
</mat-panel-title>
</mat-expansion-panel-header>
<cns-menu-content class="content" [menu]="option" />
</mat-expansion-panel>
}
<mat-divider class="divider" />
}
</mat-accordion>
</ng-scrollbar>
<div class="socials">
@for (id of socials(); track id) {
<hra-social-media-button size="large" variant="color" [id]="$any(id)" />
}
</div>