hide main menu once start is clicked (mobile)

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

src/components/MenuElementaryCA.vue

@@ -1,6 +1,14 @@
 <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
@@ -62,9 +70,6 @@
         </label>
       </div>
     </form>
-    <div class="form-field">
-      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
-    </div>
   </MenuRow>
 </template>
 

src/components/MenuRow.vue

@@ -30,7 +30,7 @@
       window.removeEventListener("click", this.onWindowClick);
     },
     methods: {
-      ...mapActions(globalStore, ["setActiveSubMenu"]),
+      ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
       onKeyDown: function (event) {
         // escape
         if (event.keyCode == 27) {
@@ -47,6 +47,7 @@
         if (form != null) {
           if (!form.contains(event.target)) {
             this.setActiveSubMenu("");
+            this.setMainMenu(false);
           }
           return;
         }

src/stores/index.js

@@ -34,6 +34,7 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
+      mainMenu: false,
       activeSubMenu: "",
     };
   },
@@ -48,16 +49,19 @@ 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,5 +80,8 @@ export const globalStore = defineStore("globalStore", {
       if (this.activeSubMenu == data) this.activeSubMenu = "";
       else this.activeSubMenu = data;
     },
+    setMainMenu(data) {
+      this.mainMenu = data;
+    },
   },
 });