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

Navbar make menu position center default. Fix menuitems subnav

This commit is contained in:
Konstantinos Triantafyllou 2022-03-09 23:38:05 +02:00
parent 53a0cd733b
commit cb0ac1b9df
1 changed files with 69 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
sharedComponents/navigationBar.component.html
View File

@ -2,8 +2,10 @@
<div class="uk-hidden@m"> <div class="uk-hidden@m">
<div [ngClass]="portal + '-menu'"> <div [ngClass]="portal + '-menu'">
<nav class="uk-navbar-container uk-navbar" uk-navbar=""> <nav class="uk-navbar-container uk-navbar" uk-navbar="">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"> <div
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 60px; width: 60px;"> alt="BETA" style="height: 60px; width: 60px;">
</div> </div>
<div *ngIf="!onlyTop || userMenu" class="uk-navbar-left"> <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left">
@ -39,13 +41,15 @@
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a--> <!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
<a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)" <a *ngIf="menu.rootItem.route.length > 0 && (isEnabled([menu.rootItem.route], showPage) || !menu.rootItem.routeRequired)"
routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)" routerLink="{{menu.rootItem.route}}" (click)="closeCanvas(canvas)"
[queryParams]="menu.rootItem.params" [fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a> [queryParams]="menu.rootItem.params"
[fragment]="menu.rootItem.fragment">{{menu.rootItem.title}}</a>
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)" href="{{menu.rootItem.url}}" (click)="closeCanvas(canvas)"
target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a> target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) ||
(menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) (menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage)
&& isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))" (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a> && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))"
(click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
<ul class="uk-nav-sub"> <ul class="uk-nav-sub">
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li [class.uk-active]="isTheActiveMenuItem(submenu)" <li [class.uk-active]="isTheActiveMenuItem(submenu)"
@ -90,10 +94,13 @@
</div> </div>
<div class="uk-visible@m"> <div class="uk-visible@m">
<div class="uk-navbar-transparent" [ngClass]="portal + '-menu'" <div class="uk-navbar-transparent" [ngClass]="portal + '-menu'"
uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky" cls-inactive="uk-navbar-transparent" uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky"
cls-inactive="uk-navbar-transparent"
[attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)"> [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
<div *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge"> <div
<img class="uk-position-top-left" [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo && header.badge">
<img class="uk-position-top-left"
[src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
alt="BETA" style="height: 100px; width: 100px; z-index: 1000"> alt="BETA" style="height: 100px; width: 100px; z-index: 1000">
</div> </div>
<nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar> <nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
@ -107,7 +114,7 @@
<ng-container *ngIf="showLogo && !isHeaderLeft"> <ng-container *ngIf="showLogo && !isHeaderLeft">
<ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container> <ng-container *ngTemplateOutlet="header_template; context: {mobile: false}"></ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="header.menuPosition === 'center'"> <ng-container *ngIf="!header.menuPosition || header.menuPosition === 'center'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container> <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container> </ng-container>
</div> </div>
@ -136,12 +143,9 @@
<a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0" <a *ngIf="menu.rootItem.route.length == 0 && menu.rootItem.url.length > 0"
href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}" href="{{menu.rootItem.url}}" target="{{menu.rootItem.url.includes('http') ? '_blank' : '_self'}}"
aria-expanded="false">{{menu.rootItem.title}}</a> aria-expanded="false">{{menu.rootItem.title}}</a>
<a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage)) " <a *ngIf="(menu.rootItem.route.length == 0 && menu.rootItem.url.length == 0) || ( menu.rootItem.route.length >0 && menu.rootItem.routeRequired && !isEnabled([menu.rootItem.route], showPage) && isAtleastOneEnabled(menu.rootItem.routeRequired, showPage))">{{menu.rootItem.title}}</a>
class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a> <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown" uk-drop="pos: bottom-left">
<div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left" <div class="uk-height-max-medium uk-overflow-auto">
style="top: 80px; left: 0px;" id="{{menu.rootItem._id}}" uk-toggle>
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
<ng-container *ngFor="let submenu of menu.items"> <ng-container *ngFor="let submenu of menu.items">
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
@ -172,8 +176,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</li> </li>
</ng-container> </ng-container>
<!-- Custom menu items --> <!-- Custom menu items -->