Add button to open modal

client/src/App.vue

@@ -25,7 +25,7 @@
       },
       showModal() {
         return this.$store.state.showModal
-      },
+      }
 
     },
 

client/src/components/AddContent.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="add-content">
+    <a class="add-content__button" v-on:click="showModal">
       <add-pointer  class="add-content__icon"></add-pointer>
+    </a>
   </div>
 </template>
 
@@ -10,6 +12,12 @@
   export default {
     components: {
       AddPointer
+    },
+
+    methods: {
+      showModal() {
+        this.$store.dispatch('showModal');
+      }
     }
   }
 </script>
@@ -21,9 +29,14 @@
     display: flex;
     justify-content: flex-end;
 
+    &__button {
+      margin-right: -85px;
+      cursor: pointer;
+      display: inline-grid;
+    }
+
     &__icon {
       height: 57px;
-      margin-right: -85px;
       fill: $color-grey;
     }
   }

client/src/components/Modal.vue

@@ -13,7 +13,7 @@
 <script>
   export default {
     methods: {
-      hideModal(){
+      hideModal() {
         this.$store.dispatch('hideModal');
       }
     }

client/src/store/index.js

@@ -24,8 +24,11 @@ export default new Vuex.Store({
     setSpecialContainerClass({commit}, payload) {
       commit('setSpecialContainerClass', payload);
     },
-    hideModal({commit}){
+    hideModal({commit}) {
       commit('setModal', false);
+    },
+    showModal({commit}) {
+      commit('setModal', true);
     }
   },
 

client/src/styles/_buttons.scss

@@ -6,6 +6,7 @@
   font-family: $sans-serif-font-family;
   font-weight: 400;
   display: inline-flex;
+  cursor: pointer;
 
   &--active {
     border-color: $color-brand;