Merge pull request '#6891 add toggle' (!417) from 6891-addToggleFilterPanel into dev

Reviewed-on: verdnatura/salix-front#417
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/common/RightMenu.vue

@@ -9,14 +9,13 @@ const rightPanel = ref(null);
 
 onMounted(() => {
     rightPanel.value = document.querySelector('#right-panel');
-    if (rightPanel.value.childNodes.length) hasContent.value = true;
+    if (!rightPanel.value) return;
 
     // Check if there's content to display
     const observer = new MutationObserver(() => {
         hasContent.value = rightPanel.value.childNodes.length;
     });
 
-    if (rightPanel.value)
     observer.observe(rightPanel.value, {
         subtree: true,
         childList: true,
@@ -30,7 +29,7 @@ const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 <template>
-    <Teleport to="#actions-append">
+    <Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
         <div class="row q-gutter-x-sm">
             <QBtn
                 v-if="hasContent || $slots['right-panel']"

src/components/common/VnCard.vue

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

src/components/common/VnInput.vue

@@ -80,7 +80,7 @@ const inputRules = [
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="$slots.append && hover && value && !$attrs.disabled"
+                    v-if="hover && value && !$attrs.disabled"
                     @click="value = null"
                 ></QIcon>
             </template>

src/components/ui/VnSearchbar.vue

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

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>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <ClaimFilter data-key="ClaimList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <CustomerFilter data-key="CustomerList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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()">
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <CustomerNotificationsFilter data-key="CustomerDefaulter" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
-
     <VnSubToolbar>
         <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />

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()">
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <CustomerExtendedListFilter
                 v-if="visibleColumns.length !== 0"
                 data-key="CustomerExtendedList"
                 :visible-columns="visibleColumns"
             />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </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"

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()">
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <CustomerNotificationsFilter data-key="CustomerNotifications" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <VnSubToolbar class="justify-end">
         <template #st-data>
             <CustomerNotificationsCampaignConsumption

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()">
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <CustomerPaymentsFilter data-key="CustomerTransactions" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md customer-payments">
         <div class="vn-card-list">
             <QToolbar class="q-pa-none justify-end">

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>
+    <RightMenu>
-        <QScrollArea class="fit text-grey-8">
+        <template #right-panel>
             <EntryLatestBuysFilter data-key="EntryLatestBuys" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"

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>
+    <RightMenu>
-    </template>
+        <template #right-panel>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
             <EntryFilter data-key="EntryList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <InvoiceInFilter data-key="InvoiceInList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <RightMenu>
-        <QScrollArea class="fit text-grey-8">
+        <template #right-panel>
             <InvoiceOutGlobalForm />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
-
     <QPage class="column items-center q-pa-md">
         <QCard v-if="status" class="card">
             <QCardSection class="card-section">

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <InvoiceOutFilter data-key="InvoiceOutList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage>
         <VnPaginate
             auto-load

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -1,25 +1,29 @@
 <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);
+const arrayData = useArrayData('InvoiceOutNegative', {
-
+    url: 'InvoiceOuts/negativeBases',
-function exprBuilder(param, value) {
+    limit: 0,
+    userParams: {
+        from: Date.vnFirstDayOfMonth().toISOString(),
+        to: Date.vnLastDayOfMonth().toISOString(),
+    },
+    exprBuilder: (param, value) => {
         switch (param) {
             case 'from':
             case 'to':
@@ -27,34 +31,14 @@ function exprBuilder(param, value) {
             default:
                 return { [param]: value };
         }
-}
+    },
+});
 
 onBeforeMount(async () => {
-    const defaultParams = {
+    await arrayData.fetch({ append: false });
-        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;
 });
 
-const componentIsRendered = ref(false);
-
-onMounted(() =>
-    nextTick(() => {
-        componentIsRendered.value = true;
-    })
-);
-
-const rows = computed(() => arrayData.value.store.data);
-
 const columns = computed(() => [
     {
         label: t('invoiceOut.negativeBases.company'),
@@ -144,28 +128,23 @@ const downloadCSV = async () => {
     );
 };
 </script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <VnSubToolbar>
-        <Teleport
+        <template #st-actions>
-            to="#st-actions"
-            v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
-        >
             <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>
+    </VnSubToolbar>
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <InvoiceOutNegativeFilter data-key="InvoiceOutNegative" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
-    <VnSubToolbar />
     <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"
         >

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()">
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <ItemFixedPriceFilter
                 data-key="ItemFixedPrices"
                 :warehouses-options="warehousesOptions"
             />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="fixedPrices"

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)"
     />
-
+    <VnSubToolbar>
-    <QToolbar class="bg-vn-dark justify-end">
+        <template #st-data>
-        <div id="st-data">
             <TableVisibleColumns
                 :all-columns="allColumnNames"
                 table-code="itemsIndex"
                 labels-traductions-path="item.list"
                 @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
             />
-        </div>
+        </template>
-        <QSpace />
+    </VnSubToolbar>
-        <div id="st-actions"></div>
+    <RightMenu>
-    </QToolbar>
+        <template #right-panel>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
             <ItemListFilter data-key="ItemList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <VnPaginate
             ref="paginateRef"

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,8 +215,6 @@ onBeforeMount(() => {
         @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
     <VnSearchbar
         data-key="ItemRequests"
         url="TicketRequests/filter"
@@ -223,30 +222,11 @@ onBeforeMount(() => {
         :info="t('You can search by Id or alias')"
         :redirect="false"
     />
-        </Teleport>
+    <RightMenu>
-    </template>
+        <template #right-panel>
-    <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">
             <ItemRequestFilter data-key="ItemRequests" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="itemRequestsOptions"

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <ItemTypeFilter data-key="ItemTypeList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <OrderFilter data-key="OrderList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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()">
+    <template>
-        <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>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <RightMenu>
-        <QScrollArea class="fit text-grey-8">
+        <template #right-panel>
             <ParkingFilter data-key="ParkingList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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()">
+    <RightMenu>
-
+        <template #right-panel>
-        <Teleport to="#actions-append">
+            <CmrFilter data-key="CmrList" />
-            <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>
     <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" />
-        </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>
+        </QPageSticky>
-        </QDrawer>
     </div>
 </template>
 

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <RouteAutonomousFilter data-key="RouteAutonomousList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center">
         <div class="route-list">
             <div class="q-pa-md">

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <div class="row q-gutter-x-sm">
+            <RouteFilter data-key="RouteList" />
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
         </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)"

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <RoadmapFilter data-key="RoadmapList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QDialog v-model="isCloneDialogOpen">
         <QCard style="min-width: 350px">
             <QCardSection>

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <ShelvingFilter data-key="ShelvingList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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()">
+    <VnSearchbar data-key="SuppliersList" :limit="20" :label="t('Search suppliers')" />
-        <Teleport to="#searchbar">
+    <RightMenu>
-            <VnSearchbar
+        <template #right-panel>
-                data-key="SuppliersList"
-                :limit="20"
-                :label="t('Search suppliers')"
-            />
-        </Teleport>
-    </template>
-
-    <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>
+        </template>
-        </QDrawer>
+    </RightMenu>
+    <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate data-key="SuppliersList" url="Suppliers/filter">
                 <template #body="{ rows }">

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <TicketFilter data-key="TicketList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <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"

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>
+    <VnSearchbar data-key="TravelList" :limit="20" :label="t('searchByIdOrReference')" />
-        <QScrollArea class="fit text-grey-8">
+    <RightMenu>
+        <template #right-panel>
             <TravelFilter data-key="TravelList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

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>
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <WorkerFilter data-key="WorkerList" />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate

src/pages/Zone/ZoneDeliveryDays.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, onMounted, ref, watch, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
 import ZoneDeliveryCalendar from './ZoneDeliveryCalendar.vue';
@@ -8,8 +7,8 @@ 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();
 const weekdayStore = useWeekdayStore();
 
@@ -180,28 +179,11 @@ onUnmounted(() => arrayData.destroy());
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
-        <Teleport to="#actions-append">
+        <template #right-panel>
-            <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">
             <ZoneDeliveryPanel />
-        </QScrollArea>
+        </template>
-    </QDrawer>
+    </RightMenu>
     <QPage class="q-pa-md flex justify-center">
         <QCard style="height: max-content">
             <div class="calendars-header">

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

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,8 +38,6 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
     <VnSearchbar
         data-key="ZoneList"
         url="Zones"
@@ -54,19 +49,6 @@ const exprBuilder = (param, value) => {
         :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>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit text-grey-8">
             <LeftMenu />