Merge pull request #3286 from CVEProject/rl-2783-center-highlight

Resolves #2783 - center highlight on expand/collapse buttons (int-main)
CVEProject · Dec 2, 2024 · 38ee303 · 38ee303
2 parents 481b48d + 1828734
commit 38ee303
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/NavigationSidebar.vue b/src/components/NavigationSidebar.vue
@@ -18,18 +18,17 @@
           <button class="button is-text cve-button-submenu-toggle"
             @click="submenuObj.hasOwnProperty('items') && toggleSubmenuItem(`/${nav.path}/${submenuObj.path}`)"
             :class="{'is-hidden': !submenuObj.hasOwnProperty('items')}"
-            :aria-expanded="selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`) ? 'true' : 'false'"
+            :aria-expanded="isExpanded(submenuObj) ? 'true' : 'false'"
             :aria-controls="submenuObj.id + 'nav'">
             <span class="icon cve-icon-xxs">
-              <p :id="'navExpandCollapseAltText' + submenuObj.id" class="is-hidden">
-                {{!selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`) ? 'collapse' : 'expand'}}
-              </p>
-              <font-awesome-icon class="icon" :icon="selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`) ? 'minus' : 'plus'"
+              <font-awesome-icon class="icon"
+                :icon="isExpanded(submenuObj) ? 'minus' : 'plus'"
+                :title="isExpanded(submenuObj) ? 'collapse' : 'expand'"
                 aria-hidden="false" focusable="true" :aria-labelledby="'navExpandCollapseAltText' + submenuObj.id"/>
             </span>
           </button>
         </span>
-        <ul v-if="selectedSubmenu.includes(`/${nav.path}/${submenuObj.path}`)" :id="submenuObj.id + 'nav'">
+        <ul v-if="isExpanded(submenuObj)" :id="submenuObj.id + 'nav'">
           <li v-for="(submenuItem, label) in submenuObj.items" :key="`${submenuObj.id}-${label}`">
             <router-link :class="isExactPath(`/${nav.path}/${submenuObj.path}#${submenuItem.anchorId}`) ? '' : 'cve-not-active-link'"
               :to="`/${nav.path}/${submenuObj.path}#${submenuItem.anchorId}`" >{{ submenuItem.label }}</router-link>
@@ -60,6 +59,9 @@ export default {
     };
   },
   methods: {
+    isExpanded(submenuObj) {
+      return this.selectedSubmenu.includes(`/${this.nav.path}/${submenuObj.path}`);
+    },
     toggleSubmenuItem(path) {
       if (this.selectedSubmenu.includes(path)) {
         const index = this.selectedSubmenu.indexOf(path);