PageContainer.vue

<template>
  <div class="container mb-16">
    <slot name="header">
      <PageHeader :document="document" />
    </slot>

    <div class="block justify-between lg:flex">
      <nuxt-content :document="document" class="w-full prose dark:prose-dark" />

      <div
        class="
          sticky
          h-full
          top-12
          lg:w-1/4 lg:ml-12
          mt-8
          lg:mt-0
          border-t
          pt-8
          lg:pt-0 lg:border-none
        "
      >
        <slot name="sidebar" />

        <AppShareModal :document="document" class="mb-2" />
        <PageEdit :document="document" class="w-full border-t mb-8 pt-2" />
      </div>
    </div>

    <slot name="footer" />
  </div>
</template>

<script>
export default {
  name: 'PageContainer',
  props: {
    document: {
      type: Object,
      required: true,
    },
  },
}
</script>