From 2a61ca4dbb1004eeeb0feaed0fc3a3117096ed2b Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 3 Jun 2024 14:11:40 +0200
Subject: [PATCH] refactor: refs #6891 drop isHeaderMounted condition

---
 src/pages/Agency/AgencyList.vue               | 18 ++---
 src/pages/Claim/ClaimList.vue                 | 38 +++------
 src/pages/Customer/CustomerList.vue           | 40 +++-------
 .../Customer/Defaulter/CustomerDefaulter.vue  | 32 ++------
 .../ExtendedList/CustomerExtendedList.vue     | 27 ++-----
 .../Notifications/CustomerNotifications.vue   | 29 ++-----
 .../Customer/Payments/CustomerPayments.vue    | 28 ++-----
 src/pages/Entry/EntryLatestBuys.vue           | 11 ++-
 src/pages/Entry/EntryList.vue                 | 26 +++---
 src/pages/InvoiceIn/InvoiceInList.vue         | 38 +++------
 src/pages/InvoiceOut/InvoiceOutGlobal.vue     | 10 +--
 src/pages/InvoiceOut/InvoiceOutList.vue       | 38 +++------
 .../InvoiceOut/InvoiceOutNegativeBases.vue    | 79 +++++++------------
 src/pages/Item/ItemFixedPrice.vue             | 26 ++----
 src/pages/Item/ItemList.vue                   | 21 +++--
 src/pages/Item/ItemRequest.vue                | 44 +++--------
 src/pages/Item/ItemTypeList.vue               | 32 ++------
 src/pages/Order/OrderList.vue                 | 31 ++------
 src/pages/Parking/ParkingList.vue             | 38 +++------
 src/pages/Route/Cmr/CmrList.vue               | 37 +++------
 src/pages/Route/RouteAutonomous.vue           | 38 +++------
 src/pages/Route/RouteList.vue                 | 32 ++------
 src/pages/Route/RouteRoadmap.vue              | 38 +++------
 src/pages/Shelving/ShelvingList.vue           | 30 ++-----
 src/pages/Supplier/SupplierList.vue           | 24 ++----
 src/pages/Ticket/TicketList.vue               | 38 +++------
 src/pages/Travel/ExtraCommunity.vue           | 25 +++---
 src/pages/Travel/TravelList.vue               | 19 ++---
 src/pages/Worker/WorkerList.vue               | 41 +++-------
 src/pages/Zone/ZoneDeliveryDays.vue           | 26 ++----
 src/pages/Zone/ZoneList.vue                   |  7 ++
 src/pages/Zone/ZoneMain.vue                   | 40 +++-------
 32 files changed, 275 insertions(+), 726 deletions(-)

diff --git a/src/pages/Agency/AgencyList.vue b/src/pages/Agency/AgencyList.vue
index 88abba3eb..de335738d 100644
--- a/src/pages/Agency/AgencyList.vue
+++ b/src/pages/Agency/AgencyList.vue
@@ -2,13 +2,11 @@
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 const router = useRouter();
-const stateStore = useStateStore();
 function navigate(id) {
     router.push({ path: `/agency/${id}` });
 }
@@ -22,16 +20,12 @@ function exprBuilder(param, value) {
 }
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                :info="t('You can search by name')"
-                :label="t('Search agency')"
-                data-key="AgencyList"
-                url="Agencies"
-            />
-        </Teleport>
-    </template>
+    <VnSearchbar
+        :info="t('You can search by name')"
+        :label="t('Search agency')"
+        data-key="AgencyList"
+        url="Agencies"
+    />
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index c3c5f5b7b..02a9de04b 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -12,6 +12,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ClaimSummary from './Card/ClaimSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -37,35 +38,16 @@ function navigate(event, id) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ClaimList"
-                :label="t('Search claim')"
-                :info="t('You can search by claim id or customer name')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="ClaimList"
+        :label="t('Search claim')"
+        :info="t('You can search by claim id or customer name')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <ClaimFilter data-key="ClaimList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index f4b4223fc..8677a77ca 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
@@ -10,8 +9,8 @@ import CardList from 'src/components/ui/CardList.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import CustomerSummary from './Card/CustomerSummary.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -26,35 +25,16 @@ const redirectToCreateView = () => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                :info="t('You can search by customer id or name')"
-                :label="t('Search customer')"
-                data-key="CustomerList"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    @click="stateStore.toggleRightDrawer()"
-                    dense
-                    flat
-                    icon="menu"
-                    round
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        :info="t('You can search by customer id or name')"
+        :label="t('Search customer')"
+        data-key="CustomerList"
+    />
+    <RightMenu>
+        <template #right-panel>
             <CustomerFilter data-key="CustomerList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index b98d755f3..af7ce0a26 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -1,10 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import { QBtn, QCheckbox, useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
