Global navigation on-state gets lost when navigating to a settings page.

[justinscherer]

Expected behaviour

Global navigation item "Settings" should be highlighted in yellow when I go to the a settings page

Actual behaviour

Steps to reproduce the behaviour/error

• Click on any link in the settings-menu, see the settings-item turn grey.

Hints on fixing this issue:

Hint 1 💡 : The navigation-items turn yellow when the active class is set to the element. The html for the mode-bar is here:
https://github.com/ushahidi/platform-client/blob/develop/app/common/directives/mode-bar/mode-bar.html#L42

Hint 2 💡 : ui-sref-active="active" adds the class 'active' to the <li> element, but only for the route /settings. Not the subroutes like "/settings/surveys".

Hint 3 💡 : $state.includes('settings') gives us the information we want instead, this could be combined with ng-class to add the class 'active'. Check for example here: https://github.com/ushahidi/platform-client/blob/develop/app/common/directives/mode-bar/mode-bar.html#L1

Hint 4 💡 : $state needs to be injected to the directive and added to the $scope-variable in order to use it in the template:
https://github.com/ushahidi/platform-client/blob/develop/app/common/directives/mode-bar/mode-bar.directive.js#L9
https://github.com/ushahidi/platform-client/blob/develop/app/common/directives/mode-bar/mode-bar.directive.js#L18
https://github.com/ushahidi/platform-client/blob/develop/app/common/directives/mode-bar/mode-bar.directive.js#L31

Aha! Link: https://ushahiditeam.aha.io/features/PROD-451

[whytejas]

@justinscherer @rowasc Hi Romina, I'm an Outreachy applicant.

I'd like to work on this as a contribution if it's still open. I assume it falls under the "Content disclaimer + work in platform" project#1 ?

[rowasc]

@whytejas hey. Thank you for reaching out. Yes you can work on this. Since content disclaimer will inevitably touch on settings work this is a good fit yea

[whytejas]

@whytejas hey. Thank you for reaching out. Yes you can work on this. Since content disclaimer will inevitably touch on settings work this is a good fit yea

Thanks, I'm going to give this a shot!

[whytejas]

@justinscherer I'm new to Ushahidi , could you please help me reproduce this issue?

To begin with, I've got the Platform API (Backend) and Platform Client (frontend) setup locally. I also setup the Pattern Library for development since this looks like it might touch on the CSS.

However, the local Platform client does not even have the mentioned "Settings" tab (and gear icon) in the sidebar. Am I looking in the right place?