From 4f3daa8a3b64bc1f527c22d43c089a8966fd5025 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 3 Nov 2022 15:50:51 +0200
Subject: [PATCH] Change Sidebar in order to extend with nav-sub functionality

---
 .../sidebar/sideBar.component.html            | 20 +++++++++++++------
 .../sidebar/sideBar.component.ts              | 20 ++++++++++---------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html
index 4b1331aa..1cf5e2d4 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.html
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.html
@@ -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>
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts
index fba8c983..baab7712 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.ts
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.ts
@@ -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],