From b5d9d6a998f15d9204e4a8473c73ead1833566cd Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 2 Jun 2020 16:46:58 +0200
Subject: [PATCH] Refactor handling of mobile view

---
 client/src/components/HeaderBar.vue           |  20 ++-
 .../book-navigation/ContentNavigation.vue     | 102 +++++++++-----
 .../src/components/profile/ProfileSidebar.vue | 130 +++++++++---------
 client/src/pages/start.vue                    |   2 -
 4 files changed, 146 insertions(+), 108 deletions(-)

diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 31b622a9..dde98b7a 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -1,12 +1,11 @@
 <template>
   <header class="header-bar">
-    <content-navigation/>
-    <router-link
-      to="/"
-      class="header-bar__logo"
-      data-cy="home-link">
-      <logo class="header-bar__logo-icon"/>
-    </router-link>
+    <a
+      class="header-bar__sidebar-link"
+      @click="openSidebar('navigation')">
+      <hamburger class="header-bar__sidebar-icon"/>
+    </a>
+    <content-navigation class="header-bar__content-navigation"/>
     <div class="user-header">
       <a
         class="user-header__sidebar-link"
@@ -18,16 +17,15 @@
         v-bind="me"
         data-cy="header-user-widget"/>
     </div>
-    <book-navigation v-if="showSubnavigation"/>
   </header>
 </template>
 
 <script>
   import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
-  import BookNavigation from '@/components/book-navigation/BookNavigation';
   import UserWidget from '@/components/UserWidget.vue';
   import Logo from '@/components/icons/Logo';
   import CurrentClass from '@/components/school-class/CurrentClass';
+  import Hamburger from '@/components/icons/Hamburger';
 
   import openSidebar from '@/mixins/open-sidebar';
   import me from '@/mixins/me';
