Add hasInternalSidebar variable in layout service. Sidebar: Fix keep enable subItem on parent close.

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -28,6 +28,10 @@ export class LayoutService {
    *  Add hasAdminMenu: true on data of route config, if global sidebar should be used.
    */
   private hasAdminMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  /**
+   *  Add hasInternalSidebar: true on data of route config, if internal sidebar should be used.
+   */
+  private hasInternalSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   /**
    *  Add isFrontPage: true on data of route config, if current route is for front page.
    */
@@ -93,6 +97,12 @@ export class LayoutService {
         } else {
           this.setHasAdminMenu(false);
         }
+        if (data['hasInternalSidebar'] !== undefined &&
+          data['hasInternalSidebar'] === true) {
+          this.setHasInternalSidebar(true);
+        } else {
+          this.setHasInternalSidebar(false);
+        }
         if (data['isFrontPage'] !== undefined &&
           data['isFrontPage'] === true) {
           this.setFrontPage(true);
@@ -145,7 +155,6 @@ export class LayoutService {
     this.hasHeaderSubject.next(value);
   }
   
-  
   get hasAdminMenu(): Observable<boolean> {
     return this.hasAdminMenuSubject.asObservable();
   }
@@ -154,6 +163,14 @@ export class LayoutService {
     this.hasAdminMenuSubject.next(value);
   }
   
+  get hasInternalSidebar(): Observable<boolean> {
+    return this.hasInternalSidebarSubject.asObservable();
+  }
+  
+  setHasInternalSidebar(value: boolean) {
+    this.hasInternalSidebarSubject.next(value);
+  }
+  
   get isFrontPage(): Observable<boolean> {
     return this.isFrontPageSubject.asObservable();
   }

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -1,15 +1,15 @@
 <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 #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 500">
+    <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" style="min-height: 30vh">
+      <ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
         <ng-template ngFor [ngForOf]="items" let-item>
           <li [class.uk-active]="isTheActiveMenuItem(item)"
               [class.uk-parent]="item.items.length > 0">
-            <a [routerLink]="item.route?item.route:null" [title]="item.title"
+            <a [routerLink]="getItemRoute(item)" [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" ratio="0.8" [svg]="item.icon.svg" [flex]="true"></icon>
+                  <icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [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>
@@ -19,7 +19,7 @@
               <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">
+                   [queryParamsHandling]="subItem.route?queryParamsHandling:null" [title]="subItem.title">
                   <span class="uk-text-truncate">{{subItem.title}}</span></a>
               </li>
             </ul>

dashboard/sharedComponents/sidebar/sideBar.component.ts

@@ -37,6 +37,15 @@ export class SideBarComponent implements AfterViewInit {
     return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
   }
   
+  getItemRoute(item: MenuItem) {
+    if(this.activeSubItem && item.items.length > 0) {
+      let subItem = item.items.find(subItem => subItem._id === this.activeSubItem);
+      return subItem?subItem.route:(item.route?item.route:null);
+    } else {
+      return item.route?item.route:null;
+    }
+  }
+  
   isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
     if (this.activeItem || this.activeSubItem) {
       return (!subItem && this.activeItem === item._id) ||

utils/transition-group/transition-group.component.ts

@@ -1,5 +1,13 @@
 import {TransitionGroupItemDirective} from "./transition-group-item.directive";
-import {AfterViewInit, Component, ContentChildren, OnDestroy, QueryList, ViewEncapsulation} from "@angular/core";
+import {
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  OnDestroy,
+  QueryList,
+  ViewEncapsulation
+} from "@angular/core";
 import {Subscription} from "rxjs";
 import {THREE} from "@angular/cdk/keycodes";
 
@@ -22,6 +30,8 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
   private disabled: boolean = false;
   private subscription: Subscription;
 
+  constructor(public element: ElementRef) {}
+  
   ngAfterViewInit() {
     this.init();
     this.subscription = this.items.changes.subscribe(items => {