src/components/MainMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="main-menu">
-    <MenuGeneralOptions :active="active" @update-active="updateActive" />
+    <MenuGeneralOptions />
-    <MenuCellProperties :active="active" @update-active="updateActive" />
+    <MenuCellProperties />
-    <MenuElementaryCA :active="active" @update-active="updateActive" />
+    <MenuElementaryCA />
-    <Menu2dCA :active="active" @update-active="updateActive" />
+    <Menu2dCA />
   </div>
 </template>
 
@@ -20,21 +20,6 @@
       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,11 +13,6 @@
       <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>
 
@@ -33,9 +28,6 @@
     },
     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="$emit('update-active', rowTitle)">
+    <h2 :id="rowTitle" @click="updateActiveMenu">
       {{ rowTitle }}
     </h2>
-    <div v-if="isActive" class="menu-row-content">
+    <div class="menu-row-content">
       <slot />
     </div>
   </div>
@@ -17,17 +17,6 @@
         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>
@@ -65,10 +54,15 @@
     position: relative;
   }
 
+  .menu-row:hover .menu-row-content {
+    display: block;
+    width: 100%;
+  }
+
   .menu-row-content {
     position: absolute;
     background: var(--dark1);
-    width: 100%;
+    display: none;
   }
 
   label,
@@ -97,11 +91,11 @@
       padding: 10px;
     }
 
-    /* .menu-row:active .menu-row-content {
+    .menu-row:active .menu-row-content {
-       display: flex;
+      display: flex;
-       flex-direction: column;
+      flex-direction: column;
-       height: 100%;
+      height: 100%;
-       } */
+    }
 
     .menu-row-content {
       position: relative;