keeps a single menu open

src/components/MenuRow.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="menu-row">
     <h2
-      @click="isHidden = !isHidden"
+      :id="rowTitle"
+      @click="updateActiveMenu"
     >
       {{ rowTitle }}
     </h2>
     <div
-      v-if="!isHidden"
+      v-if="activeMenu === rowTitle"
       class="menu-row-content"
     >
       <slot />
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
+
 export default {
   name: 'MenuRow',
   props: {
@@ -23,9 +26,21 @@ export default {
       default : ''
     }
   },
-  data() {
-    return {
-      isHidden: true
+  computed: {
+    ...mapGetters({
+      activeMenu: 'getActiveMenu',
+    })
+  },
+  methods: {
+    updateActiveMenu(event) {
+      const elem = event.target
+      const value = elem.id
+      this.$store.commit('setActiveMenu', value)
+    },
+    isActive(event) {
+      const elem = event.target
+      if (elem.id === this.activeMenu) return true
+      return false
     }
   }
 }