<template>
  <div class="max-w-7xl mx-auto flex py-16">
    <div class="w-1/4 pr-4">
      <AppMenu :items="navigationItems" />
    </div>
    <div class="w-3/4 pl-4">
      <nuxt-content :document="page" />
    </div>
  </div>
</template>

<script>
import AppMenu from '../../stories/Components/AppMenu.vue' // just for test
import { screenIs } from '@/helpers/screensize'
export default {
  components: {
    AppMenu,
  },
  async asyncData({ $content, route }) {
    const componentsList = await $content('components')
      .only(['title', 'slug'])
      .fetch()
    const path = route.path.substring(1)
    const page = await $content(path).fetch()

    return {
      page,
      componentsList,
    }
  },
  data() {
    return {}
  },
  computed: {
    screensize() {
      return screenIs()
    },
    navigationItems() {
      return [
        { name: 'Home', to: '/' },
        { name: 'Setup', to: '/setup' },
        { name: 'Farben', to: '/colors' },
        { name: 'Mixins', to: '/mixins' },
        { name: 'Input', to: '/input' },
        { name: 'Helferfunktionen', to: '/helpers' },
        {
          name: 'Components',
          items: this.componentsList.map((item) => {
            return { name: item.title, to: item.path, icon: null }
          }),
        },
      ]
    },
  },
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,400;0,600;0,800;1,400;1,600;1,800&family=Montserrat:wght@400;500;600&display=swap');
</style>
