LayoutWrapper.vue

<script lang="ts" setup>
export interface Props {
  fluid?: boolean
  toc?: boolean
  edit?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  fluid: false,
  toc: true,
  edit: true
});
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">
        <slot />
        <!-- </v-card-text>
          </v-card> -->
        <EditGitlab v-if="edit" />
        <NavPrevNext v-if="edit" />
      </v-container>
      <!-- <Footer></Footer> -->
    </v-main>
    <NavNavbar v-model:drawer="drawer" :density="density"  />
    <slot 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>