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

[Library]: Sidebar: add uk-active on active route 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@57387 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2019-10-16 10:45:01 +00:00
parent 42663a15ea
commit ea333e3666
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
sharedComponents/sidebar/sideBar.component.html
View File

@ -1,30 +1,30 @@
<ul class="uk-nav uk-nav-default sidebar uk-overflow-auto uk-margin-left uk-margin-large-top" style="max-height: 85vh">
<li class="uk-nav-header" *ngFor="let menu of menuItems">
<li class="uk-nav-header" *ngFor="let menu of menuItems" [class.uk-active]="isTheActiveMenu(menu.rootItem.route, menu.rootItem.params)">
<a *ngIf="menu.rootItem.route && menu.rootItem.route != ''"
[routerLink]="menu.rootItem.route" class="uk-link" routerLinkActive="" [routerLinkActiveOptions]="{ exact: true }" [queryParams]=menu.rootItem.params>
[routerLink]="menu.rootItem.route" class="uk-link" [queryParams]=menu.rootItem.params>
<span><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
</a>
<a *ngIf="(!menu.rootItem.route || menu.rootItem.route == '') && (menu.rootItem.url && menu.rootItem.url != '')"
[href]="menu.rootItem.url" class="uk-link" routerLinkActive="" [routerLinkActiveOptions]="{ exact: true }" target="_blank">
[href]="menu.rootItem.url" class="uk-link" target="_blank">
<span><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
</a>
<span *ngIf="!menu.rootItem.route || menu.rootItem.route == ''"><span class="uk-margin-small-right uk-icon" [attr.uk-icon]=menu.ukIcon></span> {{menu.rootItem.title}}</span>
<ul *ngIf="menu.items.length > 0" class="uk-nav-sub uk-margin-left">
<li *ngFor="let item of menu.items">
<a *ngIf="item.rootItem.route && item.rootItem.route != ''" [routerLink]="item.rootItem.route" class="uk-link" routerLinkActive="" [routerLinkActiveOptions]="{ exact: true }" [queryParams]=item.rootItem.params>
<li *ngFor="let item of menu.items" [class.uk-active]="isTheActiveMenu(item.rootItem.route, item.rootItem.params)">
<a *ngIf="item.rootItem.route && item.rootItem.route != ''" [routerLink]="item.rootItem.route" class="uk-link" [queryParams]=item.rootItem.params>
<span>{{item.rootItem.title}}</span>
</a>
<a *ngIf="(!item.rootItem.route || item.rootItem.route == '') && (item.rootItem.url && item.rootItem.url != '')"
[href]="item.rootItem.url" [routerLinkActiveOptions]="{ exact: true }" class="uk-link" routerLinkActive="" target="_blank">
[href]="item.rootItem.url" class="uk-link" target="_blank">
<span>{{item.rootItem.title}}</span>
</a>
<ul *ngIf="item.items.length > 0" class="uk-nav-sub uk-margin-left">
<li *ngFor="let subItem of item.items">
<a *ngIf="subItem.route && subItem.route != ''" [routerLink]="subItem.route" [routerLinkActiveOptions]="{ exact: true }" class="uk-link" routerLinkActive="" [queryParams]=subItem.params>
<li *ngFor="let subItem of item.items" [class.uk-active]="isTheActiveMenu(subItem.route, subItem.params)">
<a *ngIf="subItem.route && subItem.route != ''" [routerLink]="subItem.route" class="uk-link" [queryParams]=subItem.params>
<span>{{subItem.title}}</span>
</a>
<a *ngIf="(!subItem.route || subItem.route == '') && (subItem.url && subItem.url != '')"
[href]="subItem.url" [routerLinkActiveOptions]="{ exact: true }" class="uk-link" routerLinkActive="" target="_blank">
[href]="subItem.url" class="uk-link" target="_blank">
<span>{{subItem.title}}</span>
</a>
<span *ngIf="!subItem.route || subItem.route == ''">{{subItem.title}}</span>

28
sharedComponents/sidebar/sideBar.component.ts
View File

@ -1,13 +1,33 @@
import {Component, Input} from '@angular/core';
import {SideMenuItem} from "../menu";
import {Component, Input, OnInit} from '@angular/core';
import {RootMenuItem, SideMenuItem} from '../menu';
import {ActivatedRoute, Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'sidebar',
templateUrl: 'sideBar.component.html'
})
export class SideBarComponent {
export class SideBarComponent implements OnInit {
@Input() communityId: string = '';
@Input() menuItems: SideMenuItem[] = [];
currentParams: any = {};
constructor() {}
constructor(private router: Router,
private route: ActivatedRoute) {
}
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
this.currentParams = params;
});
}
private getCurrentRoute(): string {
return this.router.url.split('?')[0];
}
isTheActiveMenu(route: string, params: any): boolean {
return route === this.getCurrentRoute() &&
(!params || JSON.stringify(this.currentParams) === JSON.stringify(params));
}
}