chore(#150): update API page and components

docs/components/app/Header.vue

@@ -21,16 +21,7 @@
       <span class="text-lg font-bold">{{ title }}</span>
     </div>
     <div class="flex-none hidden lg:block">
-      <ul class="horizontal menu">
-        <li v-for="(link, key) of links" :key="key">
-          <component
-            :is="link.component"
-            class="rounded-btn"
-            v-bind="link.props"
-            v-text="link.text"
-          />
-        </li>
-      </ul>
+      <AppMenu class="horizontal" />
     </div>
   </div>
 </template>
@@ -43,30 +34,5 @@ export default {
       required: true,
     },
   },
-
-  data: () => ({
-    links: [
-      {
-        component: "NuxtLink",
-        text: "Home",
-        props: { to: "/" },
-      },
-      {
-        component: "NuxtLink",
-        text: "API",
-        props: { to: "/api" },
-      },
-      // TODO: Add guide.
-      // TODO: Add external icon.
-      {
-        component: "a",
-        text: "GitHub",
-        props: {
-          href: "https://github.com/druxt/druxt.js",
-          target: "_blank",
-        },
-      },
-    ],
-  }),
 };
 </script>

docs/components/app/Menu.vue

@@ -1,8 +1,8 @@
 <template>
   <ul class="menu">
     <slot name="title" />
-    <li v-for="item of $store.state.menu" :key="item.path">
-      <NuxtLink class="rounded-btn" :to="item.path" v-text="item.title" />
+    <li v-for="(item, key) of $store.state.menu" :key="key">
+      <component :is="item.component" class="rounded-btn" v-bind="item.props" v-text="item.text" />
     </li>
   </ul>
 </template>

docs/components/app/Sidebar.vue

@@ -25,8 +25,8 @@
       <li>
         <NuxtLink class="rounded-btn" to="/api/packages">Packages</NuxtLink>
         <!-- <ul class="menu">
-          <li v-for="module of $store.state.modules" :key="module">
-            <NuxtLink class="rounded-btn" :to="`/api/packages/${module}`" v-text="module" />
+          <li v-for="item of $store.state.packages" :key="item">
+            <NuxtLink class="rounded-btn" :to="`/api/packages/${item}/`" v-text="item" />
           </li>
         </ul> -->
       </li>

docs/pages/api/_.vue

@@ -3,7 +3,11 @@
     <!-- TODO: Add link to GitHub -->
     <div class="card shadow bg-white mb-10">
       <div class="card-body">
-        <span class="mb-3 text-lg font-mono">{{ dir }}</span>
+        <div class="text-sm breadcrumbs">
+          <ul>
+            <li v-for="dir of dirs" :key="dir" v-text="dir" />
+          </ul>
+        </div>
         <h2 class="mb-5 text-3xl">{{ title }}</h2>
 
         <div>
@@ -50,9 +54,9 @@ export default {
   },
 
   computed: {
-    module: ({ document }) => document.dir.split("/packages/")[1],
+    module: ({ document }) => document.dir.split("/")[3],
 
-    dir: ({ document }) => document.dir.replace("/api/", "/src/"),
+    dirs: ({ document }) => document.dir.replace("/api/", "src/").split("/"),
 
     title: ({ document }) => document.title,
   },

docs/pages/api/packages.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <h2 class="text-2xl border-b mb-10">Modules</h2>
+    <h2 class="text-2xl border-b mb-10">Packages</h2>
 
     <ul class="menu">
       <li
-        v-for="module of $store.state.modules"
-        :key="module"
+        v-for="item of $store.state.packages"
+        :key="item"
       >
-        <NuxtLink :to="`/api/packages/${module}/`" v-text="module" />
+        <NuxtLink :to="`/api/packages/${item}/`" v-text="item" />
       </li>
     </ul>
   </div>

docs/store/state.js

@@ -8,9 +8,9 @@ export default () => ({
     path: '/api',
   }],
 
-  // Module list.
+  // Package list.
   // TODO: get this data programatically.
-  modules: [
+  packages: [
     'druxt',
     'breadcrumb',
     'blocks',