Add navigation to and from instrument overview

client/src/components/InstrumentTeaser.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="instrument-teaser">
+  <router-link tag="div" :to="{name: 'instrument', params: {slug: slug}}" class="instrument-teaser">
     <h3 class="instrument-teaser__title">{{title}}</h3>
     <p class="instrument-teaser__text" v-html="teaser">
     </p>
-  </div>
+  </router-link>
 </template>
 
 <script>
   import teaser from '@/helpers/teaser';
 
   export default {
-    props: ['title', 'contents'],
+    props: ['title', 'contents', 'slug'],
 
     computed: {
       teaser() {
@@ -30,6 +30,7 @@
     padding: $medium-spacing;
     @include widget-shadow;
     width: 100%;
+    cursor: pointer;
 
     &__title {
       @include heading-3;

client/src/components/book-navigation/BookNavigation.vue

@@ -4,8 +4,8 @@
       <book-topic-navigation></book-topic-navigation>
     </sub-navigation-item>
     <sub-navigation-item title="Instrument">
-        <router-link tag="div" class="book-subnavigation__item" to="/basic-knowledge">Sprache und Kommunikation</router-link>
-        <router-link tag="div" class="book-subnavigation__item" to="/basic-knowledge">Gesellschaft</router-link>
+        <router-link tag="div" class="book-subnavigation__item" to="/instruments/sprache-kommunikation">Sprache und Kommunikation</router-link>
+        <router-link tag="div" class="book-subnavigation__item" to="/instruments/gesellschaft">Gesellschaft</router-link>
     </sub-navigation-item>
     <sub-navigation-item title="News">
       <template slot="title">

client/src/pages/instrumentOverview.vue

@@ -2,13 +2,12 @@
   <div class="instrument-overview">
     <div class="instrument-overview__heading">
       <h1 class="instrument-overview__title">
-        Instrument:<br> Sprache und Kommunikation
+        Instrument:<br> {{instrumentType}}
       </h1>
     </div>
     <div class="instrument-overview__list">
       <instrument-teaser
-        :title="instrument.title"
-        :contents="instrument.contents"
+        v-bind="instrument"
         v-for="instrument in instruments"
         :key="instrument.id"
       ></instrument-teaser>
@@ -25,11 +24,19 @@
       InstrumentTeaser
     },
 
+    computed: {
+      instrumentType () {
+        return this.$route.params.slug === 'gesellschaft' ? 'Gesellschaft' : 'Sprache und Kommunikation';
+      }
+    },
+
     apollo: {
       instruments: {
         query: INSTRUMENTS_QUERY,
-        variables: {
-          type: 'society'
+        variables() {
+          return {
+            type: this.$route.params.slug === 'gesellschaft' ? 'society' : 'language_communication'
+          }
         },
         manual: true,
         result({data, loading, networkStatus}) {

client/src/styles/_navigation.scss

@@ -57,6 +57,7 @@
     padding: $large-spacing;
     width: 100%;
     box-sizing: border-box;
+    margin-top: 17px;
 
     &:empty {
       display: none;