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, {
-        canvasWidth: "canvasWidth",
-        canvasHeight: "canvasHeight",
-      }),
+      ...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
+      ...mapWritableState(globalStore, ["canvasWidth", "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(() => {