Add subnavigation to routes

client/src/components/BookSidebar.vue

@@ -1,63 +0,0 @@
-<template>
-  <aside class="book-sidebar">
-    <h2 class="book-sidebar__title">Themen</h2>
-    <nav class="book-topics">
-      <div class="book-topics__topic"
-           :class="{'book-topics__topic--active': topic.active}"
-           v-for="topic in topics"
-           :key="topic.id">{{topic.id}}. {{topic.title}}
-      </div>
-    </nav>
-    <h2 class="book-sidebar__title">Basiswissen</h2>
-    <h2 class="book-sidebar__title">ABU News</h2>
-  </aside>
-
-</template>
-
-<script>
-  export default {
-    data: () => {
-      return {
-        topics: [
-          {id: 2, title: 'Geld und Kauf', active: true},
-        ]
-      }
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .book-sidebar {
-    display: none;
-
-    @include desktop {
-      display: block;
-    }
-
-    &__title {
-      font-size: toRem(17px);
-      font-weight: $font-weight-regular;
-      color: $color-grey;
-    }
-  }
-
-  .book-topics {
-    padding-left: 24px;
-    margin-bottom: 25px;
-
-    &__topic {
-      font-family: $sans-serif-font-family;
-      font-size: toRem(14px);
-      margin-bottom: 20px;
-      color: $color-grey;
-
-      &--active {
-        color: $color-brand;
-      }
-    }
-  }
-</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <aside class="book-navigation">
+    <book-navigation-item title="Themen">
+      <book-topic-navigation></book-topic-navigation>
+    </book-navigation-item>
+    <book-navigation-item title="Basiswissen">
+    </book-navigation-item>
+    <book-navigation-item title="News">
+      <template slot="title">
+        <h2 class="book-navigation__title" slot="title">ABU News</h2>
+      </template>
+    </book-navigation-item>
+  </aside>
+</template>
+
+<script>
+  import BookNavigationItem from '@/components/book-navigation/BookNavigationItem';
+  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+
+  export default {
+    components: {
+      BookNavigationItem,
+      BookTopicNavigation
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .book-navigation {
+    display: none;
+
+    @include desktop {
+      display: flex;
+    }
+
+    padding: $medium-spacing;
+  }
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="book-navigation-item" :class="{ 'book-navigation-item--active': show}">
+    <div class="book-navigation-item__title" @click="show = !show">
+      {{title}}
+      <chevron-down class="book-navigation-item__icon book-navigation-item__chevron-down"></chevron-down>
+      <chevron-up class="book-navigation-item__icon book-navigation-item__chevron-up"></chevron-up>
+    </div>
+    <div class="book-navigation-item__nav-items" v-if="show">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import ChevronDown from '@/components/icons/ChevronDown';
+  import ChevronUp from '@/components/icons/ChevronUp';
+
+  export default {
+    props: ['title'],
+
+    components: {
+      ChevronDown,
+      ChevronUp
+    },
+
+    data() {
+      return {
+        show: true
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
+
+  .book-navigation-item {
+    z-index: 10;
+
+    margin-right: $large-spacing;
+
+    &__title {
+      @include small-text;
+
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-column-gap: $small-spacing;
+      align-items: center;
+
+      cursor: pointer;
+    }
+
+    &__icon {
+      width: 12px;
+      height: 12px;
+    }
+
+    &__chevron-up {
+      display: none;
+    }
+
+    &__nav-items {
+      box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.12);
+      position: absolute;
+      left: 0;
+      margin-top: $medium-spacing;
+      background-color: $color-white;
+      padding: $small-spacing $medium-spacing;
+      width: 100%;
+      box-sizing: border-box;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &--active &__title {
+      color: $color-brand;
+    }
+    &--active &__icon {
+      fill: $color-brand;
+    }
+
+    &--active &__chevron-up {
+      display: block;
+    }
+    &--active &__chevron-down {
+      display: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+  <nav class="book-topics">
+    <div class="book-topics__topic"
+         :class="{'book-topics__topic--active': topic.active}"
+         v-for="topic in topics"
+         :key="topic.id">{{topic.id}}. {{topic.title}}
+    </div>
+  </nav>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        topics: [
+          {id: 2, title: 'Geld und Kauf', active: true},
+          {id: 3, title: 'Geld und Kauf', active: false},
+          {id: 4, title: 'Geld und Kauf', active: false},
+          {id: 5, title: 'Geld und Kauf', active: false},
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .book-topics {
+    padding-left: 24px;
+    margin-bottom: 25px;
+
+    &__topic {
+      font-family: $sans-serif-font-family;
+      font-size: toRem(14px);
+      margin-bottom: 20px;
+      color: $color-grey;
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+  }
+</style>

client/src/components/icons/ChevronDown.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path d="M50,74.07,6.86,30.93A2.93,2.93,0,0,1,11,26.79l39,39,39-39a2.93,2.93,0,1,1,4.15,4.15Z"/>
+  </svg>
+</template>

client/src/components/icons/ChevronRight.vue

@@ -1,6 +1,5 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    arrow-right</title>
     <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/icons/ChevronUp.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path d="M50,18.93,93.14,62.07A2.93,2.93,0,1,1,89,66.21l-39-39-39,39a2.93,2.93,0,1,1-4.15-4.15Z"/>
+  </svg>
+</template>

client/src/layouts/DefaultLayout.vue

@@ -7,6 +7,8 @@
         <user-widget v-bind="me"></user-widget>
         <logout-widget></logout-widget>
       </div>
+      <book-navigation v-if="showSubnavigation">
+      </book-navigation>
     </header>
 
     <filter-bar v-if="showFilter"></filter-bar>
@@ -18,6 +20,7 @@
 
 <script>
   import TopNavigation from '@/components/TopNavigation.vue';
+  import BookNavigation from '@/components/book-navigation/BookNavigation';
   import UserWidget from '@/components/UserWidget.vue';
   import FilterBar from '@/components/FilterBar.vue';
   import LogoutWidget from '@/components/LogoutWidget.vue';
@@ -28,13 +31,17 @@
       TopNavigation,
       UserWidget,
       FilterBar,
-      LogoutWidget
+      LogoutWidget,
+      BookNavigation
     },
 
     computed: {
       showFilter() {
         return this.$route.meta.filter;
       },
+      showSubnavigation() {
+        return this.$route.meta.subnavigation;
+      },
       specialContainerClass() {
         let cls = this.$store.state.specialContainerClass;
         return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]

client/src/pages/book.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="book">
-    <book-sidebar>
+    <main class="book__content">
-    </book-sidebar>
-    <main>
       <router-view></router-view>
     </main>
 
@@ -11,11 +9,11 @@
 </template>
 
 <script>
-  import BookSidebar from '@/components/BookSidebar.vue';
+  import BookNavigation from '@/components/book-navigation/BookNavigation.vue';
 
   export default {
     components: {
-      BookSidebar
+      BookNavigation
     }
   }
 </script>
@@ -24,19 +22,22 @@
   @import "@/styles/_mixins.scss";
 
   .book {
-    display: -ms-grid;
+    &__content {
-    @supports (display: grid) {
+      display: -ms-grid;
-      display: grid;
+      @supports (display: grid) {
-    }
+        display: grid;
+      }
 
-    grid-column-gap: 50px;
+      grid-column-gap: 50px;
 
-    justify-items: start;
+      justify-items: start;
 
-    padding: 0 24px;
+      padding: 0 24px;
 
-    @include desktop {
+      @include desktop {
-      grid-template-columns: 305px 1fr;
+        grid-template-columns: 1200px;
+        justify-content: center;
+      }
     }
   }
 </style>

client/src/pages/module-base.vue

@@ -26,7 +26,7 @@
     justify-items: center;
 
     @include desktop {
-      grid-template-columns: 400px minmax(max-content, 1fr) minmax(auto, 400px);
+      grid-template-columns: 1fr;
     }
 
     /*

client/src/router/index.js

@@ -53,8 +53,11 @@ const routes = [
     path: '/book',
     name: 'book',
     component: book,
+    meta: {
+      subnavigation: true
+    },
     children: [
-      {path: 'topic/:topicSlug', component: topic}
+      {path: 'topic/:topicSlug', component: topic, meta: {subnavigation: true}}
     ]
   },
   {path: '*', component: p404}