From 580ffb7b82b38a1af1a6cc649bab249bb3bb2f95 Mon Sep 17 00:00:00 2001
From: adminoo <git@kadath.corp>
Date: Thu, 13 Jan 2022 14:05:08 +0100
Subject: [PATCH] keeps a single menu open

---
 src/components/MenuRow.vue | 25 ++++++++++++++++++++-----
 src/store/index.js         | 11 +++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue
index 65579fd..8cef067 100644
--- a/src/components/MenuRow.vue
+++ b/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
     }
   }
 }
diff --git a/src/store/index.js b/src/store/index.js
index 5a7069e..c3bfbcb 100644
--- a/src/store/index.js
+++ b/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: {