refactor: refs #6891 use Teleport | slot

src/components/common/RightMenu.vue

@@ -1,9 +1,25 @@
 <script setup>
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 
-defineProps({
-    dataKey: { type: String, required: true },
+const hasContent = ref(false);
+const rightPanel = ref(null);
+onMounted(() => {
+    rightPanel.value = document.querySelector('#right-panel');
+    if (rightPanel.value.childNodes.length) return (hasContent.value = true);
+
+    // 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,
+            attributes: true,
+        });
 });
 
 const { t } = useI18n();
@@ -21,7 +37,8 @@ const stateStore = useStateStore();
     </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <slot name="right-panel" />
+            <div id="right-panel"></div>
+            <slot v-if="!hasContent" name="right-panel" />
         </QScrollArea>
     </QDrawer>
 </template>

src/pages/Claim/Card/ClaimAction.vue

@@ -201,30 +201,7 @@ async function post(query, params) {
         auto-load
         @on-fetch="(data) => (destinationTypes = 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="300"
-        show-if-above
-        v-if="claim"
-    >
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted() && claim">
         <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
         </QCard>
@@ -274,7 +251,7 @@ async function post(query, params) {
                 v-model="multiplicatorValue"
             />
         </QCard>
-    </QDrawer>
+    </Teleport>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
         v-if="claim"