Introdule new mobile menu
This commit is contained in:
parent
64b22f3eb5
commit
a4c95bb16b
|
|
@ -39,17 +39,11 @@ import {UserManagementService} from "../services/user-management.service";
|
|||
</ng-container>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="mobileView" class="uk-nav uk-nav-default">
|
||||
<li>
|
||||
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle">
|
||||
<span>{{user.fullname + " "}}</span>
|
||||
<span class="uk-margin-small-right uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle>
|
||||
<path fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<ul *ngIf="mobileView" class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
|
||||
<li [class.uk-parent]="loggedIn">
|
||||
<a *ngIf="loggedIn">
|
||||
{{user.fullname.toString()}}
|
||||
</a>
|
||||
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
|
||||
<ul *ngIf="loggedIn" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let item of userMenuItems ">
|
||||
|
|
|
|||
|
|
@ -24,70 +24,68 @@
|
|||
</nav>
|
||||
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
|
||||
class="uk-offcanvas">
|
||||
<div class="uk-offcanvas-bar">
|
||||
<a class="uk-offcanvas-close uk-icon uk-close">
|
||||
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
|
||||
<button class="uk-offcanvas-close uk-icon uk-close">
|
||||
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
|
||||
</a>
|
||||
<div class="uk-padding">
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
|
||||
</li>
|
||||
<li [class.uk-active]="isTheActiveMenu(menu)"
|
||||
*ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.route.length > 0 && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
|
||||
routerLink="{{menu.route}}" (click)="closeCanvas(canvas)"
|
||||
[queryParams]="menu.params"
|
||||
[fragment]="menu.fragment">{{menu.title}}</a>
|
||||
<a *ngIf="menu.route.length == 0 && menu.url.length > 0"
|
||||
href="{{menu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="menu.target != '_self'"
|
||||
target="{{menu.target}}">{{menu.title}}</a>
|
||||
<a *ngIf="(menu.route.length == 0 && menu.url.length == 0) ||
|
||||
(menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage)
|
||||
&& isAtleastOneEnabled(menu.routeRequired, showPage))"
|
||||
(click)="closeCanvas(canvas)">{{menu.title}}</a>
|
||||
<ul class="uk-nav-sub">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(submenu)"
|
||||
*ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
<a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
|
||||
routerLink="{{submenu.route}}" [queryParams]=submenu.params
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||
href="{{submenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.target != '_self'"
|
||||
target="{{submenu.target}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(subsubmenu)">
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="subsubmenu.target != '_self'"
|
||||
target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-container>
|
||||
</button>
|
||||
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-top uk-nav-parent-icon" uk-nav>
|
||||
<ng-container *ngIf="!onlyTop">
|
||||
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
|
||||
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
|
||||
</li>
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass"
|
||||
*ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
|
||||
routerLink="{{menu.route}}" (click)="menu.items.length === 0?closeCanvas(canvas):null"
|
||||
[queryParams]="menu.params"
|
||||
[fragment]="menu.fragment">{{menu.title}}</a>
|
||||
<a *ngIf="!menu.route && menu.url"
|
||||
href="{{menu.url}}" (click)="menu.items.length === 0?closeCanvas(canvas):null" [class.custom-external]="menu.target != '_self'"
|
||||
target="{{menu.target}}">{{menu.title}}</a>
|
||||
<a *ngIf="(!menu.route && !menu.url) ||
|
||||
(menu.route && menu.routeRequired && !isEnabled([menu.route], showPage)
|
||||
&& isAtleastOneEnabled(menu.routeRequired, showPage))"
|
||||
(click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
|
||||
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass"
|
||||
*ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
<a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
|
||||
routerLink="{{submenu.route}}" [queryParams]=submenu.params
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
<a *ngIf="submenu.route.length == 0 && submenu.url.length > 0"
|
||||
href="{{submenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.target != '_self'"
|
||||
target="{{submenu.target}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(subsubmenu)" [ngClass]="subsubmenu.customClass">
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
|
||||
<a *ngIf="subsubmenu.route.length == 0 && subsubmenu.url.length > 0"
|
||||
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="subsubmenu.target != '_self'"
|
||||
target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
<ng-container *ngIf="userMenu">
|
||||
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
|
||||
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
|
||||
<ng-content select="[extra-s]"></ng-content>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ul>
|
||||
<ng-container *ngIf="userMenu">
|
||||
<user-mini [user]="user" mobileView=true (closeCanvasEmitter)="closeCanvas(canvas)"
|
||||
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl
|
||||
[logOutUrl]=properties.logoutUrl [cookieDomain]=properties.cookieDomain></user-mini>
|
||||
<ng-content select="[extra-s]"></ng-content>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,7 +128,7 @@
|
|||
<a routerLink="/">Home</a>
|
||||
</li>
|
||||
<ng-container *ngFor="let menu of menuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)"
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)" [ngClass]="menu.customClass"
|
||||
*ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
|
||||
<!--a routerLink="{{menu.rootItem.route}}" [queryParams]=menu.rootItem.params class="" aria-expanded="false">{{menu.rootItem.title}}</a-->
|
||||
<a *ngIf="menu.route.length > 0 && (isEnabled([menu.route], showPage) || !menu.routeRequired )"
|
||||
|
|
@ -149,7 +147,7 @@
|
|||
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
|
||||
isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
|
||||
submenu.url.length > 0)" [class.uk-active]="isTheActiveMenu(submenu)"
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0">
|
||||
[class.uk-parent]="submenu.items && submenu.items.length > 0" [ngClass]="submenu.customClass">
|
||||
<a *ngIf="submenu.route.length > 0"
|
||||
routerLink="{{submenu.route}}" [queryParams]="submenu.params"
|
||||
[fragment]="submenu.fragment">{{submenu.title}}</a>
|
||||
|
|
@ -158,7 +156,7 @@
|
|||
target="{{submenu.target}}">{{submenu.title}}</a>
|
||||
<ul *ngIf="submenu.items && submenu.items.length > 0" class="uk-nav-sub">
|
||||
<ng-container *ngFor="let subsubmenu of submenu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(subsubmenu)">
|
||||
<li [class.uk-active]="isTheActiveMenu(subsubmenu)" [ngClass]="subsubmenu.customClass">
|
||||
<a *ngIf="subsubmenu.route.length > 0"
|
||||
routerLink="{{subsubmenu.route}}" [queryParams]="subsubmenu.params"
|
||||
[fragment]="subsubmenu.fragment">{{subsubmenu.title}}</a>
|
||||
|
|
@ -180,7 +178,7 @@
|
|||
<!-- TODO: Add to mobile menu as well! -->
|
||||
<ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0">
|
||||
<ng-container *ngFor="let menu of additionalMenuItems">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)">
|
||||
<li class="uk-parent" [class.uk-active]="isTheActiveMenu(menu)" [ngClass]="menu.customClass">
|
||||
<!-- INTERNAL ROOT-->
|
||||
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
|
||||
routerLink="{{menu.route}}"
|
||||
|
|
@ -204,7 +202,7 @@
|
|||
<div class="uk-first-column uk-height-max-medium uk-overflow-auto">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<ng-container *ngFor="let submenu of menu.items">
|
||||
<li [class.uk-active]="isTheActiveMenu(submenu)">
|
||||
<li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass">
|
||||
<!-- INTERNAL CHILD -->
|
||||
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
|
||||
routerLink="{{submenu.route}}"
|
||||
|
|
@ -242,7 +240,7 @@
|
|||
<div class="uk-navbar-right">
|
||||
<ul class="uk-navbar-nav">
|
||||
<ng-container *ngFor="let item of featuredMenuItems">
|
||||
<li [class.uk-active]="isTheActiveMenu(item)">
|
||||
<li [class.uk-active]="isTheActiveMenu(item)" [ngClass]="item.customClass">
|
||||
<a *ngIf="item.type == 'internal' && item.route && isEnabled([item.route], showPage)"
|
||||
routerLink="{{item.route}}"
|
||||
[queryParams]="item.params"
|
||||
|
|
|
|||
Loading…
Reference in New Issue