feat: refs #6480 include drawer

src/components/common/VnCard.vue

@@ -1,11 +1,26 @@
 <script setup>
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+import { useStateStore } from 'stores/useStateStore';
+
+defineProps({
+    descriptor: { type: Object, required: true },
+});
+
+const stateStore = useStateStore();
 </script>
 <template>
-    <VnSubToolbar />
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
     <QPageContainer>
         <QPage>
+            <VnSubToolbar />
             <div :class="useCardSize()">
                 <RouterView />
             </div>

src/components/ui/VnSubToolbar.vue

@@ -12,14 +12,16 @@ onMounted(() => {
     actions.value = document.querySelector('#st-actions');
     data.value = document.querySelector('#st-data');
 
+    if (!actions.value && !data.value) return;
+
     // Check if there's content to display
     const observer = new MutationObserver(
         () =>
             (hasContent.value =
                 actions.value.childNodes.length + data.value.childNodes.length)
     );
-    observer.observe(actions.value, opts);
-    observer.observe(data.value, opts);
+    if (actions.value) observer.observe(actions.value, opts);
+    if (data.value) observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
@@ -47,7 +46,7 @@ const arrayData = useArrayData('InvoiceIn', {
 onMounted(async () => await arrayData.fetch({ append: false }));
 watch(
     () => route.params.id,
-    async (newId, oldId) => {
+    async (newId) => {
         if (newId) {
             arrayData.store.url = `InvoiceIns/${newId}`;
             await arrayData.fetch({ append: false });
@@ -64,14 +63,7 @@ watch(
             :info="t('You can search by invoice reference')"
         />
     </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceInDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <VnCard />
+    <VnCard :descriptor="InvoiceInDescriptor" />
 </template>
 <i18n>
     es: