Add profile edit link to sidebar

client/src/components/profile/Avatar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="avatar">
     <transition name="fade">
-      <default-avatar  v-show="!isAvatarLoaded" class="avatar__placeholder"
+      <default-avatar v-show="!isAvatarLoaded" class="avatar__placeholder"
                       :class="{'avatar__placeholder--highlighted': iconHighlighted}"></default-avatar>
     </transition>
     <transition name="show">
@@ -9,15 +9,21 @@
            :style="{'background-image': `url(${this.avatarUrl})`}"></div>
     </transition>
     <img class="avatar__fake-image" :src="avatarUrl" ref="fakeImage"/>
-    <a class="avatar__edit" v-if="editable"><pen-icon></pen-icon></a>
+
+    <div class="avatar__edit" v-if="editable" @click="closeSidebar">
+      <router-link :to="{name: 'profile'}">
+        <pen-icon></pen-icon>
+      </router-link>
+    </div>
   </div>
 </template>
 
 <script>
-
   import DefaultAvatar from '@/components/icons/DefaultAvatar';
   import PenIcon from '@/components/icons/PenIcon';
 
+  import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
+
   export default {
     props: {
       avatarUrl: {
@@ -46,6 +52,16 @@
           }
         });
       }
+    },
+    methods: {
+      closeSidebar() {
+        this.$apollo.mutate({
+          mutation: TOGGLE_SIDEBAR,
+          variables: {
+            open: false
+          }
+        })
+      }
     }
   }
 </script>