src/components/NavBar.vue

@@ -61,6 +61,7 @@ onMounted(() => stateStore.setMounted());
             />
             <QSpace />
             <div id="searchbar" class="searchbar"></div>
+            <div id="searchbar-after"></div>
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>

src/components/VnTable/VnTable.vue

@@ -314,7 +314,11 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
         show-if-above
     >
         <QScrollArea class="fit">
-            <VnTableFilter :data-key="$attrs['data-key']" :columns="columns" :redirect="redirect" />
+            <VnTableFilter
+                :data-key="$attrs['data-key']"
+                :columns="columns"
+                :redirect="redirect"
+            />
         </QScrollArea>
     </QDrawer>
     <CrudModel

src/components/common/RightAdvancedMenu.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useHasContent } from 'src/composables/useHasContent';
+import { watch } from 'vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+const hasContent = useHasContent('#advanced-menu');
+
+const $props = defineProps({
+    isMainSection: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+watch(
+    () => $props.isMainSection,
+    (val) => {
+        if (stateStore) stateStore.rightAdvancedDrawer = val;
+    },
+    { immediate: true }
+);
+</script>
+<template>
+    <Teleport to="#searchbar-after" v-if="stateStore.isHeaderMounted()">
+        <QBtn
+            v-if="hasContent || $slots['advanced-menu']"
+            flat
+            @click="stateStore.toggleRightAdvancedDrawer()"
+            round
+            dense
+            icon="tune"
+        >
+            <QTooltip bottom anchor="bottom right">
+                {{ t('globals.advancedMenu') }}
+            </QTooltip>
+        </QBtn>
+    </Teleport>
+    <QDrawer
+        v-model="stateStore.rightAdvancedDrawer"
+        side="right"
+        :width="256"
+        :overlay="!isMainSection"
+        v-bind="$attrs"
+    >
+        <QScrollArea class="fit">
+            <div id="advanced-menu"></div>
+            <slot v-if="!hasContent" name="advanced-menu" />
+        </QScrollArea>
+    </QDrawer>
+</template>

src/components/common/RightMenu.vue

@@ -17,7 +17,7 @@ onMounted(() => {
 });
 </script>
 <template>
-    <Teleport to="#actions-append" v-if="stateStore.isHeaderMounted()">
+    <Teleport to="#actions-prepend" v-if="stateStore.isHeaderMounted()">
         <div class="row q-gutter-x-sm">
             <QBtn
                 v-if="hasContent || $slots['right-panel']"

src/components/common/VnLog.vue

@@ -15,6 +15,7 @@ import FetchData from '../FetchData.vue';
 import VnSelect from './VnSelect.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 import VnPaginate from '../ui/VnPaginate.vue';
+import RightMenu from './RightMenu.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -677,7 +678,8 @@ watch(
             </div>
         </template>
     </VnPaginate>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <QList dense>
                 <QSeparator />
                 <QItem class="q-mt-sm">
@@ -739,7 +741,10 @@ watch(
                             hide-selected
                         >
                             <template #option="{ opt, itemProps }">
-                            <QItem v-bind="itemProps" class="q-pa-xs row items-center">
+                                <QItem
+                                    v-bind="itemProps"
+                                    class="q-pa-xs row items-center"
+                                >
                                     <QItemSection class="col-3 items-center">
                                         <VnAvatar :worker-id="opt.id" />
                                     </QItemSection>
@@ -809,7 +814,8 @@ watch(
                     />
                 </QItem>
             </QList>
-    </Teleport>
+        </template>
+    </RightMenu>
     <QDialog v-model="dateFromDialog">
         <QDate
             :years-in-month-view="false"

src/components/common/VnSection.vue

@@ -1,8 +1,8 @@
 <script setup>
-import RightMenu from './RightMenu.vue';
+import RightAdvancedMenu from './RightAdvancedMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnTableFilter from '../VnTable/VnTableFilter.vue';
-import { onBeforeMount, computed, ref } from 'vue';
+import { onBeforeMount, computed } from 'vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useRoute } from 'vue-router';
 import { useHasContent } from 'src/composables/useHasContent';
@@ -57,6 +57,7 @@ const isMainSection = computed(() => {
     return isSame;
 });
 const searchbarId = 'section-searchbar';
+const advancedMenuSlot = 'advanced-menu';
 const hasContent = useHasContent(`#${searchbarId}`);
 
 onBeforeMount(() => {
@@ -80,9 +81,9 @@ onBeforeMount(() => {
         />
         <div :id="searchbarId"></div>
     </slot>
-    <RightMenu>
-        <template #right-panel v-if="$slots['rightMenu'] || rightFilter">
-            <slot name="rightMenu">
+    <RightAdvancedMenu :is-main-section="isMainSection">
+        <template #advanced-menu v-if="$slots[advancedMenuSlot] || rightFilter">
+            <slot :name="advancedMenuSlot">
                 <VnTableFilter
                     v-if="rightFilter && columns"
                     :data-key="dataKey"
@@ -91,7 +92,7 @@ onBeforeMount(() => {
                 />
             </slot>
         </template>
-    </RightMenu>
+    </RightAdvancedMenu>
     <slot name="body" v-if="isMainSection" />
     <RouterView v-else />
 </template>

src/i18n/locale/en.yml

@@ -7,7 +7,8 @@ globals:
     entity: Entity
     user: User
     details: Details
-    collapseMenu: Collapse left menu
+    collapseMenu: Collapse lateral menu
+    advancedMenu: Advanced menu
     backToDashboard: Return to dashboard
     notifications: Notifications
     userPanel: User panel

src/i18n/locale/es.yml

@@ -8,6 +8,7 @@ globals:
     user: Usuario
     details: Detalles
     collapseMenu: Contraer menú lateral
+    advancedMenu: Menú avanzado
     backToDashboard: Volver al tablón
     notifications: Notificaciones
     userPanel: Panel de usuario

src/pages/Claim/Card/ClaimAction.vue

@@ -4,7 +4,6 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
 import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
@@ -13,11 +12,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
-const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
 const claimId = route.params.id;
@@ -201,7 +200,8 @@ async function post(query, params) {
         auto-load
         @on-fetch="(data) => (destinationTypes = data)"
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
+    <RightMenu v-if="claim">
+        <template #right-panel>
             <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
                 {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
             </QCard>
@@ -238,7 +238,10 @@ async function post(query, params) {
             <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
                 <QInput
                     :disable="
-                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
+                        !(
+                            claim.responsibility >=
+                            Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2
+                        )
                     "
                     :label="t('confirmGreuges')"
                     class="q-field__native text-grey-2"
@@ -251,8 +254,8 @@ async function post(query, params) {
                     v-model="multiplicatorValue"
                 />
             </QCard>
-    </Teleport>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
+        </template>
+    </RightMenu>
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"

src/pages/Claim/ClaimList.vue

@@ -134,7 +134,7 @@ const STATE_COLOR = {
             order: ['cs.priority ASC', 'created ASC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <ClaimFilter data-key="ClaimList" ref="claimFilterRef" />
         </template>
         <template #body>

src/pages/Order/Card/OrderCatalog.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute, useRouter } from 'vue-router';
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -9,6 +9,7 @@ import CatalogItem from 'src/components/ui/CatalogItem.vue';
 import OrderCatalogFilter from 'src/pages/Order/Card/OrderCatalogFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -89,14 +90,16 @@ watch(
             :search-remove-params="false"
         />
     </Teleport>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <OrderCatalogFilter
                 :data-key="dataKey"
                 :tag-value="tagValue"
                 :tags="tags"
                 :initial-catalog-params="catalogParams"
             />
-    </Teleport>
+        </template>
+    </RightMenu>
     <QPage class="column items-center q-pa-md" data-cy="orderCatalogPage">
         <div class="full-width">
             <VnPaginate :data-key="dataKey">
@@ -141,5 +144,5 @@ watch(
 <i18n>
 es:
     You can search items by name or id: Puedes buscar items por nombre o id
-    Search items: Buscar items
+    Search items: Buscar artículos
 </i18n>

src/pages/Order/Card/OrderLines.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import { confirm } from 'src/pages/Order/composables/confirmOrder';
 import { toCurrency, toDate } from 'src/filters';
@@ -16,9 +15,9 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const router = useRouter();
-const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -264,7 +263,8 @@ watch(
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <QCard
                 class="order-lines-summary q-pa-lg"
                 v-if="orderSummary.vat && orderSummary.total"
@@ -277,10 +277,13 @@ watch(
                     :value="toCurrency(orderSummary.total - orderSummary.vat)"
                 />
                 <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
-            <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
+                <VnLv
+                    :label="t('total') + ': '"
+                    :value="toCurrency(orderSummary?.total)"
+                />
             </QCard>
-    </Teleport>
-
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableLinesRef"
         data-key="OrderLines"

src/pages/Order/OrderList.vue

@@ -190,7 +190,7 @@ const getDateColor = (date) => {
             order: ['landed DESC', 'clientFk ASC', 'id DESC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <OrderFilter data-key="OrderList" />
         </template>
         <template #body>

src/pages/Ticket/Card/TicketBoxing.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
-import { useStateStore } from 'src/stores/useStateStore';
+import RightMenu from 'src/components/common/RightMenu.vue';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -9,9 +9,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
-const stateStore = useStateStore();
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     await fetch();
 });
 
@@ -86,7 +84,8 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <QList bordered separator style="max-width: 318px">
                 <QItem v-if="lastExpedition && videoList.length">
                     <QItemSection>
@@ -139,7 +138,9 @@ async function getVideoList(expeditionId, timed) {
                     <QItemSection>
                         <QItemLabel caption>{{ t('globals.created') }}</QItemLabel>
                         <QItemLabel>
-                        {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                            {{
+                                date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss')
+                            }}
                         </QItemLabel>
                         <QItemLabel caption>{{ t('globals.item') }}</QItemLabel>
                         <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
@@ -148,7 +149,8 @@ async function getVideoList(expeditionId, timed) {
                     </QItemSection>
                 </QItem>
             </QList>
-    </Teleport>
+        </template>
+    </RightMenu>
     <QCard>
         <QCarousel animated v-model="slide" height="max-content">
             <QCarouselSlide

src/pages/Ticket/Card/TicketComponents.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -9,15 +9,14 @@ import FetchData from 'components/FetchData.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { toCurrency } from 'filters/index';
 import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const route = useRoute();
-const stateStore = useStateStore();
 const { t } = useI18n();
 const salesRef = ref(null);
 const arrayData = useArrayData('ticketData');
@@ -164,10 +163,6 @@ const getTicketVolume = async () => {
     const { data } = await axios.get(`Tickets/${ticketData.value.id}/getVolume`);
     ticketVolume.value = data[0].volume;
 };
-
-onMounted(() => {
-    stateStore.rightDrawer = true;
-});
 </script>
 
 <template>
@@ -178,8 +173,14 @@ onMounted(() => {
         @on-fetch="(data) => (components = data)"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('basicData.total') }}
@@ -198,7 +199,12 @@ onMounted(() => {
                     <span>{{ toCurrency(getTotal) }}</span>
                 </QCardSection>
             </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('ticketComponents.components') }}
@@ -217,14 +223,21 @@ onMounted(() => {
                     }}</span>
                 </QCardSection>
             </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('ticketComponents.zoneBreakdown') }}
                     </span>
                 </QCardSection>
                 <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('basicData.price') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('basicData.price') }}:
+                    </span>
                     <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
@@ -234,14 +247,18 @@ onMounted(() => {
                     <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('ticketList.zone') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketList.zone') }}:
+                    </span>
                     <span class="link">
                         {{ dashIfEmpty(ticketData?.zone?.name) }}
                         <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
                     </span>
                 </QCardSection>
                 <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('volume.volume') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('volume.volume') }}:
+                    </span>
                     <span>{{ ticketVolume }}</span>
                 </QCardSection>
                 <QCardSection horizontal>
@@ -251,7 +268,12 @@ onMounted(() => {
                     <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
                 </QCardSection>
             </QCard>
-        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCard
+                class="q-pa-sm color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
                         {{ t('ticketComponents.theoricalCost') }}
@@ -264,7 +286,8 @@ onMounted(() => {
                     <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
                 </QCardSection>
             </QCard>
-    </Teleport>
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="TicketComponents"

src/pages/Ticket/Card/TicketSale.vue

@@ -16,7 +16,6 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
 import TicketTransfer from './TicketTransfer.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toPercentage } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
@@ -25,10 +24,10 @@ import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnUsesMana from 'src/components/ui/VnUsesMana.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 const { t } = useI18n();
 const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
@@ -421,7 +420,6 @@ const setTransferParams = async () => {
 };
 
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     getConfig();
 });
 
@@ -622,7 +620,8 @@ watch(
             </QBtnGroup>
         </template>
     </VnSubToolbar>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <div
                 class="q-pa-md q-mb-md q-ma-md color-vn-text"
                 style="border: 2px solid black"
@@ -634,17 +633,25 @@ watch(
                     <span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
                 </QCardSection>
                 <QCardSection class="justify-end text-subtitle1" horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('ticketSale.tax') }}: </span>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketSale.tax') }}:
+                    </span>
                     <span>{{
                         toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
                     }}</span>
                 </QCardSection>
-            <QCardSection class="justify-end text-weight-bold text-subtitle1" horizontal>
-                <span class="q-mr-xs color-vn-label"> {{ t('basicData.total') }}: </span>
+                <QCardSection
+                    class="justify-end text-weight-bold text-subtitle1"
+                    horizontal
+                >
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('basicData.total') }}:
+                    </span>
                     <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
                 </QCardSection>
             </div>
-    </Teleport>
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="TicketSales"

src/pages/Ticket/TicketList.vue

@@ -465,7 +465,7 @@ function setReference(data) {
             exprBuilder,
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <TicketFilter data-key="TicketList" />
         </template>
         <template #body>

src/pages/Worker/Card/WorkerCalendar.vue

@@ -1,18 +1,16 @@
 <script setup>
 import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 
-import { useRouter } from 'vue-router';
 const router = useRouter();
-const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const workerIsFreelance = ref();
@@ -171,7 +169,8 @@ watch([year, businessFk], () => refreshData());
         ref="WorkerFreelanceRef"
         auto-load
     />
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <WorkerCalendarFilter
                 ref="workerCalendarFilterRef"
                 v-model:business-fk="businessFk"
@@ -180,7 +179,8 @@ watch([year, businessFk], () => refreshData());
                 :contract-holidays="contractHolidays"
                 :year-holidays="yearHolidays"
             />
-    </Teleport>
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -10,6 +10,7 @@ import WorkerTimeForm from 'pages/Worker/Card/WorkerTimeForm.vue';
 import WorkerTimeReasonForm from 'pages/Worker/Card/WorkerTimeReasonForm.vue';
 import WorkerDateLabel from './WorkerDateLabel.vue';
 import WorkerTimeControlCalendar from 'pages/Worker/Card/WorkerTimeControlCalendar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
 
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -482,7 +483,8 @@ onMounted(async () => {
             </QBtnGroup>
         </div>
     </Teleport>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+    <RightMenu>
+        <template #right-panel>
             <div class="q-pa-md q-mb-md" style="border: 2px solid #222">
                 <QCardSection horizontal>
                     <span class="text-weight-bold text-subtitle1 text-center full-width">
@@ -508,7 +510,8 @@ onMounted(async () => {
                 @click-date="onInputChange"
                 @on-moved="getMailStates"
             />
-    </Teleport>
+        </template>
+    </RightMenu>
     <QPage class="column items-center">
         <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
             <template #header="props">

src/pages/Worker/WorkerList.vue

@@ -199,7 +199,7 @@ async function autofillBic(worker) {
             order: ['id DESC'],
         }"
     >
-        <template #rightMenu>
+        <template #advanced-menu>
             <WorkerFilter data-key="WorkerList" />
         </template>
         <template #body>

src/router/modules/ticket.js

@@ -168,7 +168,7 @@ const ticketCard = {
             name: 'TicketBoxing',
             meta: {
                 title: 'boxing',
-                icon: 'science',
+                icon: 'view_in_ar',
             },
             component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
         },

src/stores/useStateStore.js

@@ -5,6 +5,7 @@ export const useStateStore = defineStore('stateStore', () => {
     const isMounted = ref(false);
     const leftDrawer = ref(false);
     const rightDrawer = ref(false);
+    const rightAdvancedDrawer = ref(false);
     const subToolbar = ref(false);
 
     function toggleLeftDrawer() {
@@ -15,6 +16,10 @@ export const useStateStore = defineStore('stateStore', () => {
         rightDrawer.value = !rightDrawer.value;
     }
 
+    function toggleRightAdvancedDrawer() {
+        rightAdvancedDrawer.value = !rightAdvancedDrawer.value;
+    }
+
     function rightDrawerChangeValue(value) {
         rightDrawer.value = value;
     }
@@ -46,10 +51,12 @@ export const useStateStore = defineStore('stateStore', () => {
     return {
         leftDrawer,
         rightDrawer,
+        rightAdvancedDrawer,
         setMounted,
         isHeaderMounted,
         toggleLeftDrawer,
         toggleRightDrawer,
+        toggleRightAdvancedDrawer,
         isLeftDrawerShown,
         isRightDrawerShown,
         isSubToolbarShown,