<template>
  <div class="page">
    <b-navbar type="is-primary w-100">
      <template #brand>
        <NuxtLink to="/" class="navbar-item">
          <img src="/icon.png" alt="Logo" /> S3rius' dev blog
        </NuxtLink>
      </template>
      <template #end>
        <div class="navbar-menu">
          <a
            role="button"
            class="navbar-burger"
            aria-label="menu"
            aria-expanded="false"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div
          v-for="[category, pages] in categories"
          :key="category"
          class="is-hidden-desktop"
        >
          <p class="navbar-item is-inactive divider">
            <span>{{ category }}</span>
          </p>
          <NuxtLink
            class="navbar-item"
            v-for="(item, key) of pages"
            :to="item.slug"
            :key="key"
            exact-active-class="is-active"
          >
            {{ item.title }}
          </NuxtLink>
        </div>
      </template>
    </b-navbar>

    <section class="main-content columns">
      <aside class="column is-2 section is-hidden-touch">
        <b-menu>
          <div v-for="[category, pages] in categories" :key="category">
            <p class="menu-label">{{ category }}</p>
            <ul class="menu-list">
              <li v-for="(item, key) of pages" :key="key">
                <NuxtLink :to="item.slug" exact-active-class="is-active">
                  {{ item.title }}
                </NuxtLink>
              </li>
            </ul>
          </div>
        </b-menu>
      </aside>
      <div class="container column">
        <Nuxt />
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>

<script>
import { defineComponent, useContext, ref } from '@nuxtjs/composition-api'
import Footer from '../components/Footer.vue'

export default defineComponent({
  setup() {
    const { $content } = useContext()
    const categories = ref([])
    $content({ deep: true })
      .only(['category', 'slug', 'title', 'position'])
      .sortBy('createdAt', 'asc')
      .fetch()
      .then((pages) => {
        let cats = new Map()
        for (const page of pages) {
          if (cats.get(page.category) === undefined) {
            cats.set(page.category, [])
          }
          cats.get(page.category).push(page)
        }
        categories.value = Array.from(cats)
      })
    return {
      categories,
    }
  },
  components: { Footer },
})
</script>

<style scoped lang="scss">
.divider {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
  margin: 10px 0 20px;

  span {
    background: #fff;
    padding: 0 15px;
  }
}
.content {
  overflow-y: scroll;
}
</style>
