slibra-official-web/layouts/default.vue

<script setup lang="ts">
import { ref } from 'vue';
import { NModal } from 'naive-ui';
import { useScroll } from '@/composables/useScroll';

const { scrollY } = useScroll();
const { locale } = useI18n();
const drawerState = ref(false);
const showModal = ref(false);

const type = computed(() => scrollY.value > 100 ? 'down' : 'up');

const changeDrawerState = () => {
  drawerState.value = !drawerState.value;
}

const changeModalState = () => {
  showModal.value = true;
}

</script>

<template>
  <section :class="['layout-viewport', locale]">
    <TheHeader @onDrawer="changeDrawerState" @onModal="changeModalState" :state="type" />
    <slot />
    <TheFooter />
    <TheDrawer v-model="drawerState" />

    <BaseDialog v-model="showModal"></BaseDialog>
  </section>
</template>

<style scoped lang="scss">
.layout-viewport {
  position: relative;
}
</style>