-
 import { toCurrency, toDate, dateRange } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
@@ -15,7 +12,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 import axios from 'axios';
-const stateStore = useStateStore();
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -266,30 +263,11 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <CustomerNotificationsFilter data-key="CustomerDefaulter" />
-        </QScrollArea>
-    </QDrawer>
-
+        </template>
+    </RightMenu>
     <VnSubToolbar>
         <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index b5b509d1b..79459d1a1 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -14,6 +14,7 @@ import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -494,32 +495,15 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport></template
-    >
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <CustomerExtendedListFilter
                 v-if="visibleColumns.length !== 0"
                 data-key="CustomerExtendedList"
                 :visible-columns="visibleColumns"
             />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <VnSubToolbar>
         <template #st-data>
             <TableVisibleColumns
@@ -532,7 +516,6 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
             />
         </template>
     </VnSubToolbar>
-
     <QPage class="column items-center q-pa-md">
         <VnPaginate
             data-key="CustomerExtendedList"
diff --git a/src/pages/Customer/Notifications/CustomerNotifications.vue b/src/pages/Customer/Notifications/CustomerNotifications.vue
index 9ff6b2301..2b816b5d0 100644
--- a/src/pages/Customer/Notifications/CustomerNotifications.vue
+++ b/src/pages/Customer/Notifications/CustomerNotifications.vue
@@ -5,11 +5,10 @@ import { QBtn } from 'quasar';
 import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CustomerNotificationsCampaignConsumption from './CustomerNotificationsCampaignConsumption.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const selected = ref([]);
 const selectedCustomerId = ref(0);
@@ -81,29 +80,11 @@ const selectCustomerId = (id) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <CustomerNotificationsFilter data-key="CustomerNotifications" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <VnSubToolbar class="justify-end">
         <template #st-data>
             <CustomerNotificationsCampaignConsumption
diff --git a/src/pages/Customer/Payments/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
index e53da84a3..cd2642c57 100644
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -3,15 +3,14 @@ import axios from 'axios';
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import { toDate, toCurrency } from 'filters/index';
 import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const quasar = useQuasar();
 const { t } = useI18n();
 const arrayData = useArrayData('CustomerTransactions');
@@ -93,28 +92,11 @@ function stateColor(row) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <CustomerPaymentsFilter data-key="CustomerTransactions" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md customer-payments">
         <div class="vn-card-list">
             <QToolbar class="q-pa-none justify-end">
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 79d118b96..cae59207b 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -19,6 +19,7 @@ import { toDate, toCurrency } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
 const { getTokenMultimedia } = useSession();
@@ -646,14 +647,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 @on-config-saved="visibleColumns = ['picture', ...$event]"
             />
         </template>
-        <QSpace />
-        <div id="st-actions"></div>
     </VnSubToolbar>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <EntryLatestBuysFilter data-key="EntryLatestBuys" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index 6f146e21a..805b49190 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -11,6 +11,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -29,23 +30,18 @@ onMounted(async () => {
     stateStore.rightDrawer = true;
 });
 </script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                url="Entries/filter"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="EntryList"
+        url="Entries/filter"
+        :label="t('Search entries')"
+        :info="t('You can search by entry reference')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <EntryFilter data-key="EntryList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index a31ce4b59..0e5216314 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -14,6 +14,7 @@ import { getUrl } from 'src/composables/getUrl';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -33,35 +34,16 @@ function navigate(id) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="InvoiceInList"
-                :label="t('Search invoice')"
-                :info="t('You can search by invoice reference')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="InvoiceInList"
+        :label="t('Search invoice')"
+        :info="t('You can search by invoice reference')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <InvoiceInFilter data-key="InvoiceInList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobal.vue b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
index e8ec2b70e..a01af6b4b 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobal.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobal.vue
@@ -7,6 +7,7 @@ import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
 import { QBadge, QBtn } from 'quasar';
 import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -103,12 +104,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" :width="256" side="right" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <InvoiceOutGlobalForm />
