MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | angular-14]: navigationBar.component: Added field "public featuredAlignment: string = MenuAlignment.CENTER.valueOf();" and align custom menu according to this, dynamically.

This commit is contained in:
Konstantina Galouni 2022-12-09 16:49:07 +02:00
parent acdba43c8b
commit 53a39d0a34
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
sharedComponents/navigationBar.component.html
View File

@ -289,17 +289,17 @@
<div class="uk-background-primary uk-light"> <div class="uk-background-primary uk-light">
<div class="uk-container uk-container-expand"> <div class="uk-container uk-container-expand">
<div class="uk-navbar" uk-navbar="delay-hide: 400"> <div class="uk-navbar" uk-navbar="delay-hide: 400">
<div class="uk-navbar-right"> <div [ngClass]="'uk-navbar-'+featuredAlignment.toLowerCase()">
<ul class="uk-navbar-nav"> <ul class="uk-navbar-nav">
<ng-container *ngFor="let item of featuredMenuItems"> <ng-container *ngFor="let item of featuredMenuItems">
<li [class.uk-active]="isTheActiveMenu(item)" [ngClass]="item.customClass"> <li [class.uk-active]="isTheActiveMenu(item)" [ngClass]="item.customClass">
<a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)" <a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)"
routerLink="{{item.route}}" routerLink="{{item.route}}"
[queryParams]="item.params" [queryParams]="item.params"
[fragment]="item.fragment"> [fragment]="item.fragment">
{{item.title}} {{item.title}}
</a> </a>
<a *ngIf="item.type == 'external' && item.url" <a *ngIf="item.type == 'external' && item.url"
href="{{item.url}}" class="custom-external" href="{{item.url}}" class="custom-external"
target="_blank"> target="_blank">
{{item.title}} {{item.title}}

10
sharedComponents/navigationBar.component.ts
View File

@ -2,7 +2,7 @@ import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Session, User} from '../login/utils/helper.class'; import {Session, User} from '../login/utils/helper.class';
import {ConfigurationService} from '../utils/configuration/configuration.service'; import {ConfigurationService} from '../utils/configuration/configuration.service';
import {MenuItem} from './menu'; import {MenuAlignment, MenuItem} from './menu';
import {EnvProperties} from '../utils/properties/env-properties'; import {EnvProperties} from '../utils/properties/env-properties';
import {Subscription} from 'rxjs'; import {Subscription} from 'rxjs';
import {HelpContentService} from '../services/help-content.service'; import {HelpContentService} from '../services/help-content.service';
@ -59,7 +59,8 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
public additionalMenuItems: MenuItem[] = []; public additionalMenuItems: MenuItem[] = [];
public featuredMenuItems: MenuItem[] = []; public featuredMenuItems: MenuItem[] = [];
public isMenuEnabled: boolean = false; public isMenuEnabled: boolean = false;
public isFeaturedMenuEnabled: boolean = false; public isFeaturedMenuEnabled: boolean = false;
public featuredAlignment: string = MenuAlignment.CENTER.valueOf();
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
@ -124,8 +125,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy {
this._helpContentService.getMenuItems(this.portal).subscribe( this._helpContentService.getMenuItems(this.portal).subscribe(
data => { data => {
this.isMenuEnabled = data.isMenuEnabled; this.isMenuEnabled = data.isMenuEnabled;
this.isFeaturedMenuEnabled = data.isFeaturedMenuEnabled; this.isFeaturedMenuEnabled = data.isFeaturedMenuEnabled;
this.featuredMenuItems = data.featuredMenuItems; this.featuredAlignment = data.featuredAlignment;
this.featuredMenuItems = data.featuredMenuItems;
this.additionalMenuItems = data.menuItems; this.additionalMenuItems = data.menuItems;
}, },
error => this.handleError("Server error fetching custom menu items", error) error => this.handleError("Server error fetching custom menu items", error)