Change sidebar active menu

dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts

@@ -8,11 +8,11 @@ import { properties } from 'src/environments/environment';
 @Component({
   selector: 'admin-tabs',
   template: `    
-    <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m">
+    <ul class="uk-tab uk-flex uk-flex-center uk-flex-left@m">
       <li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals"><span class="title">Portals</span></a></li>
       <li [class.uk-active]="tab === 'page'"><a  routerLink="../pages"><span class="title">Pages</span></a></li>
       <li [class.uk-active]="tab === 'entity'"><a  routerLink="../entities"><span class="title">Entities</span></a></li>
-			<li *ngIf="env === 'development' && portal" [class.uk-active]="tab === 'menu'"><a  routerLink="../menu"><span class="title">Menu</span></a></li>
+			<li *ngIf="env === 'development' && portal && portal === 'connect'" [class.uk-active]="tab === 'menu'"><a  routerLink="../menu"><span class="title">Menu</span></a></li>
       <li  *ngIf="isPortalAdmin  && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes"><span class="title">Classes</span></a></li>
     </ul>
   `

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -14,7 +14,7 @@ declare var UIkit;
           </div>
         </div>
       </div>
-      <div id="page_content_inner" class="uk-section uk-container uk-container-large">
+      <div id="page_content_inner" class="uk-section uk-padding-remove-top uk-container uk-container-large">
         <ng-content select="[inner]"></ng-content>
       </div>
     </div>

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -1,6 +1,7 @@
 <aside id="sidebar_main">
   <div id="sidebar_content">
     <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
+      <div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
       <ul class="uk-list uk-nav-parent-icon" uk-nav>
         <ng-template ngFor [ngForOf]="items" let-item let-i="index">
           <li [class.uk-active]="isTheActiveMenuItem(item)"
@@ -9,11 +10,11 @@
             <a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
                [title]="item.title"
                [queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
-              <div  class="uk-grid uk-flex-middle uk-flex-center" uk-grid>
+              <div class="uk-flex uk-flex-middle uk-flex-center">
                 <div *ngIf="item.icon" class="uk-width-auto">
                   <icon class="menu-icon" [svg]="item.icon" [flex]="true"></icon>
                 </div>
-                <span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate">{{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>
               </div>
             </a>
           </li>

dashboard/sharedComponents/sidebar/sideBar.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {MenuItem} from "../../../sharedComponents/menu";
-import {Router} from "@angular/router";
+import {QueryParamsHandling, Router} from "@angular/router";
 import {DomSanitizer} from "@angular/platform-browser";
 import {properties} from "../../../../../environments/environment";
 import {LayoutService} from "./layout.service";
@@ -14,7 +14,7 @@ export class SideBarComponent implements OnInit {
   @Input() activeItem: string = '';
   @Input() activeSubItem: string = '';
   @Input() specialMenuItem: MenuItem = null;
-  @Input() queryParamsHandling = "";
+  @Input() queryParamsHandling;
   properties;
   
   constructor(private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {
@@ -25,6 +25,10 @@ export class SideBarComponent implements OnInit {
   }
   
   
+  get activeIndex(): number {
+    return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
+  }
+  
   isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
     if (this.activeItem || this.activeSubItem) {
       return (!subItem && this.activeItem === item._id) ||

utils/smooth-scroll.ts

@@ -1,5 +1,5 @@
 import {ActivationStart, NavigationEnd, Router} from '@angular/router';
-import {Injectable} from '@angular/core';
+import {Injectable, Type} from '@angular/core';
 import {Subscription} from 'rxjs';
 
 @Injectable({
@@ -9,13 +9,15 @@ export class SmoothScroll {
   private interval;
   private readonly sub;
   private lastComponent;
-  private currentComponent: any;
+  private currentComponent: string;
   
   constructor(private router: Router) {
     if (typeof window !== "undefined") {
       this.sub = router.events.subscribe(event => {
         if (event instanceof ActivationStart) {
-          this.currentComponent = event.snapshot.component;
+          if(event.snapshot.component instanceof Type) {
+            this.currentComponent = event.snapshot.component.name;
+          }
         } else if (event instanceof NavigationEnd) {
           if (this.interval) {
             clearInterval(this.interval);