Fix app bar overlaps issue (rancher#9685)

* Fixed app bar overlaps issue and active group highlight bug in firefox * Fix group highlight for Cluster Management and other section * Fixed overlap issues in home and other pages * Fixed lint and revert test changes * Added getter for showTopLevelMenu * Added a showTopLevelMenu getter * Fixed lint
momesgin · Sep 13, 2023 · d1e8740 · d1e8740
1 parent 2ffe8d3
commit d1e8740
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 23 deletions.
diff --git a/shell/components/nav/Group.vue b/shell/components/nav/Group.vue
@@ -49,6 +49,10 @@ export default {
   },
 
   computed: {
+    isGroupActive() {
+      return this.isOverview || (this.hasActiveRoute() && this.isExpanded && this.showHeader);
+    },
+
     hasChildren() {
       return this.group.children?.length > 0;
     },
@@ -199,7 +203,7 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren}"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive}"
   >
     <div
       v-if="showHeader"
@@ -349,6 +353,10 @@ export default {
       > .body {
         margin-left: 0;
       }
+
+      &.group-highlight {
+        background: var(--nav-active);
+      }
     }
 
     &.depth-1 {
@@ -380,15 +388,6 @@ 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,

diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
@@ -60,8 +60,8 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['clusterReady', 'isExplorer', 'isMultiCluster', 'isRancher', 'currentCluster',
-      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester']),
+    ...mapGetters(['clusterReady', 'isExplorer', 'isRancher', 'currentCluster',
+      'currentProduct', 'backToRancherLink', 'backToRancherGlobalLink', 'pageActions', 'isSingleProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
     ...mapGetters('type-map', ['activeProducts']),
 
     appName() {
@@ -338,7 +338,7 @@ export default {
     data-testid="header"
   >
     <div>
-      <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
+      <TopLevelMenu v-if="showTopLevelMenu" />
     </div>
     <div
       class="menu-spacer"

diff --git a/shell/layouts/default.vue b/shell/layouts/default.vue
@@ -70,7 +70,7 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['clusterId', 'currentProduct', 'isRancherInHarvester']),
+    ...mapGetters(['clusterId', 'currentProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
 
@@ -237,7 +237,7 @@ export default {
     <div
       v-if="managementReady"
       class="dashboard-content"
-      :class="{[pinClass]: true}"
+      :class="{[pinClass]: true, 'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header />
       <SideNav
@@ -318,12 +318,12 @@ export default {
     overflow-y: auto;
     min-height: 0px;
 
-    &:has(.side-menu) {
+    &.dashboard-padding-left {
     padding-left: $app-bar-collapsed-width;
 
-    .overlay-content-mode {
-      left: calc(var(--nav-width) + $app-bar-collapsed-width);
-    }
+      .overlay-content-mode {
+        left: calc(var(--nav-width) + $app-bar-collapsed-width);
+      }
    }
 
     &:has(.side-menu) {

diff --git a/shell/layouts/home.vue b/shell/layouts/home.vue
@@ -8,7 +8,7 @@ import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
 
@@ -36,6 +36,7 @@ export default {
   computed: {
     themeShortcut: mapPref(THEME_SHORTCUT),
     ...mapState(['managementReady']),
+    ...mapGetters(['showTopLevelMenu']),
   },
 
   methods: {
@@ -57,7 +58,10 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
 
-    <div class="dashboard-content">
+    <div
+      class="dashboard-content"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
+    >
       <Header
         v-if="managementReady"
         :simple="true"

diff --git a/shell/layouts/plain.vue b/shell/layouts/plain.vue
@@ -12,6 +12,7 @@ import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
+import { mapGetters } from 'vuex';
 
 export default {
 
@@ -40,7 +41,10 @@ export default {
     };
   },
 
-  computed: { themeShortcut: mapPref(THEME_SHORTCUT) },
+  computed: {
+    themeShortcut: mapPref(THEME_SHORTCUT),
+    ...mapGetters(['showTopLevelMenu']),
+  },
 
   methods: {
     toggleTheme() {
@@ -59,7 +63,10 @@ export default {
     <AwsComplianceBanner />
     <AzureWarning />
 
-    <div class="dashboard-content">
+    <div
+      class="dashboard-content"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
+    >
       <Header :simple="true" />
       <main class="main-layout">
         <IndentedPanel class="pt-20">

diff --git a/shell/store/index.js b/shell/store/index.js
@@ -568,6 +568,10 @@ export const getters = {
     return getters['isSingleProduct'] && cluster.isHarvester && !getters['isRancherInHarvester'];
   },
 
+  showTopLevelMenu(getters) {
+    return getters['isRancherInHarvester'] || getters['isMultiCluster'] || !getters['isSingleProduct'];
+  },
+
   targetRoute(state) {
     return state.targetRoute;
   },