From 0fd8a75f7db2e567a32d5ee39cb3ace73aaa48b8 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Sat, 4 Nov 2017 13:39:18 +0300
Subject: [PATCH] Added exactMatch parameter to the navigation items for
 correctly highlighting them

---
 .../nav-horizontal-item.component.html        |  3 +-
 .../nav-item/nav-vertical-item.component.html |  3 +-
 src/app/navigation.model.ts                   | 36 ++++++++++---------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
index 559fe6a3..68b37b53 100644
--- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
@@ -1,4 +1,5 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
     <span class="nav-link-badge" *ngIf="item.badge"
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
index 97a706fd..33ec1c81 100644
--- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
+++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
@@ -1,4 +1,5 @@
-<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
+   [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
     <span class="nav-link-badge" *ngIf="item.badge"
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 9ca04743..f8bbd401 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -45,28 +45,32 @@ export class NavigationModel
                                 'url'  : '/apps/e-commerce/dashboard'
                             },
                             {
-                                'id'   : 'dashboard',
-                                'title': 'Products',
-                                'type' : 'item',
-                                'url'  : '/apps/e-commerce/products'
+                                'id'        : 'products',
+                                'title'     : 'Products',
+                                'type'      : 'item',
+                                'url'       : '/apps/e-commerce/products',
+                                'exactMatch': true
                             },
                             {
-                                'id'   : 'dashboard',
-                                'title': 'Product Detail',
-                                'type' : 'item',
-                                'url'  : '/apps/e-commerce/products/1/printed-dress'
+                                'id'        : 'productDetail',
+                                'title'     : 'Product Detail',
+                                'type'      : 'item',
+                                'url'       : '/apps/e-commerce/products/1/printed-dress',
+                                'exactMatch': true
                             },
                             {
-                                'id'   : 'dashboard',
-                                'title': 'Orders',
-                                'type' : 'item',
-                                'url'  : '/apps/e-commerce/orders'
+                                'id'        : 'orders',
+                                'title'     : 'Orders',
+                                'type'      : 'item',
+                                'url'       : '/apps/e-commerce/orders',
+                                'exactMatch': true
                             },
                             {
-                                'id'   : 'dashboard',
-                                'title': 'Order Detail',
-                                'type' : 'item',
-                                'url'  : '/apps/e-commerce/orders/1'
+                                'id'        : 'orderDetail',
+                                'title'     : 'Order Detail',
+                                'type'      : 'item',
+                                'url'       : '/apps/e-commerce/orders/1',
+                                'exactMatch': true
                             }
                         ]
                     },