<template>
  <div class="relative w-full">
    <AppHeader :links="headerLinks" />

    <div class="lg:flex" :class="containerClass">
      <slot v-if="['xs', 'sm', 'md'].includes($mq) || layout.aside" name="aside">
        <AppAside :links="headerLinks" :class="layout.asideClass" />
      </slot>

      <div class="flex-auto w-full min-w-0 lg:static lg:max-h-full lg:overflow-visible">
        <slot />
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  data () {
    return {
      headerLinks: []
    }
  },
  async fetch () {
    const { $docus } = this
    this.headerLinks = (await $docus
      .search('/collections/header')
      .fetch()).links
  },
  computed: {
    layout () {
      return this.$docus.layout.value
    },
    containerClass () {
      if (this.layout.aside && this.layout.fluid) { return 'd-container-fluid' }
      if (this.layout.aside) { return 'd-container' }
      return ''
    }
  }
})
</script>