In my Aurelia application, I have implemented two routes: a list route called Work and a detail route called WorkDetail.
Currently, only the list route is visible in the navigation menu:
Home | *Work* | Contact | . . .
When users navigate to the WorkDetail view, I want the Work route to be highlighted as active in the navigation menu.
To achieve this, I have attempted to set the route as active in the WorkDetail view's activate() callback and as inactive in the deactivate() callback:
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class WorkDetail {
constructor(router) {
this.workRoute = router.routes[2].navModel;
};
activate(params, routeConfig, navigationInstruction) {
this.workRoute.isActive = true;
};
deactivate() {
this.workRoute.isActive = false;
};
}
The issue I am encountering is that the "Work" navigation item does not appear as active on the initial activation. It only becomes active when navigating to another WorkItem.
Why is the nav item only becoming active after subsequent navigations? Is there a better approach to setting a parent or related navigation item as active?
If you are interested, here is a link to my app.js file: https://gist.github.com/alsoicode/37c5699f29c7562d2bf5