refactor: refs #6891 drop isHeaderMounted condition

2024-06-03 14:11:40 +02:00 · 2024-06-03 14:11:40 +02:00 · 2a61ca4dbb
parent 36ff4e9312
commit 2a61ca4dbb
32 changed files with 275 additions and 726 deletions
--- 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
--- 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
--- 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
--- 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" />
--- 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"
--- 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
--- 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">
--- 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"
--- 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
--- 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
--- 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">
--- 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
--- 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"
        >
--- 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"
--- 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"
--- 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"
--- 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
--- 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
--- 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
--- 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>

--- 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">
--- 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)"
--- 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>
--- 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
--- 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 }">
--- 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
--- 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"
--- 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
--- 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
--- 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">
--- 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
--- 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 />