-
Remi PLANEL authoredRemi PLANEL authored
LayoutWrapper.vue 1.59 KiB
<script lang="ts" setup>
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
export interface Props {
fluid?: boolean
toc?: boolean
edit?: boolean
navDrawer?: boolean
title?: string
}
const props = withDefaults(defineProps<Props>(), {
fluid: false,
toc: true,
edit: true,
navDrawer: true,
title: null
});
const drawer = ref(true);
const { page } = useContent();
const scrollThreshold = ref(200)
const density = ref<'compact' | 'prominent'>("prominent")
function onScroll() {
if (window.scrollY > scrollThreshold.value) {
density.value = "compact"
}
else { density.value = "prominent" }
}
</script>
<template>
<VApp>
<v-main style="min-height: 300px">
<v-container v-scroll="onScroll" :fluid="fluid">
<v-row justify="center">
<v-col cols="auto">
<v-card flat color="transparent" :min-width="mobile ? undefined : 900" :max-width="fluid ? undefined : 1500">
<v-card-text>
<slot />
</v-card-text>
<EditGitlab v-if="edit" />
<NavPrevNext v-if="edit" />
</v-card>
</v-col>
</v-row>
</v-container>
<!-- <Footer></Footer> -->
</v-main>
<NavNavbar v-model:drawer="drawer" :title="title !== null ? title : undefined" :density="density"
:drawer-enabled="navDrawer" />
<slot v-if="navDrawer" name="drawer" :drawer="drawer">
<NavDrawer :drawer="drawer" />
</slot>
<NavTableOfContent v-if="toc" :links="page.body.toc.links ?? []" />
<nav-back-to-top />
</VApp>
</template>
<style scoped></style>