Filter showInNavigationMenu on activeComponents and show 1 element directly if it is the only one

src/layouts/DefaultLayout.vue

@@ -17,7 +17,7 @@
         <v-menu
           origin="left"
           min-width="320"
-          v-if="navigationMenuComponents.length > 1"
+          v-if="configStore.activeComponents.length > 1"
         >
           <template #activator="{ isActive, props }">
             <v-list-item
@@ -38,7 +38,7 @@
           <v-list density="compact">
             <v-list-subheader>Switch to</v-list-subheader>
             <v-list-item
-              v-for="(item, i) in navigationMenuComponents"
+              v-for="(item, i) in configStore.activeComponents"
               :key="i"
               :value="item"
               :to="item.to"
@@ -50,6 +50,23 @@
             </v-list-item>
           </v-list>
         </v-menu>
+        <v-list density="compact" v-if="shouldRenderInfoMenu">
+          <v-list-item
+            aria-label="Menu button"
+            class="ma-1"
+            rounded
+            variant="tonal"
+            :value="configStore.activeComponents[0]"
+            :to="configStore.activeComponents[0].to"
+          >
+            <template v-slot:prepend>
+              <v-icon :icon="configStore.activeComponents[0].icon"></v-icon>
+            </template>
+            <v-list-item-title
+              v-text="configStore.activeComponents[0].title"
+            ></v-list-item-title>
+          </v-list-item>
+        </v-list>
       </template>
       <div
         id="web-oc-sidebar-target"
@@ -245,9 +262,13 @@ const helpMenu = computed(() => {
   } // todo: add type when fews-pi-requests is updated
 })
 
-const navigationMenuComponents = computed(() => {
-  const components = configStore.activeComponents
-  return components.filter((component) => component.showInNavigationMenu)
+const shouldRenderInfoMenu = computed(() => {
+  if (configStore.activeComponents.length > 1) return false
+  if (helpMenu.value === undefined) return false
+  const paths = helpMenu.value.path.map((item: any) => item.path)
+  paths.push('about')
+  const path = route.path.substring(route.path.lastIndexOf('/') + 1)
+  return paths.includes(path)
 })
 
 async function getLocalOrRemoteFile(localBase: string, relativePath?: string) {

src/stores/config.ts

@@ -57,15 +57,17 @@ const useConfigStore = defineStore('config', {
   },
   getters: {
     activeComponents: (state) => {
-      return Object.values(state.components).map((component: any) => {
-        return {
-          id: component.id,
-          to: { name: component.type },
-          title: component.title ?? '',
-          icon: getMenuIcon(component),
-          showInNavigationMenu: component.showInNavigationMenu ?? true,
-        }
-      })
+      return Object.values(state.components)
+        .map((component: any) => {
+          return {
+            id: component.id,
+            to: { name: component.type },
+            title: component.title ?? '',
+            icon: getMenuIcon(component),
+            showInNavigationMenu: component.showInNavigationMenu ?? true,
+          }
+        })
+        .filter((component) => component.showInNavigationMenu)
     },
 
     getComponentByType: (

src/views/AboutView.vue

@@ -3,14 +3,14 @@
     <v-card-title class="justify-center">
       {{ configStore.general.title ?? 'Delft-FEWS Web OC' }}
     </v-card-title>
-    <v-card-text v-if="configStore.activeComponents.length > 0">
+    <v-card-text v-if="configStore.activeComponents.length > 1">
       Select one of the following options to get started.
     </v-card-text>
-    <v-card-text v-else>
+    <v-card-text v-else-if="configStore.activeComponents.length === 0">
       Unfortunately, you do not have access
       <v-icon>mdi-emoticon-sad-outline</v-icon>
     </v-card-text>
-    <v-list density="compact">
+    <v-list density="compact" v-if="configStore.activeComponents.length > 1">
       <v-list-item
         v-for="(item, i) in configStore.activeComponents"
         :key="i"