chore(#150): update navigation components

docs/components/app/Menu.vue

@@ -2,12 +2,14 @@
   <ul class="menu">
     <slot name="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"
-      />
+      <component :is="item.component" class="rounded-btn" v-bind="item.props">
+        <component
+          :is="`app-icon-${item.icon}`"
+          v-if="item.icon"
+          class="inline-block w-5 h-5 mr-2 stroke-current"
+        />
+        {{ item.text }}
+      </component>
       <ul
         v-if="children && item.children"
         v-show="$route.path.startsWith(item.props.to)"

docs/components/app/Sidebar.vue

@@ -6,7 +6,13 @@
         <span>Recent documents</span>
       </li>
       <li v-for="(item, key) of $store.state.recent" :key="key">
-        <NuxtLink class="rounded-btn" :to="item.to" v-text="item.text" />
+        <NuxtLink class="rounded-btn" :to="item.to">
+          <component
+            :is="`app-icon-${item.to.slice(1).split('/')[0]}`"
+            class="inline-block w-5 h-5 mr-2 stroke-current text-gray-400"
+          />
+          {{ item.text }}
+        </NuxtLink>
       </li>
     </ul>
 

docs/components/app/icon/Api.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+    />
+  </svg>
+</template>

docs/components/app/icon/External.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+    />
+  </svg>
+</template>

docs/components/app/icon/Guide.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+    />
+  </svg>
+</template>

docs/components/app/icon/Home.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="h-6 w-6"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+    />
+  </svg>
+</template>

docs/pages/api/_.vue

@@ -3,7 +3,10 @@
     <!-- TODO: Add link to GitHub -->
     <div class="text-sm breadcrumbs">
       <ul>
-        <li v-for="dir of dirs" :key="dir" v-text="dir" />
+        <li v-for="({ text, path }, index) of dirs" :key="index">
+          <NuxtLink v-if="path" :to="path" v-text="text" />
+          <span v-else v-text="text" />
+        </li>
       </ul>
     </div>
     <h2 class="mb-5 text-3xl">{{ title }}</h2>
@@ -53,7 +56,22 @@ export default {
   computed: {
     module: ({ document }) => document.dir.split("/")[3],
 
-    dirs: ({ document }) => document.dir.replace("/api/", "src/").split("/"),
+    dirs: ({ document }) => {
+      const dirs = document.dir.replace("/api/", "src/").split("/");
+      return dirs.map((dir, index) => {
+        let path;
+        if (index === 1) path = "/api";
+        if (index > 1)
+          path = dirs
+            .slice(0, index + 1)
+            .join("/")
+            .replace("src/", "/api/");
+        return {
+          path,
+          text: dir,
+        };
+      });
+    },
 
     title: ({ document }) => document.title,
   },

docs/store/index.js

@@ -1,13 +1,23 @@
 export const actions = {
   async nuxtServerInit ({ commit }, { $content }) {
     try {
-      const index = await $content("guide").only(["title"]).fetch();
-      const children = index.map((o) => ({
+      // Add Guide menu children to the vuex store.
+      const apiIndex = await $content("api").only(["title"]).fetch();
+      const apiChildren = apiIndex.map((o) => ({
+        component: "NuxtLink",
+        text: o.title,
+        props: { to: o.path.replace("/README", "") },
+      }));
+      commit("addMenuChildren", { children: apiChildren, parent: "/api" });
+
+      // Add Guide menu children to the vuex store.
+      const guideIndex = await $content("guide").only(["title"]).fetch();
+      const guideChildren = guideIndex.map((o) => ({
         component: "NuxtLink",
         text: o.title,
         props: { to: o.path },
       }));
-      commit("addMenuChildren", { children, parent: "/guide" });
+      commit("addMenuChildren", { children: guideChildren, parent: "/guide" });
     } catch (err) {
       console.log(err)
     }

docs/store/state.js

@@ -3,46 +3,35 @@ export default () => ({
   menu: [{
     component: "NuxtLink",
     text: "Home",
+    icon: "home",
     props: { to: "/" },
     children: [],
   },
   {
     component: "NuxtLink",
     text: "API",
+    icon: "api",
     props: { to: "/api" },
     children: [],
   },
   {
     component: "NuxtLink",
     text: "Guide",
+    icon: "guide",
     props: { to: "/guide" },
     children: [],
   },
   {
     component: "a",
     text: "GitHub",
-    // TODO: Add external icon.
+    icon: "external",
     props: {
       href: "https://github.com/druxt/druxt.js",
       target: "_blank",
     },
     children: [],
   }],
 
-  // Package list.
-  // TODO: get this data programatically.
-  packages: [
-    'druxt',
-    'breadcrumb',
-    'blocks',
-    'entity',
-    'menu',
-    'router',
-    'schema',
-    'site',
-    'views'
-  ],
-
   // Recently opened documents.
   recent: [],
 })