docs: dynamically generate sidebar navigation

docs/.vuepress/config.js

@@ -64,7 +64,7 @@ module.exports = {
   description: meta.description,
   head,
   plugins: [
-    require('./generateApiDocs'),
+    require('./generateApiDocs/index'),
     ['@vuepress/google-analytics',{ga: isDeployPreview ? '' : 'UA-12818324-8',}],
     ['@vuepress/pwa', {
       serviceWorker: false,
@@ -130,15 +130,6 @@ module.exports = {
             ['guide/keydown', 'Keydown Events'],
           ],
         },
-        {
-          title: 'API',
-          collapsable: false,
-          children: [
-            ['api/props', 'Props'],
-            ['api/slots', 'Slots'],
-            ['api/events', 'Events'],
-          ],
-        },
       ],
     },
   },

docs/.vuepress/generateApiDocs/generator.js

@@ -0,0 +1,12 @@
+const docs = require('vue-docgen-api');
+const path = require('path');
+
+/**
+ * Generate an object of API documentation.
+ * @param documentationRootDir
+ * @return {Promise<ComponentDoc>}
+ */
+module.exports = async (documentationRootDir) => {
+  const file = path.resolve(documentationRootDir, '../src/components/Select.vue');
+  return await docs.parse(file);
+};

docs/.vuepress/generateApiDocs/index.js

@@ -1,6 +1,6 @@
-const docs = require('vue-docgen-api');
 const path = require('path');
 const fs = require('fs');
+const generator = require('./generator');
 
 /**
  * Get all of the component mixin paths.
@@ -30,11 +30,12 @@ module.exports = (options, {sourceDir}) => ({
    * @return {Promise<{name: string, content: string}>}
    */
   async clientDynamicModules () {
-    const file = path.resolve(sourceDir, '../src/components/Select.vue');
+    const docs = await generator(sourceDir);
+    console.log('Generated API documentation for Select.vue');
 
     return {
       name: 'api.js',
-      content: `export default ${JSON.stringify(await docs.parse(file))}`,
+      content: `export default ${JSON.stringify(docs)}`,
     };
   },
 });

docs/.vuepress/theme/components/SideBarApi.vue

@@ -0,0 +1,67 @@
+<template>
+  <ul>
+    <li>
+      <section class="sidebar-group depth-0">
+        <p class="sidebar-heading open"><span>API</span></p>
+        <ul class="sidebar-links sidebar-group-items">
+          <li v-for="section in docs">
+            <router-link
+              :to="section.url"
+              :class="linkClass(section.url)"
+            >
+              {{ section.title }}
+            </router-link>
+
+            <ul v-if="section.active" class="sidebar-sub-headers">
+              <li v-for="link in section.links" :key="link" class="sidebar-sub-header">
+                <router-link
+                  :to="`${section.url}#${link}`"
+                  :class="linkClass(`${section.url}#${link}`)"
+                >
+                  {{ link }}
+                </router-link>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </section>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { isActive } from '@vuepress/theme-default/util'
+import documentation from '@dynamic/api'
+
+export default {
+  name: "SideBarApi",
+  methods: {
+    isActive,
+    linkClass (path) {
+      return {
+        'active': isActive(this.$route, path),
+        'sidebar-link': true
+      }
+    },
+  },
+  computed: {
+    docs () {
+      return ['Props', 'Events', 'Slots'].map(section => {
+        const lowercase = section.toLowerCase();
+        return {
+          title: section,
+          url: `/api/${lowercase}.html`,
+          links: documentation[lowercase].map(({name}) => name).sort(),
+          active: this.isActive(this.$route, `/api/${lowercase}.html`),
+        };
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+  ul {
+    padding-bottom: 1rem;
+  }
+</style>

docs/.vuepress/theme/layouts/Layout.vue

@@ -1,17 +1,20 @@
 <template>
   <ParentLayout>
-    <CodeFund slot="sidebar-top"/>
+    <CodeFund slot="sidebar-top" />
+    <SideBarApi slot="sidebar-bottom" />
   </ParentLayout>
 </template>
 
 <script>
 import ParentLayout from '@parent-theme/layouts/Layout.vue'
 import CodeFund from '../components/CodeFund.vue'
+import SideBarApi from '../components/SideBarApi.vue'
 
 export default {
   components: {
     ParentLayout,
-    CodeFund
+    CodeFund,
+    SideBarApi
   }
 }
 </script>
@@ -23,5 +26,7 @@ export default {
   }
   #codefund + .sidebar-links {
     padding-top: 1rem;
+    border-bottom: none;
+    padding-bottom: 0.75rem;
   }
 </style>