moves menu controls to store and properly removes killscroll on navig…

…ation

components/header.vue

@@ -13,10 +13,10 @@
         class="menu-btn"
         aria-label="Menu"
         role="button"
-        @click="viewMenu = !viewMenu"
+        @click="toggleMenu"
       >
         <div
-          :class="{open:viewMenu}"
+          :class="{open:showMenu}"
           class="menu-icon"
         >
           <span />
@@ -25,7 +25,7 @@
           <span />
         </div>
         <div
-          v-if="!viewMenu"
+          v-if="!showMenu"
           class="menu-label"
         >
           Menu
@@ -40,7 +40,7 @@
     </div>
     <nav
       v-if="navigation.length > 0"
-      :class="{open:viewMenu}"
+      :class="{open:showMenu}"
       class="main-nav"
       role="menu"
     >
@@ -55,6 +55,7 @@
             v-if="nav.url.substr(0,4) !== 'http'"
             :to="nav.url"
             role="menuitem"
+            @click.native="setMenu(false)"
           >
             {{ nav.text }}
           </nuxt-link>
@@ -133,35 +134,19 @@
     name: 'Header',
     data() {
       return {
-        viewMenu: false,
         top: '0px',
         left: '0px',
         navigation: navigation,
-        socialMedia: about.socialMedia,
-        bodyTag: ''
+        socialMedia: about.socialMedia
       }
     },
     computed: {
-      ...mapGetters('casestudies', [
-        'showPwdProjects'
-      ])
-    },
-    watch: {
-      viewMenu: function(val) {
-        if (val) {
-          this.bodyTag.classList.add('killscroll')
-        } else {
-          this.bodyTag.classList.remove('killscroll')
-        }
-      }
-    },
-    mounted() {
-      this.bodyTag = document.getElementsByTagName('body')[0]
+      ...mapGetters('casestudies', ['showPwdProjects']),
+      ...mapGetters('menu', ['showMenu'])
     },
     methods: {
-      ...mapMutations('casestudies', [
-        'toggleProjects'
-      ])
+      ...mapMutations('casestudies', ['toggleProjects']),
+      ...mapMutations('menu', ['toggleMenu', 'setMenu'])
     }
   }
 </script>

layouts/default.vue

@@ -6,13 +6,16 @@
 
 <script>
   import Vue from 'vue'
+  import { mapGetters, mapMutations } from 'vuex'
   import { library } from '@fortawesome/fontawesome-svg-core'
   import { faLock, faLockOpen, faTrophy } from '@fortawesome/free-solid-svg-icons'
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
   library.add(faLock, faLockOpen, faTrophy)
   Vue.component('font-awesome-icon', FontAwesomeIcon)
 
+  let bodyTag = null
+
   export default {
     name: 'App',
     head () {
@@ -44,10 +47,26 @@
         ]
       }
     },
+    computed: {
+      ...mapGetters('menu', ['showMenu'])
+    },
+    watch: {
+      showMenu: function(val) {
+        if (val) {
+          bodyTag.classList.add('killscroll')
+        } else {
+          bodyTag.classList.remove('killscroll')
+        }
+      }
+    },
     mounted() {
-      this.bodyTag = document.getElementsByTagName('body')[0]
-      this.bodyTag.classList.remove('killscroll')
+      this.setMenu(false)
+      bodyTag = document.getElementsByTagName('body')[0]
+      bodyTag.classList.remove('killscroll')
     },
+    methods: {
+      ...mapMutations('menu', ['setMenu'])
+    }
   }
 </script>
 

store/menu.js

@@ -0,0 +1,22 @@
+export const state = () => ({
+  showMenu: false
+})
+
+export const mutations = {
+  toggleMenu: (state) => {
+    state.showMenu = !state.showMenu
+  },
+  setMenu: (state, status) => {
+    if (status) {
+      state.showMenu = true
+    } else {
+      state.showMenu = false
+    }
+  }
+}
+
+export const getters = {
+  showMenu: state => {
+    return state.showMenu
+  }
+}