@@ -38,9 +36,9 @@
     components: {
       ContentNavigation,
       UserWidget,
-      BookNavigation,
       Logo,
-      CurrentClass
+      CurrentClass,
+      Hamburger
     },
 
     computed: {
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index aef366bb..9760f021 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -1,61 +1,99 @@
 <template>
   <nav
-    :class="{'top-navigation--mobile': mobile}"
-    class="top-navigation">
-    <div class="top-navigation__item">
-      <router-link
-        :class="{'top-navigation__link--active': isActive('book')}"
-        to="/book/topic/berufliche-grundbildung"
-        active-class="top-navigation__link--active"
-        class="top-navigation__link"
-        @click.native="hideMobileNavigation">Inhalte
-      </router-link>
+    :class="{'content-navigation--sidebar': isSidebar}"
+    class="content-navigation">
+    <div class="content-navigation__primary">
+      <div class="content-navigation__item">
+        <router-link
+          :class="{'content-navigation__link--active': isActive('book')}"
+          to="/book/topic/berufliche-grundbildung"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link"
+          @click.native="close">Themen
+        </router-link>
 
-      <mobile-subnavigation v-if="mobile"/>
+        <book-topic-navigation
+          v-if="isSidebar"
+        />
 
+      </div>
+
+      <div class="content-navigation__item">
+        <router-link
+          to="/rooms"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link"
+          @click.native="close">Instrumente
+        </router-link>
+      </div>
+
+      <div class="content-navigation__item">
+        <router-link
+          to="/portfolio"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link"
+          @click.native="close">News
+        </router-link>
+      </div>
     </div>
 
-    <div class="top-navigation__item">
-      <router-link
-        to="/rooms"
-        active-class="top-navigation__link--active"
-        class="top-navigation__link"
-        @click.native="hideMobileNavigation">Räume
-      </router-link>
-    </div>
+    <router-link
+      to="/"
+      class="content-navigation__logo"
+      data-cy="home-link"
+      v-if="!isSidebar"
+    >
+      <logo class="content-navigation__logo-icon"/>
+    </router-link>
 
-    <div class="top-navigation__item">
-      <router-link
-        to="/portfolio"
-        active-class="top-navigation__link--active"
-        class="top-navigation__link"
-        @click.native="hideMobileNavigation">Portfolio
-      </router-link>
-    </div>
+    <div class="content-navigation__secondary">
+      <div class="content-navigation__item content-navigation__item--secondary">
+        <router-link
+          to="/rooms"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link content-navigation__link--secondary"
+          @click.native="close">Räume
+        </router-link>
+      </div>
 
+      <div class="content-navigation__item content-navigation__item--secondary">
+        <router-link
+          to="/rooms"
+          active-class="content-navigation__link--active"
+          class="content-navigation__link content-navigation__link--secondary"
+          @click.native="close">Portfolio
+        </router-link>
+      </div>
+    </div>
   </nav>
 </template>
 
 <script>
-  import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation';
+  import Logo from '@/components/icons/Logo';
+  import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+
+  import sidebarMixin from '@/mixins/sidebar';
 
   export default {
     props: {
-      mobile: {
+      isSidebar: {
         default: false
       }
     },
 
+    mixins: [sidebarMixin],
+
     components: {
-      MobileSubnavigation
+      BookTopicNavigation,
+      Logo
     },
 
     methods: {
       isActive(linkName) {
         return linkName === 'book' && this.$route.path.indexOf('module') > -1;
       },
-      hideMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', false);
+      close() {
+        this.closeSidebar('navigation');
       }
     }
   }
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index f748f4c1..cfd8e4ff 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -1,78 +1,82 @@
 <template>
-  <div
-    v-click-outside="closeSidebar"
-    class="profile-sidebar"
-    v-if="sidebar.profile">
-    <a
-      class="profile-sidebar__close-link"
-      @click="close">
-      <cross class="profile-sidebar__close-icon"/>
-    </a>
-    <profile-widget class="profile-sidebar__item"/>
     <div
-      class="profile-sidebar__item"
-      @click="close">
-      <router-link
-        to="/me/activity"
-        class="profile-sidebar__link">Meine Aktivitäten
-      </router-link>
-    </div>
-    <div class="profile-sidebar__item">
-      <h3 class="profile-sidebar__subtitle">Klasse</h3>
-      <class-selection-widget/>
-      <div @click="close">
-        <router-link
-          :to="{name: 'my-class'}"
-          class="profile-sidebar__link">Klassenliste anzeigen
-        </router-link>
-      </div>
-    </div>
-    <div
-      class="profile-sidebar__item"
-      @click="close">
-      <router-link
-        :to="{name:'join-class'}"
-        data-cy="join-class-link"
-        class="profile-sidebar__link">Zugangscode
-        eingeben
-      </router-link>
-    </div>
-    <div class="profile-sidebar__item">
-      <logout-widget/>
-    </div>
+            v-click-outside="closeSidebar"
+            class="profile-sidebar"
+            v-if="sidebar.profile">
+        <a
+                class="profile-sidebar__close-link"
+                @click="close">
+            <cross class="profile-sidebar__close-icon"/>
+        </a>
+        <div class="profile-sidebar__section">
+            <profile-widget class="profile-sidebar__item"/>
+            <div
+                    class="profile-sidebar__item"
+                    @click="close">
+                <router-link
+                        to="/me/activity"
+                        class="profile-sidebar__link">Meine Aktivitäten
+                </router-link>
+            </div>
+        </div>
+        <div class="profile-sidebar__section">
+            <div class="profile-sidebar__item">
+                <class-selection-widget/>
+                <div @click="close">
+                    <router-link
+                            :to="{name: 'my-class'}"
+                            class="profile-sidebar__link">Klassenliste
+                    </router-link>
+                </div>
+            </div>
+        </div>
+        <div class="profile-sidebar__section">
+            <div
+                    class="profile-sidebar__item"
+                    @click="close">
+                <router-link
+                        :to="{name:'join-class'}"
+                        data-cy="join-class-link"
+                        class="profile-sidebar__link">Zugangscode
+                </router-link>
+            </div>
+            <div class="profile-sidebar__item">
+                <logout-widget/>
+            </div>
 
-    <p class="profile-sidebar__support">
-      Supportanfragen: rahel.wenger@hep-verlag.ch
-    </p>
-  </div>
+            <p class="profile-sidebar__support">
+                Supportanfragen: rahel.wenger@hep-verlag.ch
+            </p>
+        </div>
+    </div>
 </template>
 
 <script>
-  import ProfileWidget from '@/components/profile/ProfileWidget';
-  import Cross from '@/components/icons/Cross';
+    import ProfileWidget from '@/components/profile/ProfileWidget';
+    import Cross from '@/components/icons/Cross';
 
-  import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
+    import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
-  import sidebarMixin from '@/mixins/sidebar';
-  import LogoutWidget from '@/components/LogoutWidget';
+    import sidebarMixin from '@/mixins/sidebar';
+    import LogoutWidget from '@/components/LogoutWidget';
 
-  export default {
+    export default {
 
-    mixins: [sidebarMixin],
+        mixins: [sidebarMixin],
 
-    components: {
-      LogoutWidget,
-      ClassSelectionWidget,
-      ProfileWidget,
-      Cross
-    },
+        components: {
+            LogoutWidget,
+            ClassSelectionWidget,
+            ProfileWidget,
+            Cross
+        },
 
-    methods: {
-      close() {
-        this.closeSidebar('profile')
-      }
-    },
-  }
+        methods: {
+            close() {
+                this.closeSidebar('profile')
+            }
+        },
+    }
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index fc49244f..328d1ce7 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -2,8 +2,6 @@
   <div class="start-page">
     <header-bar class="start-page__header"/>
 
-    <mobile-header class="start-page__header start-page__header--mobile"/>
-
     <div class="start-page__sections start-sections">
 
       <section-block