Navbar make menu position center default. Fix menuitems subnav
This commit is contained in:
parent
53a0cd733b
commit
cb0ac1b9df
|
|
@ -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,44 +143,39 @@
|
||||||
<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>
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||||
<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
|
<ng-container *ngFor="let submenu of menu.items">
|
||||||
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
|
||||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
||||||
<ng-container *ngFor="let submenu of menu.items">
|
|
||||||
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
|
|
||||||
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
|
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
|
||||||
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
|
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
|
||||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||||
<a *ngIf="submenu.route.length > 0"
|
<a *ngIf="submenu.route.length > 0"
|
||||||
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
||||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||||
href="{{submenu.url}}"
|
href="{{submenu.url}}"
|
||||||
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
|
target="{{submenu.url.includes('http') ? '_blank' : '_self'}}">{{submenu.title}}</a>
|
||||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||||
<li>
|
<li>
|
||||||
<a *ngIf="subsubmenu.route.length > 0"
|
<a *ngIf="subsubmenu.route.length > 0"
|
||||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||||
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
||||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||||
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
|
href="{{subsubmenu.url}}" target="_blank">{{subsubmenu.title}}</a>
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
|
<li *ngIf="submenu.route.length == 0 && submenu.url.length == 0 && isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)"
|
||||||
class="uk-nav-header">{{submenu.title}}</li>
|
class="uk-nav-header">{{submenu.title}}</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- Custom menu items -->
|
<!-- Custom menu items -->
|
||||||
|
|
@ -231,33 +233,33 @@
|
||||||
</ul>
|
</ul>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<!-- New navbar for featured menu items - test only -->
|
<!-- New navbar for featured menu items - test only -->
|
||||||
<ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
|
<ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
|
||||||
<div class="featuredNavBar">
|
<div class="featuredNavBar">
|
||||||
<ul>
|
<ul>
|
||||||
<ng-container *ngFor="let item of featuredMenuItems">
|
<ng-container *ngFor="let item of featuredMenuItems">
|
||||||
<li>
|
<li>
|
||||||
<!-- INTERNAL -->
|
<!-- INTERNAL -->
|
||||||
<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"
|
||||||
[class.uk-active]="isTheActiveMenuItem(item)">
|
[class.uk-active]="isTheActiveMenuItem(item)">
|
||||||
{{item.title}}
|
{{item.title}}
|
||||||
</a>
|
</a>
|
||||||
<!-- EXTERNAL -->
|
<!-- EXTERNAL -->
|
||||||
<a *ngIf="item.type == 'external' && item.url"
|
<a *ngIf="item.type == 'external' && item.url"
|
||||||
href="{{item.url}}"
|
href="{{item.url}}"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
{{item.title}}
|
{{item.title}}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ng-template #header_template let-mobile="mobile">
|
<ng-template #header_template let-mobile="mobile">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue