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 ">

46
sharedComponents/navigationBar.component.html
View File

@ -24,34 +24,33 @@
</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">
<ng-container *ngFor="let menu of menuItems">
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a> <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
</li> </li>
<li [class.uk-active]="isTheActiveMenu(menu)" <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)"> *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.length > 0 && (isEnabled([menu.route], showPage) || !menu.routeRequired)" <a *ngIf="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
routerLink="{{menu.route}}" (click)="closeCanvas(canvas)" routerLink="{{menu.route}}" (click)="menu.items.length === 0?closeCanvas(canvas):null"
[queryParams]="menu.params" [queryParams]="menu.params"
[fragment]="menu.fragment">{{menu.title}}</a> [fragment]="menu.fragment">{{menu.title}}</a>
<a *ngIf="menu.route.length == 0 && menu.url.length > 0" <a *ngIf="!menu.route && menu.url"
href="{{menu.url}}" (click)="closeCanvas(canvas)" [class.custom-external]="menu.target != '_self'" href="{{menu.url}}" (click)="menu.items.length === 0?closeCanvas(canvas):null" [class.custom-external]="menu.target != '_self'"
target="{{menu.target}}">{{menu.title}}</a> target="{{menu.target}}">{{menu.title}}</a>
<a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || <a *ngIf="(!menu.route && !menu.url) ||
(menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) (menu.route && menu.routeRequired && !isEnabled([menu.route], showPage)
&& isAtleastOneEnabled(menu.routeRequired, showPage))" && isAtleastOneEnabled(menu.routeRequired, showPage))"
(click)="closeCanvas(canvas)">{{menu.title}}</a> (click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
<ul class="uk-nav-sub"> <ul *ngIf="menu.items.length > 0" 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)" <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)" *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)"
@ -62,7 +61,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" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a> [fragment]="subsubmenu.fragment" (click)="closeCanvas(canvas)">{{subsubmenu.title}}</a>
@ -90,7 +89,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="main-menu" class="uk-visible@l"> <div id="main-menu" class="uk-visible@l">
<div *ngIf="activeHeader" [class.uk-light]='activeHeader.darkBg'> <div *ngIf="activeHeader" [class.uk-light]='activeHeader.darkBg'>
<div class="uk-navbar-container" uk-sticky="media@m"> <div class="uk-navbar-container" uk-sticky="media@m">
@ -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"