-        </QScrollArea>
-    </QDrawer>
-
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QCard v-if="status" class="card">
             <QCardSection class="card-section">
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index a969c2c4b..536ee4971 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -17,6 +17,7 @@ import { toDate, toCurrency } from 'src/filters/index';
 import { useStateStore } from 'stores/useStateStore';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useSession } from 'src/composables/useSession';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -93,35 +94,16 @@ const openCreateInvoiceModal = () => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                :info="t('youCanSearchByInvoiceReference')"
-                :label="t('searchInvoice')"
-                data-key="InvoiceOutList"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    @click="stateStore.toggleRightDrawer()"
-                    dense
-                    flat
-                    icon="menu"
-                    round
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        :info="t('youCanSearchByInvoiceReference')"
+        :label="t('searchInvoice')"
+        data-key="InvoiceOutList"
+    />
+    <RightMenu>
+        <template #right-panel>
             <InvoiceOutFilter data-key="InvoiceOutList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage>
         <VnPaginate
             auto-load
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 182de2c83..e96c74689 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -1,59 +1,43 @@
 <script setup>
-import { ref, computed, onBeforeMount, onMounted, nextTick } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
-
 import { toCurrency } from 'src/filters';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
 const stateStore = useStateStore();
 const { t } = useI18n();
 
