improve nav

docs/src/layouts/App/index.vue

@@ -10,15 +10,20 @@
     <div class="app__content">
       <div class="app__inner">
         <div class="app__content-inner">
-          <aside class="app__sidebar">
-            <ul>
-              <li v-for="edge in $static.allPost.edges" :key="edge.node.id">
-                <g-link class="app__link" :to="edge.node.path">
-                  {{ edge.node.title }}
-                </g-link>
-              </li>
-            </ul>
-          </aside>
+          <nav class="app__sidebar">
+            <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
+              <div class="app__link-group-title">
+                {{ linkGroup.title }}
+              </div>
+              <ul>
+                <li v-for="(item, j) in linkGroup.items" :key="j">
+                  <g-link class="app__link" :to="item.link">
+                    {{ item.title }}
+                  </g-link>
+                </li>
+              </ul>
+            </div>
+          </nav>
           <main class="app__main">
             <slot/>
           </main>
@@ -33,19 +38,22 @@ query {
   metadata {
     siteName
   }
-  allPost {
-    edges {
-      node {
-        id
-        title
-        path
-      }
-    }
-  }
 }
 </static-query>
 
+<script>
+import linkGroups from '@/data/links.yaml'
+
+export default {
+  data() {
+    return {
+      linkGroups
+    }
+  }
+}
+</script>
+
 <style lang="scss" src="./fonts.scss"></style>
-<style lang="scss" src="./base.scss" />
+<style lang="scss" src="./base.scss"></style>
 <style lang="scss" src="./prism.scss"></style>
-<style lang="scss" src="./style.scss" scoped />
+<style lang="scss" src="./style.scss" scoped></style>