purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added exactMatch parameter to the navigation items for correctly highlighting them

Browse Source
This commit is contained in:
Sercan Yemen 2017-11-04 13:39:18 +03:00
parent 99d9552813
commit 0fd8a75f7d
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html
View File

@ -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> <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-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" <span class="nav-link-badge" *ngIf="item.badge"

3
src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -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> <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-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" <span class="nav-link-badge" *ngIf="item.badge"

20
src/app/navigation.model.ts
View File

@ -45,28 +45,32 @@ export class NavigationModel
'url' : '/apps/e-commerce/dashboard' 'url' : '/apps/e-commerce/dashboard'
}, },
{ {
'id' : 'dashboard', 'id' : 'products',
'title' : 'Products', 'title' : 'Products',
'type' : 'item', 'type' : 'item',
'url' : '/apps/e-commerce/products' 'url' : '/apps/e-commerce/products',
'exactMatch': true
}, },
{ {
'id' : 'dashboard', 'id' : 'productDetail',
'title' : 'Product Detail', 'title' : 'Product Detail',
'type' : 'item', 'type' : 'item',
'url' : '/apps/e-commerce/products/1/printed-dress' 'url' : '/apps/e-commerce/products/1/printed-dress',
'exactMatch': true
}, },
{ {
'id' : 'dashboard', 'id' : 'orders',
'title' : 'Orders', 'title' : 'Orders',
'type' : 'item', 'type' : 'item',
'url' : '/apps/e-commerce/orders' 'url' : '/apps/e-commerce/orders',
'exactMatch': true
}, },
{ {
'id' : 'dashboard', 'id' : 'orderDetail',
'title' : 'Order Detail', 'title' : 'Order Detail',
'type' : 'item', 'type' : 'item',
'url' : '/apps/e-commerce/orders/1' 'url' : '/apps/e-commerce/orders/1',
'exactMatch': true
} }
] ]
}, },