-const arrayData = ref(null);
-
-function exprBuilder(param, value) {
-    switch (param) {
-        case 'from':
-        case 'to':
-            return;
-        default:
-            return { [param]: value };
-    }
-}
-
-onBeforeMount(async () => {
-    const defaultParams = {
+const arrayData = useArrayData('InvoiceOutNegative', {
+    url: 'InvoiceOuts/negativeBases',
+    limit: 0,
+    userParams: {
         from: Date.vnFirstDayOfMonth().toISOString(),
         to: Date.vnLastDayOfMonth().toISOString(),
-    };
-    arrayData.value = useArrayData('InvoiceOutNegative', {
-        url: 'InvoiceOuts/negativeBases',
-        limit: 0,
-        userParams: defaultParams,
-        exprBuilder: exprBuilder,
-    });
-    await arrayData.value.fetch({ append: false });
-
-    stateStore.rightDrawer = true;
+    },
+    exprBuilder: (param, value) => {
+        switch (param) {
+            case 'from':
+            case 'to':
+                return;
+            default:
+                return { [param]: value };
+        }
+    },
 });
 
-const componentIsRendered = ref(false);
-
-onMounted(() =>
-    nextTick(() => {
-        componentIsRendered.value = true;
-    })
-);
-
-const rows = computed(() => arrayData.value.store.data);
+onBeforeMount(async () => {
+    await arrayData.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
 
 const columns = computed(() => [
     {
@@ -144,28 +128,23 @@ const downloadCSV = async () => {
     );
 };
 </script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport
-            to="#st-actions"
-            v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
-        >
+    <VnSubToolbar>
+        <template #st-actions>
             <QBtn color="primary" icon-right="download" no-caps @click="downloadCSV()">
                 <QTooltip>{{ t('Download as CSV') }}</QTooltip>
             </QBtn>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+        </template>
+    </VnSubToolbar>
+    <RightMenu>
+        <template #right-panel>
             <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
-        </QScrollArea>
-    </QDrawer>
-    <VnSubToolbar />
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :columns="columns"
-            :rows="rows"
+            :rows="arrayData.store.data"
             row-key="clientId"
             class="full-width q-mt-md"
         >
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 8412021e7..648016c22 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -20,6 +20,7 @@ import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
 import { isLower, isBigger } from 'src/filters/date.js';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -376,31 +377,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (itemsWithNameOptions = data)"
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <ItemFixedPriceFilter
                 data-key="ItemFixedPrices"
                 :warehouses-options="warehousesOptions"
             />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="fixedPrices"
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index fb812258b..0e40740b9 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -21,6 +21,8 @@ import { dashIfEmpty } from 'src/filters';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const router = useRouter();
 const { getTokenMultimedia } = useSession();
@@ -430,24 +432,21 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (buyersOptions = data)"
     />
-
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data">
+    <VnSubToolbar>
+        <template #st-data>
             <TableVisibleColumns
                 :all-columns="allColumnNames"
                 table-code="itemsIndex"
                 labels-traductions-path="item.list"
                 @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
             />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+        </template>
+    </VnSubToolbar>
+    <RightMenu>
+        <template #right-panel>
             <ItemListFilter data-key="ItemList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <VnPaginate
             ref="paginateRef"
diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
index 735f3a7b7..ae6638953 100644
--- a/src/pages/Item/ItemRequest.vue
+++ b/src/pages/Item/ItemRequest.vue
@@ -17,6 +17,7 @@ import { toCurrency } from 'filters/index';
 import useNotify from 'src/composables/useNotify.js';
 import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
 import axios from 'axios';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -214,39 +215,18 @@ onBeforeMount(() => {
         @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ItemRequests"
-                url="TicketRequests/filter"
-                :label="t('globals.search')"
-                :info="t('You can search by Id or alias')"
-                :redirect="false"
-            />
-        </Teleport>
-    </template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="ItemRequests"
+        url="TicketRequests/filter"
+        :label="t('globals.search')"
+        :info="t('You can search by Id or alias')"
+        :redirect="false"
+    />
+    <RightMenu>
+        <template #right-panel>
             <ItemRequestFilter data-key="ItemRequests" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="itemRequestsOptions"
diff --git a/src/pages/Item/ItemTypeList.vue b/src/pages/Item/ItemTypeList.vue
index dd023f94b..125672d60 100644
--- a/src/pages/Item/ItemTypeList.vue
+++ b/src/pages/Item/ItemTypeList.vue
@@ -8,10 +8,9 @@ import CardList from 'src/components/ui/CardList.vue';
 import ItemTypeSummary from 'src/pages/ItemType/Card/ItemTypeSummary.vue';
 import ItemTypeFilter from 'src/pages/ItemType/ItemTypeFilter.vue';
 import ItemTypeSearchbar from '../ItemType/ItemTypeSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -60,31 +59,12 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <ItemTypeSearchbar />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <ItemTypeSearchbar />
+    <RightMenu>
+        <template #right-panel>
             <ItemTypeFilter data-key="ItemTypeList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 6d36d8b31..247a8e3b2 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -13,6 +13,7 @@ import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
 import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -26,33 +27,13 @@ function navigate(id) {
     router.push({ path: `/order/${id}` });
 }
 </script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <OrderSearchbar />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <OrderSearchbar />
+    <RightMenu>
+        <template #right-panel>
             <OrderFilter data-key="OrderList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Parking/ParkingList.vue b/src/pages/Parking/ParkingList.vue
index 7bf6cfdab..b6f4e8146 100644
--- a/src/pages/Parking/ParkingList.vue
+++ b/src/pages/Parking/ParkingList.vue
@@ -10,6 +10,7 @@ import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ParkingFilter from './ParkingFilter.vue';
 import ParkingSummary from './Card/ParkingSummary.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const { push } = useRouter();
@@ -37,35 +38,18 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ParkingList"
-                :label="t('Search parking')"
-                :info="t('You can search by parking code')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
+    <template>
+        <VnSearchbar
+            data-key="ParkingList"
+            :label="t('Search parking')"
+            :info="t('You can search by parking code')"
+        />
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <ParkingFilter data-key="ParkingList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index 69f030fa0..154e49977 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -2,15 +2,14 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Notify } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useSession } from 'src/composables/useSession';
 import { toDate } from 'filters/index';
 import CmrFilter from './CmrFilter.vue';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
@@ -91,24 +90,11 @@ function downloadPdfs() {
 }
 </script>
 <template>
-      <template v-if="stateStore.isHeaderMounted()">
-
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
+    <RightMenu>
+        <template #right-panel>
+            <CmrFilter data-key="CmrList" />
+        </template>
+    </RightMenu>
     <div class="column items-center">
         <div class="list">
             <VnPaginate
@@ -182,15 +168,10 @@ function downloadPdfs() {
         </div>
         <QPageSticky :offset="[20, 20]">
             <QBtn @click="downloadPdfs" fab icon="cloud_download" color="primary" />
+            <QTooltip>
+                {{ t('route.cmr.list.downloadCmrs') }}
+            </QTooltip>
         </QPageSticky>
-        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-            <QScrollArea class="fit text-grey-8">
-                <CmrFilter data-key="CmrList" />
-                <QTooltip>
-                    {{ t('route.cmr.list.downloadCmrs') }}
-                </QTooltip>
-            </QScrollArea>
-        </QDrawer>
     </div>
 </template>
 
diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 238dce070..f704d2aff 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -17,6 +17,7 @@ import { useSummaryDialog } from 'composables/useSummaryDialog';
 import VnDms from 'components/common/VnDms.vue';
 import { useState } from 'composables/useState';
 import axios from 'axios';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -172,35 +173,16 @@ function navigateToRouteSummary(event, row) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="RouteAutonomousList"
-                :label="t('Search autonomous')"
-                :info="t('You can search by autonomous reference')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="RouteAutonomousList"
+        :label="t('Search autonomous')"
+        :info="t('You can search by autonomous reference')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <RouteAutonomousFilter data-key="RouteAutonomousList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <div class="route-list">
             <div class="q-pa-md">
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 3e7c14dd1..77c3bdb4c 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -21,6 +21,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -186,26 +187,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <RouteSearchbar />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
+    <RouteSearchbar />
+    <RightMenu>
+        <template #right-panel>
+            <RouteFilter data-key="RouteList" />
+        </template>
+    </RightMenu>
     <QDialog v-model="confirmationDialog">
         <QCard style="min-width: 350px">
             <QCardSection>
@@ -227,11 +214,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QCardActions>
         </QCard>
     </QDialog>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <RouteFilter data-key="RouteList" />
-        </QScrollArea>
-    </QDrawer>
     <FetchData
         url="Workers/activeWithInheritedRole"
         @on-fetch="(data) => (workers = data)"
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 2ed8b6a9a..e26c63881 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -16,6 +16,7 @@ import VnInputDate from 'components/common/VnInputDate.vue';
 import { useSummaryDialog } from 'composables/useSummaryDialog';
 import RoadmapSummary from 'pages/Route/Roadmap/RoadmapSummary.vue';
 import { useRouter } from 'vue-router';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -133,35 +134,16 @@ function navigateToRoadmapSummary(event, row) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="RoadmapList"
-                :label="t('Search roadmaps')"
-                :info="t('You can search by roadmap reference')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="RoadmapList"
+        :label="t('Search roadmaps')"
+        :info="t('You can search by roadmap reference')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <RoadmapFilter data-key="RoadmapList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QDialog v-model="isCloneDialogOpen">
         <QCard style="min-width: 350px">
             <QCardSection>
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
index 4584248bf..3f16f8ef7 100644
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/src/pages/Shelving/ShelvingList.vue
@@ -10,6 +10,7 @@ import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
 import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
 import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -39,31 +40,12 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <ShelvingSearchbar />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <ShelvingSearchbar />
+    <RightMenu>
+        <template #right-panel>
             <ShelvingFilter data-key="ShelvingList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index 138d353fb..d53781a38 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -7,10 +7,9 @@ import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import SupplierSummary from './Card/SupplierSummary.vue';
 import SupplierListFilter from './SupplierListFilter.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -25,22 +24,13 @@ const redirectToCreateView = () => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SuppliersList"
-                :limit="20"
-                :label="t('Search suppliers')"
-            />
-        </Teleport>
-    </template>
-
+    <VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
+    <RightMenu>
+        <template #right-panel>
+            <SupplierListFilter data-key="SuppliersList" />
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
-        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-            <QScrollArea class="fit text-grey-8">
-                <SupplierListFilter data-key="SuppliersList" />
-            </QScrollArea>
-        </QDrawer>
         <div class="vn-card-list">
             <VnPaginate data-key="SuppliersList" url="Suppliers/filter">
                 <template #body="{ rows }">
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index c6e5cb60c..c065cf6bf 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -11,6 +11,7 @@ import TicketFilter from './TicketFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -35,35 +36,16 @@ function navigate(id) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="TicketList"
-                :label="t('Search ticket')"
-                :info="t('You can search by ticket id or alias')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256">
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="TicketList"
+        :label="t('Search ticket')"
+        :info="t('You can search by ticket id or alias')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <TicketFilter data-key="TicketList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 2796d57e8..607ecb560 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -18,6 +18,7 @@ import { toDate } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import axios from 'axios';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
 const stateStore = useStateStore();
@@ -421,15 +422,16 @@ const handleDragScroll = (event) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ExtraCommunity"
-                :limit="20"
-                :label="t('searchExtraCommunity')"
-            />
-        </Teleport>
-    </template>
+    <VnSearchbar
+        data-key="ExtraCommunity"
+        :limit="20"
+        :label="t('searchExtraCommunity')"
+    />
+    <RightMenu>
+        <template #right-panel>
+            <ExtraCommunityFilter data-key="ExtraCommunity" />
+        </template>
+    </RightMenu>
     <VnSubToolbar class="justify-end">
         <template #st-actions>
             <QBtn
@@ -444,11 +446,6 @@ const handleDragScroll = (event) => {
             </QBtn>
         </template>
     </VnSubToolbar>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <ExtraCommunityFilter data-key="ExtraCommunity" />
-        </QScrollArea>
-    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index d06d56f3a..e6696b26f 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -14,6 +14,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -49,15 +50,6 @@ onMounted(async () => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="TravelList"
-                :limit="20"
-                :label="t('searchByIdOrReference')"
-            />
-        </Teleport>
-    </template>
     <FetchData
         url="Warehouses"
         :filter="{ fields: ['id', 'name'] }"
@@ -65,11 +57,12 @@ onMounted(async () => {
         @on-fetch="(data) => (warehouses = data)"
         auto-load
     />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar data-key="TravelList" :limit="20" :label="t('searchByIdOrReference')" />
+    <RightMenu>
+        <template #right-panel>
             <TravelFilter data-key="TravelList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index b11d531dd..8057e3e7c 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import WorkerSummary from './Card/WorkerSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
@@ -9,8 +8,8 @@ import WorkerFilter from './WorkerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -23,37 +22,17 @@ const redirectToCreateView = () => {
     router.push({ name: 'WorkerCreate' });
 };
 </script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="WorkerList"
-                :label="t('Search worker')"
-                :info="t('You can search by worker id or name')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <VnSearchbar
+        data-key="WorkerList"
+        :label="t('Search worker')"
+        :info="t('You can search by worker id or name')"
+    />
+    <RightMenu>
+        <template #right-panel>
             <WorkerFilter data-key="WorkerList" />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index d6ce70f6d..80437a841 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -8,6 +8,7 @@ import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
 import { useArrayData } from 'src/composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -180,28 +181,11 @@ onUnmounted(() => arrayData.destroy());
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <ZoneDeliveryPanel />
-        </QScrollArea>
-    </QDrawer>
+        </template>
+    </RightMenu>
     <QPage class="q-pa-md flex justify-center">
         <QCard style="height: max-content">
             <div class="calendars-header">
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 0955dcd08..0932a0b57 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -13,6 +13,8 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -85,6 +87,11 @@ onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
+    <RightMenu>
+        <template #right-panel>
+            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/ZoneMain.vue
index a96cf72a0..68ff9a5d1 100644
--- a/src/pages/Zone/ZoneMain.vue
+++ b/src/pages/Zone/ZoneMain.vue
@@ -1,14 +1,11 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import ZoneFilterPanel from './ZoneFilterPanel.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
-const route = useRoute();
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -41,32 +38,17 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="ZoneList"
-                url="Zones"
-                :filter="{
-                    include: { relation: 'agencyMode', scope: { fields: ['name'] } },
-                }"
-                :expr-builder="exprBuilder"
-                :label="t('list.searchZone')"
-                :info="t('list.searchInfo')"
-                custom-route-redirect-name="ZoneSummary"
-            />
-        </Teleport>
-    </template>
-    <QDrawer
-        v-if="route.name === 'ZoneList'"
-        v-model="stateStore.rightDrawer"
-        side="right"
-        :width="256"
-        show-if-above
-    >
-        <QScrollArea class="fit text-grey-8">
-            <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
-        </QScrollArea>
-    </QDrawer>
+    <VnSearchbar
+        data-key="ZoneList"
+        url="Zones"
+        :filter="{
+            include: { relation: 'agencyMode', scope: { fields: ['name'] } },
+        }"
+        :expr-builder="exprBuilder"
+        :label="t('list.searchZone')"
+        :info="t('list.searchInfo')"
+        custom-route-redirect-name="ZoneSummary"
+    />
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />