Create custom title variable

src/layouts/MainLayout.vue

@@ -14,6 +14,7 @@ const appStore = useAppStore();
 const refreshContentKey = ref(0);
 const { mainUser, supplantedUser } = storeToRefs(userStore);
 const {
+    customTitle,
     menuTitle,
     subtitle,
     useRightDrawer,
@@ -58,7 +59,7 @@ const logoutSupplantedUser = async () => {
                     @click="toggleLeftDrawer"
                 />
                 <QToolbarTitle>
-                    {{ menuTitle }}
+                    {{ customTitle || menuTitle }}
                     <div v-if="subtitle" class="subtitle text-caption">
                         {{ subtitle }}
                     </div>

src/pages/Ecomerce/CatalogView.vue

@@ -288,7 +288,14 @@
 
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { inject, onBeforeMount, ref, computed, watch } from 'vue';
+import {
+    inject,
+    onBeforeMount,
+    ref,
+    computed,
+    watch,
+    onBeforeUnmount
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import VnImg from 'src/components/ui/VnImg.vue';
@@ -890,29 +897,31 @@ const onConfirmClick = async params => {
 
 const refreshTitle = () => {
     const { meta } = route;
-    let title = t(meta.title);
+    const title = t(meta.title);
     let subtitle;
+    let customTitle;
 
     if (selectedCategory.value) {
         const _category = categories.value.find(
             i => i.id === selectedCategory.value
         );
         if (_category) {
-            title = _category.name;
+            const categoryName = _category.name;
+            customTitle = categoryName;
 
             if (selectedType.value) {
                 const _type = itemFamilies.value.find(
                     i => i.id === selectedType.value
                 );
                 if (_type) {
-                    subtitle = title;
+                    subtitle = categoryName;
-                    title = _type.name;
+                    customTitle = _type.name;
                 }
             }
         }
     }
 
-    appStore.$patch({ title, subtitle });
+    appStore.$patch({ title, subtitle, customTitle });
 };
 
 const onViewModeClick = () => {
@@ -965,6 +974,8 @@ onBeforeMount(async () => {
         selectedCategory.value = Number(route.params.category);
     if (route.params.type) selectedType.value = Number(route.params.type);
 });
+
+onBeforeUnmount(() => appStore.resetCustomTitle());
 </script>
 
 <style lang="scss" scoped>

src/stores/app.js

@@ -10,6 +10,7 @@ const { t } = i18n.global;
 
 export const useAppStore = defineStore('hedera', {
     state: () => ({
+        customTitle: null,
         title: null,
         subtitle: null,
         imageUrl: '',
@@ -160,6 +161,10 @@ export const useAppStore = defineStore('hedera', {
             i18n.global.locale.value = _locale;
             this.siteLang = _locale;
             localStorage.setItem('siteLang', _locale);
+        },
+
+        resetCustomTitle() {
+            this.customTitle = null;
         }
     },
     getters: {