@rancher/shell 0.3.22 → 0.3.24

package/components/nav/Group.vue

@@ -69,7 +69,7 @@ export default {
         if (overviewRoute && grp.overview) {
           const route = this.$router.resolve(overviewRoute || {});
 
-          return this.$route.fullPath === route?.route?.fullPath;
+          return this.$route.fullPath.split('#')[0] === route?.route?.fullPath;
         }
       }
 
@@ -96,8 +96,14 @@ export default {
       // Don't auto-select first group entry if we're already expanded and contain the currently-selected nav item
       if (this.hasActiveRoute() && this.isExpanded) {
         return;
-      }
+      } else {
+        // Remove all active class if click on group header and not active route
+        const headerEl = document.querySelectorAll('.header');
 
+        headerEl.forEach((el) => {
+          el.classList.remove('active');
+        });
+      }
       this.expandGroup();
 
       const items = this.group[this.childrenKey];
@@ -132,6 +138,11 @@ export default {
 
     // User clicked on the expander icon, so toggle the expansion so the user can see inside the group
     peek($event) {
+      // Add active class to the current header if click on chevron icon
+      $event.target.parentElement.classList.remove('active');
+      if (this.hasActiveRoute()) {
+        $event.target.parentElement.classList.add('active');
+      }
       this.isExpanded = !this.isExpanded;
       $event.stopPropagation();
     },
@@ -212,7 +223,7 @@ export default {
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle"
-        :class="{'icon-chevron-down': !isExpanded, 'icon-chevron-up': isExpanded}"
+        :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
         @click="peek($event, true)"
       />
     </div>
@@ -267,17 +278,18 @@ export default {
     position: relative;
     cursor: pointer;
     color: var(--body-text);
+    height: 33px;
 
-    > H6 {
+    H6 {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
-      font-size: 14px;
+      font-size: 16px;
     }
 
     > A {
       display: block;
-      padding-left: 10px;
+      padding-left: 16px;
       &:hover{
           text-decoration: none;
         }
@@ -285,20 +297,14 @@ export default {
         outline:none;
       }
       > H6 {
-        font-size: 14px;
         text-transform: none;
       }
     }
-
     &.active {
       background-color: var(--nav-active);
     }
   }
 
-  .body {
-    margin-left: 10px;
-  }
-
   .accordion {
     .header {
       &:hover:not(.noHover) {
@@ -323,18 +329,21 @@ export default {
         }
 
         > H6 {
-          font-size: 14px;
           text-transform: none;
-          padding-left: 10px;
+          padding-left: 16px;
         }
 
         > I {
           position: absolute;
           right: 0;
           top: 0;
-          padding: 10px 7px 9px 7px;
+          padding: 10px 10px 9px 7px;
           user-select: none;
         }
+
+        &:has(> a.nuxt-link-active) {
+          background: var(--nav-active);
+        }
       }
 
       > .body {
@@ -344,20 +353,19 @@ export default {
 
     &.depth-1 {
       > .header {
+        padding-left: 20px;
         > H6 {
-          font-size: 13px;
-          line-height: 16px;
+          line-height: 18px;
           padding: 8px 0 7px 5px !important;
         }
         > I {
-          padding: 9px 7px 8px 7px !important;
+          padding: 10px 7px 9px 7px !important;
         }
       }
     }
 
     &:not(.depth-0) {
       > .header {
-        padding-left: 10px;
         > H6 {
           // Child groups that aren't linked themselves
           display: inline-block;
@@ -372,18 +380,29 @@ export default {
         }
       }
     }
+
+    &.expanded:has(> .active),
+    &.expanded:has(> ul li.nuxt-link-active) {
+      background: var(--nav-active);
+    }
+
+    &.expanded:has(> ul li.root) {
+      background: transparent;
+    }
   }
 
- .body ::v-deep > .child.nuxt-link-active,
- .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.nuxt-link-active,
+  .header ::v-deep > .child.nuxt-link-exact-active {
     padding: 0;
 
     A, A I {
-      color: var(--body-text);
+      color: var(--primary-hover-text);
     }
 
     A {
-      background-color: var(--nav-active);
+      color: var(--primary-hover-text);
+      background-color: var(--primary-hover-bg);
+      font-weight: bold;
     }
   }
 
@@ -391,11 +410,22 @@ export default {
     A {
       border-left: solid 5px transparent;
       line-height: 16px;
-      font-size: 13px;
+      font-size: 14px;
+      padding-left: 24px;
+      display: flex;
+      justify-content: space-between;
     }
 
     A:focus {
       outline: none;
     }
+
+    &.root {
+      background: transparent;
+      A {
+        padding-left: 14px;
+      }
+    }
   }
+
 </style>

package/components/nav/Header.vue

@@ -715,7 +715,7 @@ export default {
     }
 
     > .menu-spacer {
-      flex: 0 0 calc(var(--header-height) + 10px);
+      flex: 0 0 15px;
 
       &.isSingleProduct  {
         display: flex;