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

Introdule new mobile menu

This commit is contained in:
Konstantinos Triantafyllou 2022-11-28 16:25:05 +02:00
parent 64b22f3eb5
commit a4c95bb16b
2 changed files with 70 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
login/userMini.component.ts
View File

@ -39,17 +39,11 @@ import {UserManagementService} from "../services/user-management.service";
</ng-container> </ng-container>
</li> </li>
</ul> </ul>
<ul *ngIf="mobileView" class="uk-nav uk-nav-default"> <ul *ngIf="mobileView" class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
<li> <li [class.uk-parent]="loggedIn">
<span *ngIf="loggedIn" class="uk-flex uk-flex-middle"> <a *ngIf="loggedIn">
<span>{{user.fullname + " "}}</span> {{user.fullname.toString()}}
<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"> </a>
<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>
<a *ngIf="!loggedIn" (click)="logIn()">Sign in</a> <a *ngIf="!loggedIn" (click)="logIn()">Sign in</a>
<ul *ngIf="loggedIn" class="uk-nav-sub"> <ul *ngIf="loggedIn" class="uk-nav-sub">
<ng-container *ngFor="let item of userMenuItems "> <ng-container *ngFor="let item of userMenuItems ">

132
sharedComponents/navigationBar.component.html
View File

@ -24,70 +24,68 @@
</nav> </nav>
<div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'" <div #canvas id="tm-mobile" [attr.uk-offcanvas]="(offCanvasFlip?'flip:'+(offCanvasFlip + ';'):'') + 'overlay: true'"
class="uk-offcanvas"> class="uk-offcanvas">
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<a class="uk-offcanvas-close uk-icon uk-close"> <button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon> <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</a> </button>
<div class="uk-padding"> <ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-top uk-nav-parent-icon" uk-nav>
<ul class="uk-nav uk-nav-default"> <ng-container *ngIf="!onlyTop">
<ng-container *ngIf="!onlyTop"> <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<ng-container *ngFor="let menu of menuItems"> <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> </li>
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a> <ng-container *ngFor="let menu of menuItems">
</li> <li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass"
<li [class.uk-active]="isTheActiveMenu(menu)" *ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
*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 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)"
<a *ngIf="menu.route.length > 0 && (isEnabled([menu.route], showPage) || !menu.routeRequired)" routerLink="{{menu.route}}" (click)="menu.items.length === 0?closeCanvas(canvas):null"
routerLink="{{menu.route}}" (click)="closeCanvas(canvas)" [queryParams]="menu.params"
[queryParams]="menu.params" [fragment]="menu.fragment">{{menu.title}}</a>
[fragment]="menu.fragment">{{menu.title}}</a> <a *ngIf="!menu.route && menu.url"
<a *ngIf="menu.route.length == 0 && menu.url.length > 0" href="{{menu.url}}" (click)="menu.items.length === 0?closeCanvas(canvas):null" [class.custom-external]="menu.target != '_self'"
href="{{menu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="menu.target != '_self'" target="{{menu.target}}">{{menu.title}}</a>
target="{{menu.target}}">{{menu.title}}</a> <a *ngIf="(!menu.route && !menu.url) ||
<a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || (menu.route && menu.routeRequired && !isEnabled([menu.route], showPage)
(menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))"
&& isAtleastOneEnabled(menu.routeRequired, showPage))" (click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
(click)="closeCanvas(canvas)">{{menu.title}}</a> <ul *ngIf="menu.items.length > 0" 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]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass"
<li [class.uk-active]="isTheActiveMenu(submenu)" *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 || submenu.url.length > 0)"
*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">
[class.uk-parent]="submenu.items && submenu.items.length > 0"> <a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
<a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)" 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}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.target != '_self'"
href="{{submenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="submenu.target != '_self'" target="{{submenu.target}}">{{submenu.title}}</a>
target="{{submenu.target}}">{{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 [class.uk-active]="isTheActiveMenu(subsubmenu)" [ngClass]="subsubmenu.customClass">
<li [class.uk-active]="isTheActiveMenu(subsubmenu)"> <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" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
[fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{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}}" (click)="closeCanvas(canvas)" [class.custom-external]="subsubmenu.target != '_self'"
href="{{subsubmenu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="subsubmenu.target != '_self'" target="{{subsubmenu.target}}">{{subsubmenu.title}}</a>
target="{{subsubmenu.target}}">{{subsubmenu.title}}</a> </li>
</li> </ng-container>
</ng-container> </ul>
</ul> </li>
</li> <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> </li>
</li>
</ng-container>
</ng-container> </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> </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> </div>
</div> </div>
@ -130,7 +128,7 @@
<a routerLink="/">Home</a> <a routerLink="/">Home</a>
</li> </li>
<ng-container *ngFor="let menu of menuItems"> <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)"> *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 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 )" <a *ngIf="menu.route.length > 0 && (isEnabled([menu.route], showPage) || !menu.routeRequired )"
@ -149,7 +147,7 @@
<li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && <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]="isTheActiveMenu(submenu)" 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" <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>
@ -158,7 +156,7 @@
target="{{submenu.target}}">{{submenu.title}}</a> target="{{submenu.target}}">{{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 [class.uk-active]="isTheActiveMenu(subsubmenu)"> <li [class.uk-active]="isTheActiveMenu(subsubmenu)" [ngClass]="subsubmenu.customClass">
<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>
@ -180,7 +178,7 @@
<!-- TODO: Add to mobile menu as well! --> <!-- TODO: Add to mobile menu as well! -->
<ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0"> <ng-container *ngIf="isMenuEnabled && additionalMenuItems?.length > 0">
<ng-container *ngFor="let menu of additionalMenuItems"> <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--> <!-- INTERNAL ROOT-->
<a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)" <a *ngIf="menu.type == 'internal' && menu.route && isEnabled([menu.route], showPage)"
routerLink="{{menu.route}}" routerLink="{{menu.route}}"
@ -204,7 +202,7 @@
<div class="uk-first-column uk-height-max-medium uk-overflow-auto"> <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 [class.uk-active]="isTheActiveMenu(submenu)"> <li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass">
<!-- INTERNAL CHILD --> <!-- INTERNAL CHILD -->
<a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)" <a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
routerLink="{{submenu.route}}" routerLink="{{submenu.route}}"
@ -242,7 +240,7 @@
<div class="uk-navbar-right"> <div class="uk-navbar-right">
<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)"> <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"