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

Change Sidebar in order to extend with nav-sub functionality

This commit is contained in:
Konstantinos Triantafyllou 2022-11-03 15:50:51 +02:00
parent cdde9bb94c
commit 4f3daa8a3b
2 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -1,20 +1,28 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 500">
<ng-template ngFor [ngForOf]="items" let-item>
<li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-open]="isTheActiveMenuItem(item)"
[class.uk-parent]="item.items.length > 1">
<a *ngIf="item.items.length <= 1" [routerLink]="item.route"
[attr.uk-tooltip]="item.title" [queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
[class.uk-parent]="item.items.length > 0">
<a [routerLink]="item.route?item.route:null" [title]="item.title"
[queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" [svg]="item.icon.svg" [flex]="true"></icon>
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.8" [svg]="item.icon.svg" [flex]="true"></icon>
</div>
<span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
<span *ngIf="item.items?.length > 0"></span>
</div>
</a>
<ul *ngIf="item.items?.length > 0" class="uk-nav-sub">
<li *ngFor="let subItem of item.items"
[class.uk-active]="isTheActiveMenuItem(item, subItem)">
<a [routerLink]="subItem.route?subItem.route:null" [queryParams]="subItem.route?subItem.params:null"
[queryParamsHandling]="subItem.route?queryParamsHandling:null">
<span class="uk-text-truncate">{{subItem.title}}</span></a>
</li>
</ul>
</li>
</ng-template>
</ul>

20
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -1,29 +1,31 @@
import {Component, Input, OnInit} from '@angular/core';
import {AfterViewInit, Component, ElementRef, Input, ViewChild} from '@angular/core';
import {MenuItem} from "../../../sharedComponents/menu";
import {ActivatedRoute, QueryParamsHandling, Router} from "@angular/router";
import {ActivatedRoute, Router} from "@angular/router";
import {DomSanitizer} from "@angular/platform-browser";
import {properties} from "../../../../../environments/environment";
import {LayoutService} from "./layout.service";
declare var UIkit;
@Component({
selector: 'dashboard-sidebar',
templateUrl: 'sideBar.component.html'
})
export class SideBarComponent implements OnInit {
export class SideBarComponent implements AfterViewInit {
@Input() items: MenuItem[] = [];
@Input() activeItem: string = '';
@Input() activeSubItem: string = '';
@Input() specialMenuItem: MenuItem = null;
@Input() queryParamsHandling;
properties;
@ViewChild("nav") nav: ElementRef
public properties = properties;
constructor(private route: ActivatedRoute, private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {
this.properties = properties;
constructor(private route: ActivatedRoute, private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {}
ngAfterViewInit() {
UIkit.nav(this.nav.nativeElement).toggle(this.activeIndex, false);
}
ngOnInit(): void {
}
get currentRoute() {
return {
route: this.router.url.split('?')[0].split('#')[0],