From ba1f5188166900f6212af034c16337a9da7d6192 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 27 Feb 2020 15:44:19 +0100
Subject: [PATCH] Update mobile navigation styling

---
 client/src/components/MobileHeader.vue        | 17 ++++++++----
 .../book-navigation/SubNavigationItem.vue     | 27 -------------------
 .../src/components/profile/ProfileSidebar.vue |  6 ++++-
 client/src/styles/_book-subnavigation.scss    | 21 +++++++++++++++
 ...le-activity.scss => _module-activity.scss} |  0
 client/src/styles/main.scss                   |  1 +
 6 files changed, 39 insertions(+), 33 deletions(-)
 create mode 100644 client/src/styles/_book-subnavigation.scss
 rename client/src/styles/{module-activity.scss => _module-activity.scss} (100%)

diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index 23157d55..3774c112 100644
--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@@ -1,24 +1,31 @@
 <template>
   <div class="mobile-header">
-    <router-link to="/" data-cy="mobile-home-link">
-      <logo></logo>
-    </router-link>
-
     <a @click="showMobileNavigation">
       <hamburger class="mobile-header__hamburger"></hamburger>
     </a>
 
+    <router-link to="/" data-cy="mobile-home-link">
+      <logo></logo>
+    </router-link>
+
+    <user-widget v-bind="me"></user-widget>
   </div>
 </template>
 
 <script>
   import Logo from '@/components/icons/Logo';
   import Hamburger from '@/components/icons/Hamburger';
+  import UserWidget from '@/components/UserWidget';
+
+  import me from '@/mixins/me';
 
   export default {
+    mixins: [me],
+
     components: {
       Logo,
-      Hamburger
+      Hamburger,
+      UserWidget
     },
 
     methods: {
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index 989b936e..78a70eb4 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -42,30 +42,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-
-  .book-subnavigation {
-    &__item {
-      @include small-text;
-      margin-bottom: $small-spacing;
-      cursor: pointer;
-
-      color: $color-silver-dark;
-
-      &--mobile {
-        color: $color-white;
-      }
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-
-      &--active {
-        color: $color-brand;
-      }
-    }
-  }
-</style>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 5fb75c0d..c2a8225d 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -84,11 +84,15 @@
     right: 0;
     top: 0;
     bottom: 0;
-    width: 333px;
     background-color: $color-white;
     z-index: 10;
     box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
 
+    width: 100%;
+    @include desktop {
+      width: 333px;
+    }
+
     display: flex;
     flex-direction: column;
 
diff --git a/client/src/styles/_book-subnavigation.scss b/client/src/styles/_book-subnavigation.scss
new file mode 100644
index 00000000..e288346d
--- /dev/null
+++ b/client/src/styles/_book-subnavigation.scss
@@ -0,0 +1,21 @@
+.book-subnavigation {
+  &__item {
+    @include small-text;
+    margin-bottom: $small-spacing;
+    cursor: pointer;
+
+    color: $color-silver-dark;
+
+    &--mobile {
+      color: $color-white;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    &--active {
+      color: $color-brand;
+    }
+  }
+}
diff --git a/client/src/styles/module-activity.scss b/client/src/styles/_module-activity.scss
similarity index 100%
rename from client/src/styles/module-activity.scss
rename to client/src/styles/_module-activity.scss
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 62d4cf26..232b941c 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -22,3 +22,4 @@
 @import "public-page";
 @import "student-submission";
 @import "module-activity";
+@import "book-subnavigation";