src/app/components/navbar/navbar.component.ts
Displays a navigation bar on top of the page
| selector | ccf-navbar |
| styleUrls | ./navbar.component.scss |
| templateUrl | ./navbar.component.html |
Methods |
Inputs |
Outputs |
| items | |
Type : NavItems[]
|
|
Default value : []
|
|
|
Menu items to be displayed on the navigation bar |
|
| itemClick | |
Type : EventEmitter
|
|
|
Emits the menu item data when option is selected |
|
| externalWindow | ||||||
externalWindow(url: string)
|
||||||
|
Opens menu item link in external window
Parameters :
Returns :
void
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NavItems } from '../toolbar/nav-items';
/** Displays a navigation bar on top of the page */
@Component({
selector: 'ccf-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent {
/** Menu items to be displayed on the navigation bar */
@Input() items: NavItems[] = [];
/** Emits the menu item data when option is selected */
@Output() readonly itemClick = new EventEmitter<NavItems>();
/** Opens menu item link in external window */
externalWindow(url: string): void {
window.open(url, '_blank');
}
}
<ng-container *ngFor="let item of items">
<ng-container *ngIf="item.children?.length">
<button
mat-flat-button
[matMenuTriggerFor]="childMenu"
[disabled]="item.disabled"
disableRipple="true"
class="navigation-title"
#menuTrigger="matMenuTrigger"
color="primary"
>
{{ item.menuName }}
<mat-icon class="menu-button-icon" [class.inverse]="menuTrigger.menuOpen" iconPositionEnd
>arrow_drop_down</mat-icon
>
</button>
<mat-menu #childMenu="matMenu" class="menu-container" xPosition="after" yPosition="above">
<ng-container *ngFor="let child of item.children">
<div class="navigation-items" *ngIf="child.route; else externalUrl">
<a
mat-menu-item
[routerLink]="child.route"
[fragment]="child.fragment"
[disableRipple]="true"
class="route-link"
>{{ child.menuName }}</a
>
</div>
<ng-template #externalUrl>
<label class="navigation-items">
<button mat-menu-item (click)="externalWindow(child.url!)">
{{ child.menuName }}
</button>
</label>
</ng-template>
<mat-divider *ngIf="child.divider"></mat-divider>
</ng-container>
</mat-menu>
</ng-container>
<ng-container *ngIf="!item.children || item.children.length === 0">
<button
mat-flat-button
[disableRipple]="true"
class="navigation-title"
[routerLink]="['', item.route]"
color="primary"
>
{{ item.menuName }}
</button>
</ng-container>
</ng-container>
./navbar.component.scss
:host {
display: block;
}
.mat-mdc-button-focus-overlay {
display: none;
}
.mat-mdc-unelevated-button.mat-primary {
--mat-mdc-button-persistent-ripple-color: none;
--mat-mdc-button-ripple-color: none;
}
.navigation-title {
height: 100%;
font-size: 0.875rem;
color: #ffffff;
font-weight: 500;
letter-spacing: 0.005em;
.menu-button-icon {
display: inline-flex;
align-items: center;
font-size: 1.5rem;
height: unset;
width: unset;
}
}
.navigation-items > a,
button {
color: #444c65;
--mat-menu-item-label-text-size: 14px;
--mat-menu-item-label-text-line-height: 200%;
--mat-menu-item-label-text-weight: 300;
--mat-menu-item-label-text-tracking: 0.005em;
word-wrap: normal;
overflow: visible;
min-height: 2rem;
height: auto;
text-align: left;
max-width: 31.25rem;
white-space: initial;
padding-top: 0.313rem;
text-decoration: none;
line-height: 1.5rem;
}
.inverse {
transform: rotate(180deg);
display: inline-block;
}
::ng-deep {
.menu-container {
position: relative;
top: 14px;
max-width: 23.25rem !important;
}
.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple {
display: none;
}
}