refactor: use teleport to avoid qdrawer overlapping

src/pages/Order/Card/OrderCatalog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onMounted, ref, computed, watch, provide } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -87,16 +87,14 @@ watch(
         :label="t('Search items')"
         :info="t('You can search items by name or id')"
     />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QScrollArea class="fit text-grey-8">
+        <OrderCatalogFilter
-            <OrderCatalogFilter
+            :data-key="dataKey"
-                :data-key="dataKey"
+            :tag-value="tagValue"
-                :tag-value="tagValue"
+            :tags="tags"
-                :tags="tags"
+            :initial-catalog-params="catalogParams"
-                :initial-catalog-params="catalogParams"
+        />
-            />
+    </Teleport>
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
         <div class="full-width">
             <VnPaginate

src/pages/Order/Card/OrderLines.vue

@@ -251,7 +251,7 @@ watch(
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QCard
             class="order-lines-summary q-pa-lg"
             v-if="orderSummary.vat && orderSummary.total"
@@ -266,7 +266,7 @@ watch(
             <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
             <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
         </QCard>
-    </QDrawer>
+    </Teleport>
 
     <VnTable
         ref="tableLinesRef"

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -171,11 +171,9 @@ onMounted(async () => {
         </div>
     </Teleport>
     <QPage class="column items-center q-pa-md">
-        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-            <QScrollArea class="fit text-grey-8">
+            <SupplierConsumptionFilter data-key="SupplierConsumption" />
-                <SupplierConsumptionFilter data-key="SupplierConsumption" />
+        </Teleport>
-            </QScrollArea>
-        </QDrawer>
         <QTable
             :rows="rows"
             row-key="id"

src/pages/Ticket/Card/TicketBoxing.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
+import { useStateStore } from 'src/stores/useStateStore';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -8,7 +9,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
-
+const stateStore = useStateStore();
 onMounted(async () => {
     await fetch();
 });
@@ -84,7 +85,7 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <QDrawer show-if-above side="right">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QScrollArea class="fit">
             <QList bordered separator style="max-width: 318px">
                 <QItem v-if="lastExpedition && videoList.length">
@@ -150,7 +151,7 @@ async function getVideoList(expeditionId, timed) {
                 </QItem>
             </QList>
         </QScrollArea>
-    </QDrawer>
+    </Teleport>
 
     <QCard>
         <QCarousel animated v-model="slide" height="max-content">

src/pages/Ticket/Card/TicketComponents.vue

@@ -178,7 +178,7 @@ onMounted(() => {
         @on-fetch="(data) => (components = data)"
         auto-load
     />
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
             <QCardSection horizontal>
                 <span class="text-weight-bold text-subtitle1 text-center full-width">
@@ -264,7 +264,7 @@ onMounted(() => {
                 <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
             </QCardSection>
         </QCard>
-    </QDrawer>
+    </Teleport>
     <VnTable
         ref="tableRef"
         data-key="TicketComponents"

src/pages/Ticket/Card/TicketSale.vue

@@ -617,7 +617,7 @@ watch(
             </QBtnGroup>
         </template>
     </VnSubToolbar>
-    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <div
             class="q-pa-md q-mb-md q-ma-md color-vn-text"
             style="border: 2px solid black"
@@ -638,8 +638,8 @@ watch(
                 <span class="q-mr-xs color-vn-label"> {{ t('basicData.total') }}: </span>
                 <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
             </QCardSection>
-        </div></QDrawer
+        </div>
-    >
+    </Teleport>
     <VnTable
         ref="tableRef"
         data-key="TicketSales"

src/pages/Ticket/Card/TicketVolume.vue

@@ -100,11 +100,9 @@ onMounted(() => (stateStore.rightDrawer = true));
         @on-fetch="(data) => applyVolumes(data)"
         auto-load
     />
-    <QDrawer
+    <Teleport
-        v-if="packingTypeVolume.length"
+        to="#right-panel"
-        side="right"
+        v-if="stateStore.isHeaderMounted() && packingTypeVolume.length"
-        :width="265"
-        v-model="stateStore.rightDrawer"
     >
         <QCard
             v-for="(packingType, index) in packingTypeVolume"
@@ -124,8 +122,7 @@ onMounted(() => (stateStore.rightDrawer = true));
                 <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
             </QCardSection>
         </QCard>
-    </QDrawer>
+    </Teleport>
-
     <VnTable
         ref="tableRef"
         data-key="TicketVolume"

src/pages/Zone/Card/ZoneEvents.vue

@@ -43,16 +43,14 @@ const onZoneEventFormClose = () => {
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QScrollArea class="fit text-grey-8">
+        <ZoneEventsPanel
-            <ZoneEventsPanel
+            :first-day="firstDay"
-                :first-day="firstDay"
+            :last-day="lastDay"
-                :last-day="lastDay"
+            :events="events"
-                :events="events"
+            v-model:formModeName="formModeName"
-                v-model:formModeName="formModeName"
+        />
-            />
+    </Teleport>
-        </QScrollArea>
-    </QDrawer>
     <QPage class="q-pa-md flex justify-center">
         <ZoneCalendarGrid
             v-model:events="events"