54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<script setup>
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
import LeftMenu from '../LeftMenu.vue';
|
|
|
|
const stateStore = useStateStore();
|
|
const $props = defineProps({
|
|
leftDrawer: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
onMounted(
|
|
() => (stateStore.leftDrawer = useQuasar().screen.gt.xs ? $props.leftDrawer : false),
|
|
);
|
|
|
|
const teleportRef = ref({});
|
|
const hasContent = ref();
|
|
let observer;
|
|
|
|
onMounted(() => {
|
|
if (!teleportRef.value) return;
|
|
const checkContent = () => {
|
|
hasContent.value = teleportRef.value?.innerHTML?.trim() !== '';
|
|
};
|
|
|
|
observer = new MutationObserver(checkContent);
|
|
observer.observe(teleportRef.value, { childList: true, subtree: true });
|
|
|
|
checkContent();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
|
<QScrollArea class="fit text-grey-8">
|
|
<div id="left-panel" ref="teleportRef">
|
|
<template v-if="stateStore.cardDescriptor">
|
|
<component :is="stateStore.cardDescriptor" />
|
|
<QSeparator />
|
|
<LeftMenu source="card" />
|
|
</template>
|
|
<template v-else> <LeftMenu /></template>
|
|
</div>
|
|
</QScrollArea>
|
|
</QDrawer>
|
|
<QPageContainer>
|
|
<QPage>
|
|
<RouterView />
|
|
</QPage>
|
|
</QPageContainer>
|
|
</template>
|