From d6ee3a290f3ffe273392a7ad796a726882195277 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 13 Aug 2018 18:59:32 +0200
Subject: [PATCH] Add book sidebar component

---
 client/src/components/BookSidebar.vue | 40 +++++++++++++++++++++++++++
 client/src/pages/book.vue             | 29 ++++++++-----------
 2 files changed, 52 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/BookSidebar.vue

diff --git a/client/src/components/BookSidebar.vue b/client/src/components/BookSidebar.vue
new file mode 100644
index 00000000..3dcda7e2
--- /dev/null
+++ b/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>
diff --git a/client/src/pages/book.vue b/client/src/pages/book.vue
index 35fe39cd..3c5fd537 100644
--- a/client/src/pages/book.vue
+++ b/client/src/pages/book.vue
@@ -1,22 +1,7 @@
 <template>
   <div class="book">
-    <aside>
-      <h2>Themen</h2>
-      <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>
+      <book-sidebar>
+      </book-sidebar>
     <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;