src/App.vue

@@ -18,7 +18,7 @@
   import MainMenu from "./components/MainMenu.vue";
   import CanvasBoard from "./components/CanvasBoard.vue";
   import MenuReset from "./components/MenuReset.vue";
-  import { mapState, mapWritableState, mapActions } from "pinia";
+  import { mapWritableState, mapActions } from "pinia";
   import { globalStore } from "./stores/index.js";
 
   export default {
@@ -30,12 +30,15 @@
     },
     data() {
       return {
+        mainMenu: false,
         windowWidth: window.innerWidth,
       };
     },
     computed: {
-      ...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
+      ...mapWritableState(globalStore, {
-      ...mapWritableState(globalStore, ["canvasWidth", "canvasHeight"]),
+        canvasWidth: "canvasWidth",
+        canvasHeight: "canvasHeight",
+      }),
     },
     mounted() {
       this.$nextTick(() => {
@@ -46,13 +49,9 @@
       window.removeEventListener("resize", this.onResize);
     },
     methods: {
-      ...mapActions(globalStore, [
+      ...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
-        "setBoardWidth",
-        "setBoardHeight",
-        "setMainMenu",
-      ]),
       toggleMainMenu() {
-        this.setMainMenu(!this.mainMenu);
+        this.mainMenu = !this.mainMenu;
       },
       onResize() {
         this.$nextTick(() => {

src/components/MainMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="main-menu">
-    <MenuGeneralOptions />
+    <MenuGeneralOptions :active="active" @update-active="updateActive" />
-    <MenuCellProperties />
+    <MenuCellProperties :active="active" @update-active="updateActive" />
-    <MenuElementaryCA />
+    <MenuElementaryCA :active="active" @update-active="updateActive" />
-    <Menu2dCA />
+    <Menu2dCA :active="active" @update-active="updateActive" />
   </div>
 </template>
 
@@ -20,6 +20,21 @@
       MenuElementaryCA,
       Menu2dCA,
     },
+    data() {
+      return {
+        active: "",
+      };
+    },
+    methods: {
+      // set the opened submenu. If already active, reset it so it can close
+      updateActive(menu) {
+        if (menu === this.active) {
+          this.active = "";
+        } else {
+          this.active = menu;
+        }
+      },
+    },
   };
 </script>
 
@@ -28,6 +43,7 @@
     display: flex;
     flex-direction: row;
     width: 100%;
+
     flex: 1;
   }
 

src/components/MenuCellProperties.vue

@@ -38,7 +38,7 @@
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
-    name: "MenuCellProperties",
+    name: "MainMenu",
     components: {
       MenuRow,
     },

src/components/MenuElementaryCA.vue

@@ -1,14 +1,6 @@
 <template>
   <MenuRow row-title="Elementary Automaton">
     <form>
-      <div class="form-field">
-        <input
-          type="button"
-          name="start"
-          value="start"
-          @click="toggleDraw1d()"
-        />
-      </div>
       <div class="form-field">
         <label>
           Initial state presets
@@ -70,6 +62,9 @@
         </label>
       </div>
     </form>
+    <div class="form-field">
+      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
+    </div>
   </MenuRow>
 </template>
 

src/components/MenuRow.vue

@@ -1,17 +1,15 @@
 <template>
   <div class="menu-row">
-    <h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
+    <h2 :id="rowTitle" @click="$emit('update-active', rowTitle)">
       {{ rowTitle }}
     </h2>
-    <div v-if="isActive" ref="content" class="menu-row-content">
+    <div v-if="isActive" class="menu-row-content">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-  import { mapActions, mapState } from "pinia";
-  import { globalStore } from "../stores/index.js";
   export default {
     name: "MenuRow",
     props: {
@@ -19,38 +17,15 @@
         type: String,
         default: "",
       },
+      active: {
+        type: String,
+        default: "",
       },
+    },
+    emits: ["update-active"],
     computed: {
-      ...mapState(globalStore, ["activeSubMenu"]),
       isActive() {
-        return this.rowTitle == this.activeSubMenu;
+        return this.rowTitle == this.active;
-      },
-    },
-    beforeUnmount() {
-      window.removeEventListener("click", this.onWindowClick);
-    },
-    methods: {
-      ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
-      onKeyDown: function (event) {
-        // escape
-        if (event.keyCode == 27) {
-          this.setActiveSubMenu("");
-        }
-      },
-      storeActiveSubMenu() {
-        window.addEventListener("click", this.onWindowClick);
-        this.setActiveSubMenu(this.rowTitle);
-      },
-      // hides submenu when click is detected outside from it
-      onWindowClick(event) {
-        const form = this.$refs.content;
-        if (form != null) {
-          if (!form.contains(event.target)) {
-            this.setActiveSubMenu("");
-            this.setMainMenu(false);
-          }
-          return;
-        }
       },
     },
   };

src/stores/index.js

@@ -34,8 +34,6 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
-      mainMenu: false,
-      activeSubMenu: "",
     };
   },
   actions: {
@@ -48,20 +46,14 @@ export const globalStore = defineStore("globalStore", {
       );
     },
     toggleDraw1d() {
-      this.setActiveSubMenu("");
-      this.setMainMenu(false);
       this.draw1d = true;
     },
     toggleDraw2d() {
-      this.setActiveSubMenu("");
-      this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
       this.draw2d = true;
     },
     toggleDraw2dLast() {
-      this.setActiveSubMenu("");
-      this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
       this.draw2dLast = true;
@@ -76,12 +68,5 @@ export const globalStore = defineStore("globalStore", {
       this.draw2dLast = false;
       this.canDraw = false;
     },
-    setActiveSubMenu(data) {
-      if (this.activeSubMenu == data) this.activeSubMenu = "";
-      else this.activeSubMenu = data;
-    },
-    setMainMenu(data) {
-      this.mainMenu = data;
-    },
   },
 });