feat: add navigationLink functionality

Author: Easybuoy

packages/chakra-ui-docs/components/BottomNavigationLink.vue

@@ -1,10 +1,45 @@
 <template>
-  <div />
+  <div>
+    <CFlex justify="space-between">
+      <CLink as="router-link" :v-show="prev !== ''" :to="prev">
+        Prev
+      </CLink>
+
+      <CLink as="router-link" :v-show="next !== ''" :to="next">
+        Next
+      </CLink>
+    </CFlex>
+  </div>
 </template>
 
 <script>
-export default {}
+import { CLink, CFlex } from '@chakra-ui/vue'
+import { findNextAndPrevRoute } from '../utils'
+
+export default {
+  components: {
+    CLink,
+    CFlex
+  },
+  data: () => ({
+    prev: '',
+    next: ''
+  }),
+  watch: {
+    $route (to, from) {
+      const { prev, next } = findNextAndPrevRoute(to.path, this.$router.options.routes)
+
+      this.prev = prev
+      this.next = next
+    }
+  },
+  created () {
+    const { prev, next } = findNextAndPrevRoute(this.$route.path, this.$router.options.routes)
+
+    this.prev = prev
+    this.next = next
+  }
+}
 </script>
 
-<style>
-</style>
+<style></style>

packages/chakra-ui-docs/layouts/default.vue

@@ -28,6 +28,7 @@
                 </keep-alive>
                 <Footer v-if="$route.path === '/'" />
                 <FileContributors />
+                <BottomNavigationLink v-if="$route.path !== '/'" />
               </CBox>
             </CFlex>
           </CBox>
@@ -53,6 +54,7 @@ import Navbar from '../components/Navbar'
 import Sidebar from '../components/Sidebar'
 import Footer from '../components/Footer'
 import FileContributors from '../components/FileContributors'
+import BottomNavigationLink from '../components/BottomNavigationLink'
 
 // import { stringToUrl } from '../utils'
 
@@ -68,7 +70,8 @@ export default {
     Sidebar,
     Footer,
     CReset,
-    CFlex
+    CFlex,
+    BottomNavigationLink
   },
   data () {
     return {

packages/chakra-ui-docs/utils/index.js

@@ -17,3 +17,12 @@ export const removeHyphenFromString = (hyphenatedString) => {
   const str = hyphenatedString.split('-')
   return str.join(' ')
 }
+
+export const findNextAndPrevRoute = (path, routes) => {
+  const currentRouteIndex = routes.map(route => route.path).indexOf(path)
+
+  const nextPageLink = routes[currentRouteIndex + 1]
+  const prevPageLink = routes[currentRouteIndex - 1]
+
+  return { prev: prevPageLink.path, next: nextPageLink.path }
+}