src/components/common/VnCardMain.vue

@@ -1,12 +1,9 @@
 <script setup>
-import LeftMenu from '../LeftMenu.vue';
-import { useStateStore } from 'stores/useStateStore';
 import RightMenu from './RightMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnTableFilter from '../VnTable/VnTableFilter.vue';
 import { onBeforeMount } from 'vue';
 import { useArrayData } from 'src/composables/useArrayData';
-const stateStore = useStateStore();
 
 const $props = defineProps({
     section: {
@@ -58,10 +55,6 @@ onBeforeMount(() => {
         />
     </slot>
 
-    <Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
-        <LeftMenu v-if="section == $route.name" />
-    </Teleport>
-
     <RightMenu>
         <template #right-panel v-if="$slots['rightMenu'] || rightFilter">
             <slot name="rightMenu">

src/components/common/VnSectionMain.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useQuasar } from 'quasar';
+import LeftMenu from '../LeftMenu.vue';
 
 const stateStore = useStateStore();
 const $props = defineProps({
@@ -13,12 +14,31 @@ const $props = defineProps({
 onMounted(
     () => (stateStore.leftDrawer = useQuasar().screen.gt.xs ? $props.leftDrawer : false)
 );
+
+const targetId = 'left-panel';
+const teleportRef = ref({});
+const hasContent = ref();
+let observer;
+
+onMounted(() => {
+    if (teleportRef.value) {
+        const checkContent = () => {
+            hasContent.value = teleportRef.value.innerHTML.trim() !== '';
+        };
+
+        observer = new MutationObserver(checkContent);
+        observer.observe(teleportRef.value, { childList: true, subtree: true });
+
+        checkContent();
+    }
+});
 </script>
 
 <template>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
-            <div id="left-panel"></div>
+            <div :id="targetId" ref="teleportRef"></div>
+            <LeftMenu v-if="!hasContent" />
         </QScrollArea>
     </QDrawer>
     <QPageContainer>