From df07ad48fd5e96bce2f8f2b27b2dbd0c82bcca53 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Sat, 21 Oct 2017 13:52:40 +0300
Subject: [PATCH] make navigation work with routerLinkActive (#7)

---
 .../components/sidenav/sidenav.component.html |  9 ++--
 .../components/sidenav/sidenav.component.ts   | 41 ++++++++-----------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html
index 65c8f30a8..932e35f5a 100644
--- a/src/app/components/sidenav/sidenav.component.html
+++ b/src/app/components/sidenav/sidenav.component.html
@@ -50,17 +50,14 @@
         </md-menu>
     </div>
 
-    <div class="sidenav__section" *ngFor="let list of menus;">
+    <div class="sidenav__section" *ngFor="let list of navigation">
         <ul class="sidenav-menu">
             <li class="sidenav-menu__item" *ngFor="let item of list">
-                <!-- [routerLinkActive]="'sidenav-menu__item-link--active'" -->
                 <a
                     class="sidenav-menu__item-link"
+                    routerLinkActive="sidenav-menu__item-link--active"
                     [routerLink]="item.route.url"
-                    [ngClass]="{
-                        'disabled': item.disabled,
-                        'sidenav-menu__item-link--active': (currentRoute.includes(item.route.url))
-                     }"
+                    [ngClass]="{ 'disabled': item.disabled }"
                     title="{{ item.title || '' | translate }}">
                     <md-icon>{{ item.icon }}</md-icon>
                     {{ item.label | translate }}
diff --git a/src/app/components/sidenav/sidenav.component.ts b/src/app/components/sidenav/sidenav.component.ts
index 3faf8b3bf..9c74d08f7 100644
--- a/src/app/components/sidenav/sidenav.component.ts
+++ b/src/app/components/sidenav/sidenav.component.ts
@@ -23,7 +23,6 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { AlfrescoContentService } from 'ng2-alfresco-core';
 
 import { BrowsingFilesService } from '../../common/services/browsing-files.service';
-import { Router, NavigationEnd } from '@angular/router';
 
 @Component({
     selector: 'app-sidenav',
@@ -32,71 +31,63 @@ import { Router, NavigationEnd } from '@angular/router';
 })
 export class SidenavComponent implements OnInit, OnDestroy {
     node: MinimalNodeEntryEntity = null;
-    currentRoute = '';
-
     onChangeParentSubscription: Subscription;
 
-    constructor(
-        private router: Router,
-        private browsingFilesService: BrowsingFilesService,
-        private contentService: AlfrescoContentService
-    ) {
-        this.currentRoute = this.router.routerState.snapshot.url;
-    }
-
-    get menus() {
-        const main = [
+    navigation = [
+        [
             {
                 icon: 'folder',
                 label: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL',
                 title: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP',
+                disabled: false,
                 route: { url: '/personal-files' }
             },
             {
                 icon: 'group_work',
                 label: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL',
                 title: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.TOOLTIP',
+                disabled: false,
                 route: { url: '/libraries' }
             }
-        ];
-
-        const secondary = [
+        ],
+        [
             {
                 icon: 'people',
                 label: 'APP.BROWSE.SHARED.SIDENAV_LINK.LABEL',
                 title: 'APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP',
+                disabled: false,
                 route: { url: '/shared' }
             },
             {
                 icon: 'schedule',
                 label: 'APP.BROWSE.RECENT.SIDENAV_LINK.LABEL',
                 title: 'APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP',
+                disabled: false,
                 route: { url: '/recent-files' }
             },
             {
                 icon: 'star',
                 label: 'APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL',
                 title: 'APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP',
+                disabled: false,
                 route: { url: '/favorites' }
             },
             {
                 icon: 'delete',
                 label: 'APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL',
                 title: 'APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP',
+                disabled: false,
                 route: { url: '/trashcan' }
             }
-        ];
+        ]
+    ];
 
-        return [ main, secondary ];
-    }
+    constructor(
+        private browsingFilesService: BrowsingFilesService,
+        private contentService: AlfrescoContentService
+    ) {}
 
     ngOnInit() {
-        this.router.events.subscribe((event) => {
-            if (event instanceof NavigationEnd ) {
-                this.currentRoute = event.url;
-            }
-        });
-
         this.onChangeParentSubscription = this.browsingFilesService.onChangeParent
             .subscribe((node: MinimalNodeEntryEntity) => {
                 this.node = node;