Fixed header highlight issue when not expanded (rancher#9710)

yonasberhe23 · Sep 15, 2023 · b25c24b · b25c24b
1 parent 67e6691
commit b25c24b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 24 deletions.
diff --git a/shell/components/nav/Group.vue b/shell/components/nav/Group.vue
@@ -144,7 +144,7 @@ export default {
     peek($event) {
       // Add active class to the current header if click on chevron icon
       $event.target.parentElement.classList.remove('active');
-      if (this.hasActiveRoute()) {
+      if (this.hasActiveRoute() && this.isExpanded) {
         $event.target.parentElement.classList.add('active');
       }
       this.isExpanded = !this.isExpanded;
@@ -288,38 +288,42 @@ export default {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
-      font-size: 16px;
+      font-size: 14px;
     }
 
     > A {
       display: block;
       padding-left: 16px;
       &:hover{
-          text-decoration: none;
-        }
+        text-decoration: none;
+      }
       &:focus{
         outline:none;
       }
       > H6 {
         text-transform: none;
       }
     }
-    &.active {
-      background-color: var(--nav-active);
-    }
   }
 
   .accordion {
     .header {
-      &:hover:not(.noHover) {
-        background-color: var(--nav-hover);
-      }
+      &.active {
+        color: var(--primary-hover-text);
+        background-color: var(--primary-hover-bg);
+
+        h6 {
+          font-weight: bold;
+          color: var(--primary-hover-text);
+        }
 
-      > I {
         &:hover {
-          background-color: var(--nav-expander-hover);
+          background-color: var(--primary-hover-bg);
         }
       }
+      &:hover:not(.active) {
+        background-color: var(--nav-hover);
+      }
     }
   }
 
@@ -344,10 +348,6 @@ export default {
           padding: 10px 10px 9px 7px;
           user-select: none;
         }
-
-        &:has(> a.nuxt-link-active) {
-          background: var(--nav-active);
-        }
       }
 
       > .body {

diff --git a/shell/layouts/default.vue b/shell/layouts/default.vue
@@ -326,14 +326,6 @@ export default {
       }
    }
 
-    &:has(.side-menu) {
-    padding-left: $app-bar-collapsed-width;
-
-    .overlay-content-mode {
-      left: calc(var(--nav-width) + $app-bar-collapsed-width);
-    }
-   }
-
     &.pin-right {
       grid-template-areas:
         "header  header  header"