54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<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>
|