From c9c396fe4dded28a43e95f1f1d819bc7b05fb089 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Tue, 12 Dec 2023 13:24:35 +0100
Subject: [PATCH] Get current component title from config

---
 src/layouts/DefaultLayout.vue | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index d84f69f19..4e54e11d5 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onBeforeMount } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useRtl } from 'vuetify'
 import { useConfigStore } from '../stores/config.ts'
 import { Alert, useAlertsStore } from '../stores/alerts.ts'
@@ -89,17 +89,14 @@ const currentItem = ref('')
 const { isRtl } = useRtl()
 const route = useRoute()
 
-onBeforeMount(async () => {
-  currentItem.value = route.name?.toString() ?? ''
+watchEffect(async () => {
+  const component = configStore.activeComponents.find(
+    (c) => c.to.name === route.name,
+  )
+  const routeName = component ? component.title : route.name?.toString()
+  currentItem.value = routeName
 })
 
-watch(
-  () => route.name,
-  async (name) => {
-    currentItem.value = name?.toString() ?? ''
-  },
-)
-
 function onCloseAlert(alert: Alert) {
   alert.active = false
 }