From fe1a64702815bbafe6a65cc479b2da068d724f04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 18 Apr 2020 19:50:06 +0200
Subject: [PATCH] add page navigation

---
 docs/src/components/PageNavigation/index.vue  | 58 +++++++++++++++++++
 docs/src/components/PageNavigation/style.scss |  5 ++
 docs/src/layouts/App/base.scss                |  4 --
 docs/src/layouts/App/index.vue                | 10 +++-
 4 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/components/PageNavigation/index.vue
 create mode 100644 docs/src/components/PageNavigation/style.scss

diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue
new file mode 100644
index 00000000..7def32c0
--- /dev/null
+++ b/docs/src/components/PageNavigation/index.vue
@@ -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>
\ No newline at end of file
diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss
new file mode 100644
index 00000000..a5be882e
--- /dev/null
+++ b/docs/src/components/PageNavigation/style.scss
@@ -0,0 +1,5 @@
+.page-navigation {
+  display: flex;
+  justify-content: space-between;
+  padding: 3rem 0;
+}
\ No newline at end of file
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index 11d92b86..b85098f1 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -72,10 +72,6 @@ a {
   text-decoration: none;
 }
 
-p {
-  margin-bottom: 1rem;
-}
-
 .is-active {
   background: black;
   color: white;
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index f16d4c86..05353015 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -26,6 +26,7 @@
           </nav>
           <main class="app__main">
             <slot/>
+            <page-navigation />
           </main>
         </div>
       </div>
@@ -43,13 +44,18 @@ query {
 
 <script>
 import linkGroups from '@/data/links.yaml'
+import PageNavigation from '@/components/PageNavigation'
 
 export default {
+  components: {
+    PageNavigation,
+  },
+
   data() {
     return {
-      linkGroups
+      linkGroups,
     }
-  }
+  },
 }
 </script>