add page navigation

This commit is contained in:
Philipp Kühn
2020-04-18 19:50:06 +02:00
parent 1cbe32a357
commit fe1a647028
4 changed files with 71 additions and 6 deletions

View File

@@ -0,0 +1,58 @@
<template>
<nav class="page-navigation">
<div class="page-navigation__previous">
<g-link
class="page-navigation__link"
exact
:to="previousPage.link"
v-if="previousPage"
>
&larr; {{ previousPage.title }}
</g-link>
</div>
<div class="page-navigation__next">
<g-link
class="page-navigation__link"
exact
:to="nextPage.link"
v-if="nextPage"
>
{{ nextPage.title }} &rarr;
</g-link>
</div>
</nav>
</template>
<script>
import linkGroups from '@/data/links.yaml'
export default {
data() {
return {
linkGroups,
}
},
computed: {
items() {
return this.linkGroups.reduce((acc, group) => (acc.push(...group.items), acc), [])
},
currentIndex() {
return this.items.findIndex(item => {
return item.link.replace(/\/$/, '') === this.$route.path.replace(/\/$/, '')
})
},
nextPage() {
return this.items[this.currentIndex + 1]
},
previousPage() {
return this.items[this.currentIndex - 1]
},
}
}
</script>
<style lang="scss" src="./style.scss" scoped></style>