From 9e3a7d16078c0805085ae4e6cbfa59d87874fc89 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 26 Nov 2019 16:43:23 +0100
Subject: [PATCH] Add topics to mobile navigation

---
 client/src/components/MobileNavigation.vue    |  2 +-
 client/src/components/MobileSubnavigation.vue | 30 ++++++++++
 client/src/components/TopNavigation.vue       | 58 +++++++++++++++----
 .../book-navigation/BookTopicNavigation.vue   |  8 ++-
 .../book-navigation/SubNavigationItem.vue     | 12 ++--
 5 files changed, 93 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/MobileSubnavigation.vue

diff --git a/client/src/components/MobileNavigation.vue b/client/src/components/MobileNavigation.vue
index 2a69c4a3..ff37a528 100644
--- a/client/src/components/MobileNavigation.vue
+++ b/client/src/components/MobileNavigation.vue
@@ -64,7 +64,7 @@
     display: grid;
 
     grid-template-columns: 1fr 50px;
-    grid-template-rows: 50px 100px auto 100px;
+    grid-template-rows: 50px 200px auto 100px;
 
     grid-template-areas: "m m" "m m" "s s";
 
diff --git a/client/src/components/MobileSubnavigation.vue b/client/src/components/MobileSubnavigation.vue
new file mode 100644
index 00000000..034cbc62
--- /dev/null
+++ b/client/src/components/MobileSubnavigation.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="mobile-subnavigation">
+    <h3 class="mobile-subnavigation__title">Themen</h3>
+    <book-topic-navigation :mobile="true"></book-topic-navigation>
+  </div>
+</template>
+
+<script>
+  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+
+  export default {
+    components: {
+      BookTopicNavigation
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .mobile-subnavigation {
+    &__title {
+      @include small-text;
+      color: rgba($color-white, 0.6);
+
+      margin-bottom: $small-spacing;
+    }
+  }
+</style>
diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
index 491c2de5..921facdb 100644
--- a/client/src/components/TopNavigation.vue
+++ b/client/src/components/TopNavigation.vue
@@ -1,17 +1,31 @@
 <template>
   <nav class="top-navigation" :class="{'top-navigation--mobile': mobile}">
-    <router-link to="/book/topic/berufliche-grundbildung" active-class="top-navigation__link--active"
-                 :class="{'top-navigation__link--active': isActive('book')}"
-                 class="top-navigation__link">Inhalte
-    </router-link>
-    <router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume
-    </router-link>
-    <router-link to="/portfolio" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio
-    </router-link>
+    <div class="top-navigation__item">
+      <router-link to="/book/topic/berufliche-grundbildung" active-class="top-navigation__link--active"
+                   :class="{'top-navigation__link--active': isActive('book')}"
+                   class="top-navigation__link">Inhalte
+      </router-link>
+
+      <mobile-subnavigation v-if="mobile"></mobile-subnavigation>
+
+    </div>
+
+    <div class="top-navigation__item">
+      <router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume
+      </router-link>
+    </div>
+
+    <div class="top-navigation__item">
+      <router-link to="/portfolio" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio
+      </router-link>
+    </div>
+
   </nav>
 </template>
 
 <script>
+  import MobileSubnavigation from '@/components/MobileSubnavigation';
+
   export default {
     props: {
       mobile: {
@@ -19,6 +33,10 @@
       }
     },
 
+    components: {
+      MobileSubnavigation
+    },
+
     methods: {
       isActive(linkName) {
         return linkName === 'book' && this.$route.path.indexOf('module') > -1;
@@ -52,13 +70,31 @@
       flex-direction: column;
 
       #{$parent}__link {
-        color: rgba($color-white, 0.6);
+        color: $color-white;
         @include heading-4;
         line-height: 2em;
         padding: 0;
+        display: block;
+        margin-bottom: $medium-spacing;
 
-        &--active {
-          color: $color-white;
+        &:only-child {
+          margin-bottom: 0;
+        }
+
+      }
+
+      #{$parent}__item {
+        border-bottom: 1px solid $color-white;
+
+        &:nth-child(1) {
+          order: 3;
+          border-bottom: 0;
+        }
+        &:nth-child(2) {
+          order: 1;
+        }
+        &:nth-child(3) {
+          order: 2;
         }
       }
     }
diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue
index edf1ddb7..f635094f 100644
--- a/client/src/components/book-navigation/BookTopicNavigation.vue
+++ b/client/src/components/book-navigation/BookTopicNavigation.vue
@@ -3,7 +3,7 @@
     <router-link :to="{name: 'topic', params: {topicSlug: topic.slug}}"
       tag="div"
       class="book-topics__topic book-subnavigation__item"
-         :class="{'book-topics__topic--active': topic.active}"
+         :class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
          v-for="topic in topics"
          :key="topic.id">
       {{topic.order}}.
@@ -16,6 +16,12 @@
   import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql';
 
   export default {
+    props: {
+      mobile: {
+        default: false
+      }
+    },
+
     data() {
       return {
         topics: [
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index e6f4c35b..989b936e 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -49,12 +49,16 @@
 
   .book-subnavigation {
     &__item {
-      font-family: $sans-serif-font-family;
-      font-size: toRem(14px);
-      margin-bottom: $medium-spacing;
-      color: $color-silver-dark;
+      @include small-text;
+      margin-bottom: $small-spacing;
       cursor: pointer;
 
+      color: $color-silver-dark;
+
+      &--mobile {
+        color: $color-white;
+      }
+
       &:last-of-type {
         margin-bottom: 0;
       }