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"> <aside id="sidebar_main">
<div id="sidebar_content"> <div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh"> <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> <ng-template ngFor [ngForOf]="items" let-item>
<li [class.uk-active]="isTheActiveMenuItem(item)" <li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-open]="isTheActiveMenuItem(item)" [class.uk-parent]="item.items.length > 0">
[class.uk-parent]="item.items.length > 1"> <a [routerLink]="item.route?item.route:null" [title]="item.title"
<a *ngIf="item.items.length <= 1" [routerLink]="item.route" [queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null">
[attr.uk-tooltip]="item.title" [queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
<div class="uk-flex uk-flex-middle uk-flex-center"> <div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto"> <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> </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="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> </div>
</a> </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> </li>
</ng-template> </ng-template>
</ul> </ul>

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

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