Update mobile navigation styling

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: {

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>

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;
 

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;
+    }
+  }
+}

client/src/styles/main.scss

@@ -22,3 +22,4 @@
 @import "public-page";
 @import "student-submission";
 @import "module-activity";
+@import "book-subnavigation";