feat: add conditional rendering for links

Author: Easybuoy

packages/chakra-ui-docs/components/BottomNavigationLink.vue renamed to packages/chakra-ui-docs/components/BottomLink.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
     <CFlex justify="space-between">
-      <CLink as="router-link" :v-show="prev !== ''" :to="prev">
-        Prev
-      </CLink>
+      <div>
+        <CLink as="router-link" :to="prev">
+          {{ prev == '' ? "" : "Prev" }}
+        </CLink>
+      </div>
 
-      <CLink as="router-link" :v-show="next !== ''" :to="next">
-        Next
+      <CLink as="router-link" :to="next">
+        {{ next == '' ? "": "Next" }}
       </CLink>
     </CFlex>
   </div>

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

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

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

@@ -24,5 +24,5 @@ export const findNextAndPrevRoute = (path, routes) => {
   const nextPageLink = routes[currentRouteIndex + 1]
   const prevPageLink = routes[currentRouteIndex - 1]
 
-  return { prev: prevPageLink.path, next: nextPageLink.path }
+  return { prev: prevPageLink ? prevPageLink.path : '', next: nextPageLink ? nextPageLink.path : '' }
 }