Update styling

client/src/components/HeaderBar.vue

@@ -40,12 +40,6 @@
       CurrentClass,
       Hamburger
     },
-
-    computed: {
-      showSubnavigation() {
-        return this.$route.meta.subnavigation;
-      }
-    },
   }
 </script>
 
@@ -68,6 +62,8 @@
 
     grid-template-columns: 1fr 1fr 1fr;
 
+    border-bottom: 1px solid $color-silver;
+
     @include desktop {
       grid-template-columns: 50px 1fr 200px;
       grid-template-rows: 50px;

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

@@ -5,6 +5,7 @@
       :class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
       :key="topic.id"
       tag="div"
+      active-class="book-subnavigation__item--active"
       class="book-topics__topic book-subnavigation__item"
       v-for="topic in topics"
       @click.native="closeSidebar('navigation')">

client/src/components/icons/ChevronLeft.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    class="chevron">
+    <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z"/>
+  </svg>
+</template>
+
+<style scoped lang="scss">
+  .chevron {
+    transform: rotate(180deg);
+  }
+</style>

client/src/components/icons/ChevronRight.vue

@@ -2,7 +2,7 @@
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
-    id="shape">
+    class="chevron">
     <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z"/>
   </svg>
 </template>

client/src/components/modules/ModuleNavigation.vue

@@ -1,22 +1,12 @@
 <template>
   <nav
-    class="module-navigation sub-navigation"
-    v-if="canManageContent">
-    <div class="sub-navigation-item">
-      <router-link
-        :to="moduleContentLink"
-        class="sub-navigation-item__title">Modul</router-link>
-    </div>
-    <sub-navigation-item title="Ergebnisse">
-      <router-link
-        :to="submissionsLink(assignment)"
-        :key="assignment.id"
-        class="module-navigation__anchor sub-navigation-item__link"
-        exact-active-class="module-navigation__anchor--active"
-        v-for="assignment in assignments"
-      >{{ assignment.value.assignment }}
-      </router-link>
-    </sub-navigation-item>
+    class="module-navigation sub-navigation">
+    <router-link
+      :to="{name: 'topic', params: {topicSlug: module.topic.slug}}"
+      class="sub-navigation-item">
+      <chevron-left class="sub-navigation-item__icon" />
+      Thema: {{ module.topic.title }}
+    </router-link>
     <div
       class="module-navigation__module-content"
       v-if="false"> <!-- Do not display this for now, might be used later again though -->
@@ -51,7 +41,10 @@
       </div>
     </div>
 
-    <div class="module-navigation__toggle-menu">
+    <div
+      class="module-navigation__toggle-menu"
+      v-if="canManageContent"
+    >
       <toggle-editing v-if="onModulePage"/>
       <toggle-solutions-for-module
         :slug="module.slug"
@@ -71,6 +64,7 @@
   import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
   import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
   import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
+  import ChevronLeft from '@/components/icons/ChevronLeft';
 
   export default {
     apollo: {
@@ -83,13 +77,15 @@
     components: {
       SubNavigationItem,
       ToggleSolutionsForModule,
-      ToggleEditing
+      ToggleEditing,
+      ChevronLeft
     },
 
     data() {
       return {
         module: {
-          assignments: []
+          assignments: [],
+          topic: {}
         },
         me: {
           permissions: []
@@ -145,8 +141,8 @@
         return assignments;
       },
       concatAssignments(foundAssignments, node) {
-          let foundAssignment = this.findAssignment(node);
-          return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
+        let foundAssignment = this.findAssignment(node);
+        return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
       },
       findAssignment(node) {
         if (node.type && node.type === 'assignment') {
@@ -201,11 +197,13 @@
       font-size: 1.0625rem;
       cursor: pointer;
     }
+
     &__anchors {
       display: flex;
       flex-direction: column;
       padding: 16px 24px 0;
     }
+
     &__anchor {
       @include module-navigation-typography;
       font-size: 0.875rem;

client/src/graphql/gql/fragments/moduleParts.gql

@@ -7,6 +7,10 @@ fragment ModuleParts on ModuleNode {
   slug
   heroImage
   solutionsEnabled
+  topic {
+      slug
+      title
+  }
   bookmark {
     note {
       id