feat: refs #6891 hide if no content

src/components/common/RightMenu.vue

@@ -1,13 +1,15 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 
+const slots = useSlots();
 const hasContent = ref(false);
 const rightPanel = ref(null);
+
 onMounted(() => {
     rightPanel.value = document.querySelector('#right-panel');
-    if (rightPanel.value.childNodes.length) return (hasContent.value = true);
+    if (rightPanel.value.childNodes.length) hasContent.value = true;
 
     // Check if there's content to display
     const observer = new MutationObserver(() => {
@@ -20,6 +22,8 @@ onMounted(() => {
             childList: true,
             attributes: true,
         });
+
+    if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
 });
 
 const { t } = useI18n();
@@ -28,7 +32,14 @@ const stateStore = useStateStore();
 <template>
     <Teleport to="#actions-append">
         <div class="row q-gutter-x-sm">
-            <QBtn flat @click="stateStore.toggleRightDrawer()" round dense icon="menu">
+            <QBtn
+                v-if="hasContent || $slots['right-panel']"
+                flat
+                @click="stateStore.toggleRightDrawer()"
+                round
+                dense
+                icon="menu"
+            >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </QTooltip>

src/components/common/VnCard.vue

@@ -68,12 +68,8 @@ if (props.baseUrl) {
             </QScrollArea>
         </QDrawer>
         <RightMenu>
-            <template #right-panel>
-                <component
-                    v-if="props.filterPanel"
-                    :is="props.filterPanel"
-                    :data-key="props.searchbarDataKey"
-                />
+            <template #right-panel v-if="props.filterPanel">
+                <component :is="props.filterPanel" :data-key="props.searchbarDataKey" />
             </template>
         </RightMenu>
     </template>