Add book sidebar component

client/src/components/BookSidebar.vue

@@ -0,0 +1,40 @@
+<template>
+  <aside>
+    <h2>Themen</h2>
+    <ul>
+      <li v-for="topic in topics" :key="id">{{topic.id}}. {{topic.title}}</li>
+      <li></li>
+      <li>3. Geld und Kauf</li>
+      <li>4. Geld und Kauf</li>
+      <li>5. Geld und Kauf</li>
+      <li>6. Geld und Kauf</li>
+      <li>7. Geld und Kauf</li>
+      <li>8. Geld und Kauf</li>
+      <li>9. Geld und Kauf</li>
+    </ul>
+    <h2>Basiswissen</h2>
+    <h2>ABU News</h2>
+  </aside>
+
+</template>
+
+
+<script>
+  export default {
+    data: () => {
+      return {
+        topics: [
+          {id: 1, title: 'Berufliche Grundbildung'},
+          {id: 2, title: 'Geld und Kauf'},
+          {id: 3, title: 'Geld und Kauf'},
+          {id: 4, title: 'Geld und Kauf'},
+          {id: 5, title: 'Kauf und Geld'},
+          {id: 6, title: 'Geld und Kauf'},
+          {id: 7, title: 'Geld und Kauf'},
+          {id: 8, title: 'Geld und Kauf'},
+          {id: 9, title: 'Geld und Kauf'},
+        ]
+      }
+    }
+  }
+</script>

client/src/pages/book.vue

@@ -1,22 +1,7 @@
 <template>
   <div class="book">
-    <aside>
+      <book-sidebar>
-      <h2>Themen</h2>
+      </book-sidebar>
-      <ul>
-        <li>1. Berufliche Grundbildung</li>
-        <li>2. Geld und Kauf</li>
-        <li>3. Geld und Kauf</li>
-        <li>4. Geld und Kauf</li>
-        <li>5. Geld und Kauf</li>
-        <li>6. Geld und Kauf</li>
-        <li>7. Geld und Kauf</li>
-        <li>8. Geld und Kauf</li>
-        <li>9. Geld und Kauf</li>
-      </ul>
-      <h2>Basiswissen</h2>
-      <h2>ABU News</h2>
-
-    </aside>
     <main>
       <router-view></router-view>
     </main>
@@ -25,6 +10,16 @@
 
 </template>
 
+<script>
+  import BookSidebar from '@/components/BookSidebar.vue';
+
+  export default {
+    components: {
+      BookSidebar
+    }
+  }
+</script>
+
 <style scoped lang="scss">
   .book {
     display: grid;