PrimaryNavigation: prevent "ghost" submenus from appearing to the right of "Resources & Support"

Author: rlxdev

src/assets/data/navigation.json

@@ -4,6 +4,7 @@
     "label": "About",
     "path": "About",
     "primaryNavPath": "/About/Overview",
+    "primarySubmenu": true,
     "submenu": {
       "Overview": {
         "id": "1.0",
@@ -107,6 +108,7 @@
     "label": "Partner Information",
     "path": "PartnerInformation",
     "primaryNavPath": "/PartnerInformation/Partner",
+    "primarySubmenu": true,
     "submenu": {
       "Partner": {
         "id": "2.0",
@@ -147,6 +149,7 @@
     "label": "Program Organization",
     "path": "ProgramOrganization",
     "primaryNavPath": "/ProgramOrganization/Structure",
+    "primarySubmenu": true,
     "submenu": {
       "Structure": {
         "id": "3.0",
@@ -264,6 +267,7 @@
       "label": "CVE List Downloads",
       "path": "Downloads",
       "primaryNavPath": "/Downloads",
+      "primarySubmenu": false,
       "submenu": {
         "Downloads": {
           "submenu": {
@@ -286,6 +290,7 @@
     "label": "Resources & Support",
     "path": "ResourcesSupport",
     "primaryNavPath": "/ResourcesSupport/Resources",
+    "primarySubmenu": true,
     "submenu": {
       "Resources": {
         "id": "5.0",
@@ -505,6 +510,7 @@
       "label": "Report/Request",
       "path": "ReportRequest",
       "primaryNavPath": "/ReportRequest/ReportRequestForNonCNAs",
+      "primarySubmenu": true,
       "submenu": {
         "CNAs": {
           "id": "8.0",
@@ -531,4 +537,4 @@
       }
     }
   }
-}
+}

src/components/PrimaryNavigation.vue

@@ -34,15 +34,15 @@
             <span
               class="is-flex cve-touch-devices-menu-toggle-button" 
               style="justify-content: space-between; width: inherit"
-              v-if="menuItemLabel !==  'Report/Request' && menuObj.hasOwnProperty('primaryNavPath') && menuObj.hasOwnProperty('submenu')"
+              v-if="isPrimaryMenuItem(menuObj)"
             >
               <a
                 :href="menuObj.primaryNavPath"
                 class="navbar-link is-arrowless"
               >
                 {{menuItemLabel}}
               </a>
-              <button v-if="menuItemLabel != 'Downloads'"
+              <button v-if="hasSubmenu(menuObj)"
                 class="is-hidden-desktop button is-text cve-button-submenu-toggle" @click="selectedTouchScreenMenu = menuItemLabel">
                 <span class="icon is-small">
                   <font-awesome-icon class="icon cve-icon-xxs" :icon="selectedTouchScreenMenu === menuItemLabel ? 'minus' : 'plus'"/>
@@ -54,7 +54,7 @@
             <div
               class="navbar-dropdown" 
               :class="{'is-hidden-touch': !(selectedTouchScreenMenu === menuItemLabel) }"
-              v-if="menuItemLabel !==  'Report/Request' && menuItemLabel != 'Downloads' && menuObj.hasOwnProperty('submenu')">
+              v-if="hasSubmenu(menuObj)">
               <router-link 
                 @click="isOpen = false; isSubmenuActive[menuItemLabel] = false"
                 :to="`/${menuObj.path}/${submenuObj.path}`" v-slot="{ href, isActive }"
@@ -76,7 +76,7 @@
             <span
               class="is-flex"
               style="justify-content: space-between; width: inherit"
-              v-if="menuObj.hasOwnProperty('primaryNavPath') && menuObj.hasOwnProperty('submenu')"
+              v-if="isPrimaryMenuItem(menuObj) && hasSubmenu(menuObj)"
             >
               <a
                 :href="menuObj.primaryNavPath"
@@ -93,7 +93,7 @@
             <div 
               class="navbar-dropdown has-dropdown is-right"
               :class="{'is-hidden-touch': !(selectedTouchScreenMenu === menuItemLabel)}"
-              v-if="menuItemLabel != 'Downloads' && menuObj.hasOwnProperty('submenu')"
+              v-if="hasSubmenu(menuObj)"
             >
               <router-link
                 @click="isOpen = false; isSubmenuActive[menuItemLabel] = false"
@@ -204,6 +204,16 @@ export default {
     });
   },
   methods: {
+    hasSubmenu(menuObject) {
+
+      return this.isPrimaryMenuItem(menuObject)
+        && menuObject.hasOwnProperty('primarySubmenu')
+        && menuObject.primarySubmenu;
+    },
+    isPrimaryMenuItem(menuObject) {
+
+      return menuObject.hasOwnProperty('primaryNavPath');
+    },
     toggleTouchScreenMenuDropdown(menuOption) {
       // This is only used for touch
       if (this.selectedTouchScreenMenu.includes(menuOption)) {