118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template>
|
|
<div class="page dark-mode">
|
|
<b-navbar type="is-primary w-100">
|
|
<template #brand>
|
|
<NuxtLink to="/" class="navbar-item">
|
|
<img src="/logo.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)
|
|
}
|
|
// cats.forEach((pages) => {
|
|
// pages.sort(
|
|
// (page1, page2) => (page1.position || 0) > (page2.position || 0)
|
|
// )
|
|
// })
|
|
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>
|