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
     }
   }
 }

src/store/index.js

@@ -24,7 +24,8 @@ export default new Vuex.Store({
     canvasWidth: 1280,
     canvasHeight: 720,
     refreshRate: 300,
-    initial1dState: "onecell"
+    initial1dState: "onecell",
+    activeMenu: "Elementary Cellular Automata"
   },
   mutations: {
     update1dSingleRule(state, data) {
@@ -50,7 +51,10 @@ export default new Vuex.Store({
     },
     setInitial1dState(state, data) {
       state.initial1dState = data
-    }
+    },
+    setActiveMenu(state, data) {
+      state.activeMenu = data
+    },
   },
   getters: {
     getCellProperties(state) {
@@ -76,6 +80,9 @@ export default new Vuex.Store({
     },
     getInitial1dState(state) {
       return state.initial1dState
+    },
+    getActiveMenu(state) {
+      return state.activeMenu
     }
   },
   actions: {