Sept 8 fixes (#9028)

* Added task sync after joining challenge

* Added gem purchasing

* Updated member modal style

* Added community guidelines to all groups

* Added group plans redirect

* Began add new front page design

* Fixed challenge loading on mount

* Fixed upgrade

* Added default summary

* Fixed small nav bar styles

* Added more unlock options to avatar editor

* Added more home page finishes

website/client/components/appMenu.vue

@@ -3,10 +3,10 @@ div
   inbox-modal
   creator-intro
   profile
-  nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
+  nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-lg
     .navbar-header
       .logo.svg-icon(v-html="icons.logo")
-    .collapse.navbar-collapse
+    b-collapse#nav_collapse.collapse.navbar-collapse(is-nav)
       ul.navbar-nav.mr-auto
         router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
           a.nav-link(v-once) {{ $t('tasks') }}
@@ -75,12 +75,27 @@ div
           a.dropdown-item(@click='showProfile("profile")') {{ $t('profile') }}
           router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }}
           a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
+    b-nav-toggle(target='nav_collapse')
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/utils.scss';
 
+  /* Less than Desktops and laptops ----------- */
+  @media only screen  and (max-width : 1224px) {
+    #nav_collapse {
+      background: $purple-100;
+      margin-top: 1em;
+      margin-left: 70%;
+      padding-bottom: 1em;
+
+      a {
+        padding: .5em !important;
+      }
+    }
+  }
+
   nav.navbar {
     background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
     padding-left: 25px;
@@ -223,6 +238,9 @@ div
 </style>
 
 <script>
+import bNavToggle from 'bootstrap-vue/lib/components/nav-toggle';
+import bCollapse from 'bootstrap-vue/lib/components/collapse';
+
 import { mapState, mapGetters } from 'client/libs/store';
 import * as Analytics from 'client/libs/analytics';
 import gemIcon from 'assets/svg/gem.svg';
@@ -241,6 +259,8 @@ export default {
     notificationMenu,
     creatorIntro,
     profile,
+    bNavToggle,
+    bCollapse,
   },
   data () {
     return {