add navigation

src/App.vue

@@ -1,13 +1,45 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <NavItem
+        v-for="item in nav"
+        v-bind:key="item.id"
+        :name="item.name"
+        :link="item.link"
+      ></NavItem>
     </div>
     <router-view />
   </div>
 </template>
 
+<script>
+import { ref } from "vue";
+import axios from "axios";
+import NavItem from "./components/NavItem";
+
+const nav = ref([]);
+
+export default {
+  setup() {
+    return {
+      nav
+    };
+  },
+  mounted() {
+    const path = this.$root.$route.fullPath.substr(1);
+
+    axios
+      .get(
+        `http://redaxo.localhost/?rex-api-call=headless_nav&path=${path}&levels=1`
+      )
+      .then(response => (nav.value = response.data));
+  },
+  components: {
+    NavItem
+  }
+};
+</script>
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -26,6 +58,10 @@
   color: #2c3e50;
 }
 
+#nav a:not(:last-child) {
+  margin-right: 10px;
+}
+
 #nav a.router-link-exact-active {
   color: #42b983;
 }

src/components/NavItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <router-link :to="link">{{ name }}</router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+      default: ""
+    },
+    link: {
+      type: String,
+      required: true,
+      default: ""
+    },
+    active: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    children: {
+      required: true,
+      default: []
+    }
+  }
+};
+</script>