Fix compose page not being clickable if sub pages are enabled

client/web/compose/src/components/PageBlocks/Navigation/Base.vue

@@ -20,7 +20,10 @@
           :key="`navItem-${index}`"
           :disabled="!navItem.options.enabled"
           :style="{ order: index, color: navItem.options.textColor, background: navItem.options.backgroundColor, justifyContent: options.display.alignment }"
-          :link-attrs="{ style: `color: ${navItem.options.textColor}` }"
+          :link-attrs="{
+            style: `color: ${navItem.options.textColor}`,
+          }"
+          link-classes="h-100 w-100 d-flex align-items-center justify-content-center"
           :href="generateHrefAttributeLink(navItem)"
           :to="generateToAttributeLink(navItem)"
           :target="selectTargetOption(navItem.options.item.target)"
@@ -29,7 +32,7 @@
           <template v-if="navItem.type === 'dropdown' || isComposeDropdownPage(navItem)">
             <b-button
               :id="`dropdown-popover-${index}-${block.blockID}`"
-              class="text-decoration-none p-0"
+              class="text-decoration-none p-0 w-100 h-100"
               variant="link"
               :style="{ color: navItem.options.textColor, background: navItem.options.backgroundColor }"
             >
@@ -76,6 +79,20 @@
               </template>
 
               <template v-else>
+                <b-link
+                  :to="{ name: 'page', params: { pageID: navItem.options.item.pageID } }"
+                  :target="selectTargetOption(navItem.options.item.target)"
+                  :disabled="navItem.options.disabled"
+                  class="dropdown-item"
+                  style="white-space: normal;"
+                >
+                  {{ navItem.options.item.label }}
+                </b-link>
+
+                <hr
+                  class="my-1"
+                >
+
                 <div
                   v-for="(dropdown, dIndex) in getSubPages(navItem.options.item.pageID)"
                   :key="`dropdown-${dIndex}`"

client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue

@@ -60,7 +60,7 @@
 import base from './base'
 
 import { VueSelect } from 'vue-select'
-import { compose } from '@cortezaproject/corteza-js'
+import { NoID, compose } from '@cortezaproject/corteza-js'
 
 export default {
   components: {
@@ -99,9 +99,9 @@ export default {
     loadTree () {
       const { namespaceID } = this.namespace
       this.$ComposeAPI
-        .pageTree({ namespaceID })
-        .then(tree => {
-          this.tree = tree.map(p => new compose.Page(p))
+        .pageList({ namespaceID, sort: 'title' })
+        .then(({ set: tree }) => {
+          this.tree = tree.map(p => new compose.Page(p)).filter(p => p.moduleID === NoID)
         })
         .catch(this.toastErrorHandler(this.$t('notification:page.loadFailed')))
     },