refactor: refs #6891 searchbar teleport

src/components/common/VnCard.vue

@@ -56,9 +56,19 @@ watchEffect(() => {
 });
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <QDrawer
-        <Teleport to="#searchbar" v-if="props.searchDataKey">
+        v-model="stateStore.leftDrawer"
-            <slot name="searchbar">
+        show-if-above
+        :width="256"
+        v-if="stateStore.isHeaderMounted()"
+    >
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <slot name="searchbar" v-if="props.searchDataKey">
         <VnSearchbar
             :data-key="props.searchDataKey"
             :url="props.searchUrl"
@@ -68,16 +78,7 @@ watchEffect(() => {
             :redirect="searchRedirect"
         />
     </slot>
-        </Teleport>
     <slot v-else name="searchbar" />
-        <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-            <QScrollArea class="fit">
-                <component :is="descriptor" />
-                <QSeparator />
-                <LeftMenu source="card" />
-            </QScrollArea>
-        </QDrawer>
-    </template>
     <RightMenu>
         <template #right-panel v-if="props.filterPanel">
             <component :is="props.filterPanel" :data-key="props.searchDataKey" />

src/components/ui/VnSearchbar.vue

@@ -5,9 +5,11 @@ import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
 import useRedirect from 'src/composables/useRedirect';
 import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const quasar = useQuasar();
 const { t } = useI18n();
+const state = useStateStore();
 
 const props = defineProps({
     dataKey: {
@@ -107,8 +109,8 @@ async function search() {
     });
 }
 </script>
-
 <template>
+    <Teleport to="#searchbar" v-if="state.isHeaderMounted()">
         <QForm @submit="search" id="searchbarForm">
             <VnInput
                 id="searchbar"
@@ -137,6 +139,7 @@ async function search() {
                 </template>
             </VnInput>
         </QForm>
+    </Teleport>
 </template>
 
 <style lang="scss" scoped>