Fix nav menu issue

https://github.com/rancher/rancher/issues/11737

app/initializers/extend-ember-link.js

@@ -8,15 +8,24 @@ export function initialize(/*application */) {
     // class to the parent element (like <li>{{link-to}}</li>)
     activeParent: false,
 
-    addActiveObserver: function() {
-      if ( this.get('activeParent') ) {
+    addActiveObserver: function () {
+      if (this.get('activeParent')) {
         this.addObserver('active', this, 'activeChanged');
         this.activeChanged();
       }
     }.on('didInsertElement'),
 
+    isOnlyCurrentWhen() {
+      if (!this.get('onlyCurrentWhen')) {
+        return false;
+      }
+      let currentRouteName = this.get('application.currentRouteName');
+      const route = this.get('params.firstObject');
+      return !this.get('onlyCurrentWhen').some(r => currentRouteName.startsWith(r));
+    },
+
     activeChanged() {
-      if ( this.isDestroyed || this.isDestroying ) {
+      if (this.isDestroyed || this.isDestroying) {
         return;
       }
 
@@ -35,7 +44,11 @@ export function initialize(/*application */) {
         }
       }
 
-      this.$().parent().toggleClass('active', !!this.get('active'));
+      if (this.get('active') && !this.isOnlyCurrentWhen()) {
+        this.$().parent().toggleClass('active', true);
+      } else {
+        this.$().parent().toggleClass('active', false);
+      }
     }
   });
 

app/instance-initializers/nav.js

@@ -8,7 +8,7 @@ const rootNav = [
     localizedLabel: 'nav.containers.tab',
     route: 'authenticated.project',
     ctx: [getProjectId],
-    moreCurrentWhen: ['containers','ingresses',/*'dns',*/'volumes', 'authenticated.project.pipeline'],
+    onlyCurrentWhen: ['containers','ingresses','authenticated.project.dns','volumes', 'authenticated.project.pipeline'],
     resource: ["workload", "ingress", "dnsrecord"],
     resourceScope: 'project',
   },

lib/shared/addon/components/link-to-as-attrs/component.js

@@ -8,10 +8,10 @@ export default LinkComponent.extend({
 
   'current-when': function() {
     let base = this.get('qualifiedRouteName');
-    if ( this.get('moreCurrentWhen.length') ) {
-      return this.get('moreCurrentWhen').concat(base).join(' ');
+    if ( this.get('onlyCurrentWhen.length') ) {
+      return this.get('onlyCurrentWhen').concat(base).join(' ');
     }
-  }.property('moreCurrentWhen'),
+  }.property('onlyCurrentWhen'),
 
   queryParams: computed('attrs.qp.value', function(){
     return {

lib/shared/addon/components/page-header/template.hbs

@@ -16,7 +16,7 @@
                   item.route
                   models=item.ctx
                   qp=item.qp
-                  moreCurrentWhen=item.moreCurrentWhen
+                  onlyCurrentWhen=item.onlyCurrentWhen
                   activeParent=true
                   class="dropdown-toggle"
                   role="button"
@@ -44,7 +44,7 @@
                       models=subitem.ctx
                       qp=subitem.qp
                       activeParent=true
-                      moreCurrentWhen=subitem.moreCurrentWhen
+                      onlyCurrentWhen=subitem.onlyCurrentWhen
                       submenuItem=true
                     }}
                       <i class="{{subitem.icon}}"/> {{maybe-t subitem.localizedLabel subitem.label}}
@@ -71,7 +71,7 @@
               models=item.ctx
               qp=item.qp
               activeParent=true
-              moreCurrentWhen=item.moreCurrentWhen
+              onlyCurrentWhen=item.onlyCurrentWhen
               class="nav-link"
             }}
               {{maybe-t item.localizedLabel item.label}}