src/components/MainMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="main-menu">
-    <MenuGeneralOptions />
-    <MenuCellProperties />
-    <MenuElementaryCA />
-    <Menu2dCA />
+    <MenuGeneralOptions :active="active" @update-active="updateActive" />
+    <MenuCellProperties :active="active" @update-active="updateActive" />
+    <MenuElementaryCA :active="active" @update-active="updateActive" />
+    <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>
 

src/components/Menu2dCA.vue

@@ -13,6 +13,11 @@
       <label>Start from last result</label>
       <input type="button" value="start" @click="toggleDraw2dLast()" />
     </div>
+    <div class="form-field">
+      <label>Start from picture</label><br />
+      <input type="file" @change="previewFile" />
+      <input type="button" value="start" @click="toggleDraw2dLast()" />
+    </div>
   </MenuRow>
 </template>
 
@@ -28,6 +33,9 @@
     },
     methods: {
       ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
+      previewFile(event) {
+        console.log(event.target.files);
+      },
     },
   };
 </script>

src/components/MenuRow.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="menu-row">
-    <h2 :id="rowTitle" @click="updateActiveMenu">
+    <h2 :id="rowTitle" @click="$emit('update-active', rowTitle)">
       {{ rowTitle }}
     </h2>
-    <div class="menu-row-content">
+    <div v-if="isActive" class="menu-row-content">
       <slot />
     </div>
   </div>
@@ -17,6 +17,17 @@
         type: String,
         default: "",
       },
+      active: {
+        type: String,
+        default: "",
+      },
+    },
+    emits: ["update-active"],
+    computed: {
+      isActive() {
+        console.log(this.rowTitle, "vs", this.active);
+        return this.rowTitle == this.active;
+      },
     },
   };
 </script>
@@ -54,15 +65,10 @@
     position: relative;
   }
 
-  .menu-row:hover .menu-row-content {
-    display: block;
-    width: 100%;
-  }
-
   .menu-row-content {
     position: absolute;
     background: var(--dark1);
-    display: none;
+    width: 100%;
   }
 
   label,
@@ -91,11 +97,11 @@
       padding: 10px;
     }
 
-    .menu-row:active .menu-row-content {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
+    /* .menu-row:active .menu-row-content {
+       display: flex;
+       flex-direction: column;
+       height: 100%;
+       } */
 
     .menu-row-content {
       position: relative;