Merge pull request #225 from Easybuoy/feature/bottom-navigation-links

Bottom navigation links

Author: codebender828

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

@@ -0,0 +1,78 @@
+<template>
+  <div v-show="visible === true">
+    <CFlex justify="space-between">
+      <div>
+        <CLink v-if="prevName" as="router-link" class="link" :to="prevPath">
+          <c-button left-icon="chevron-left" border-color="green.500" variant-color="green" variant="outline">
+            {{ prevName }}
+          </c-button>
+        </CLink>
+        <div v-else />
+      </div>
+
+      <div>
+        <CLink v-if="nextName" as="router-link" class="link" :to="nextPath">
+          <c-button right-icon="chevron-right" border-color="green.500" variant-color="green" variant="outline">
+            {{ nextName }}
+          </c-button>
+        </CLink>
+
+        <div v-else />
+      </div>
+    </CFlex>
+  </div>
+</template>
+
+<script>
+import { CLink, CFlex, CButton } from '@chakra-ui/vue'
+import { findNextAndPrevRoute } from '../utils'
+
+export default {
+  components: {
+    CLink,
+    CFlex,
+    CButton
+  },
+  data: () => ({
+    prevPath: '',
+    prevName: '',
+    nextPath: '',
+    nextName: '',
+    visible: true
+  }),
+  watch: {
+    '$route.path' (nextPath) {
+      const { prev, next } = findNextAndPrevRoute(nextPath)
+
+      this.prevPath = prev.path
+      this.prevName = prev.name
+      this.nextPath = next.path
+      this.nextName = next.name
+    }
+  },
+  created () {
+    const { prev, next } = findNextAndPrevRoute(this.$route.path)
+
+    if (!prev.path && !next.path) {
+      this.visible = false
+    }
+    this.prevPath = prev.path
+    this.prevName = prev.name
+    this.nextPath = next.path
+    this.nextName = next.name
+    console.log(this.prevName, this.nextName)
+  }
+}
+</script>
+
+<style lang="scss">
+  .link {
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+</style>

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

@@ -103,29 +103,7 @@
 <script>
 import { boxProps, CBox, CHeading, CPseudoBox } from '@chakra-ui/vue'
 import { stringToUrl } from '../utils'
-import { components as componentLinks } from '../utils/all-routes'
-
-const topNavLinks = [
-  'Getting Started',
-  'With Nuxt',
-  'Plugin Options',
-  'Principles',
-  'Style Props',
-  'Theme',
-  'Extending Theme',
-  'Color Mode',
-  'Responsive Styles',
-  'Starters'
-]
-
-const aboutNavLinks = [
-  'Why Chakra UI',
-  'Accessibility',
-  'Constraint Based Design',
-  'Contributing',
-  'Recipes',
-  'Storybook'
-]
+import { components as componentLinks, topNavLinks, aboutNavLinks } from '../utils/all-routes'
 
 export default {
   name: 'SideNavContent',

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

@@ -28,6 +28,7 @@
                 </keep-alive>
                 <Footer v-if="$route.path === '/'" />
                 <FileContributors />
+                <BottomLink 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 BottomLink from '../components/BottomLink'
 
 // import { stringToUrl } from '../utils'
 
@@ -68,7 +70,8 @@ export default {
     Sidebar,
     Footer,
     CReset,
-    CFlex
+    CFlex,
+    BottomLink
   },
   data () {
     return {

packages/chakra-ui-docs/utils/all-routes.js

@@ -6,7 +6,6 @@
  */
 
 export const components = [
-  'Index',
   'Accordion',
   'Alert',
   'AlertDialog',
@@ -60,23 +59,23 @@ export const components = [
 export const topNavLinks = [
   'Getting Started',
   'With Nuxt',
+  'Plugin Options',
   'Principles',
   'Style Props',
-  'Plugin Options',
   'Theme',
   'Extending Theme',
   'Color Mode',
   'Responsive Styles',
-  'Starters',
-  'Recipes',
-  'Storybook'
+  'Starters'
 ]
 
 export const aboutNavLinks = [
   'Why Chakra UI',
   'Accessibility',
   'Constraint Based Design',
-  'Contributing'
+  'Contributing',
+  'Recipes',
+  'Storybook'
 ]
 
 export const footerLinks = [

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

@@ -1,3 +1,5 @@
+import { topNavLinks, components, aboutNavLinks } from './all-routes'
+
 export const stringToUrl = (str, path = '/') => {
   return `${path}${str
     .toLowerCase()
@@ -17,3 +19,30 @@ export const removeHyphenFromString = (hyphenatedString) => {
   const str = hyphenatedString.split('-')
   return str.join(' ')
 }
+
+export const findNextAndPrevRoute = (path) => {
+  console.log(path)
+  const orderedRoutes = [...topNavLinks, ...aboutNavLinks, ...components]
+
+  let isValidRoutePath = false
+  const extractedRoutes = []
+  orderedRoutes.forEach((singleRoute) => {
+    const urlString = stringToUrl(singleRoute)
+    if (urlString === path) {
+      isValidRoutePath = true
+    }
+    extractedRoutes.push({ name: singleRoute, path: urlString })
+  })
+
+  console.log(isValidRoutePath)
+  if (isValidRoutePath === false) {
+    return { prev: '', next: '' }
+  }
+
+  const currentRouteIndex = extractedRoutes.map(route => route.path).indexOf(path)
+
+  const nextPage = extractedRoutes[currentRouteIndex + 1]
+  const prevPage = extractedRoutes[currentRouteIndex - 1]
+
+  return { prev: prevPage || '', next: nextPage || '' }
+}