Nuxt/docs/components/app/AppLayout.vue
Clément Ollivier 1a7b570c82
docs(examples): add examples to docs (#3966)
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
2022-03-30 17:59:28 +02:00

45 lines
1.0 KiB
Vue

<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>