css based active menu

src/components/MenuRow.vue

@@ -3,7 +3,7 @@
     <h2 :id="rowTitle" @click="updateActiveMenu">
       {{ rowTitle }}
     </h2>
-    <div v-if="activeMenu === rowTitle" class="menu-row-content">
+    <div class="menu-row-content">
       <slot />
     </div>
   </div>
@@ -18,19 +18,6 @@
         default: "",
       },
     },
-    data() {
-      return {
-        activeMenu: "",
-      };
-    },
-    methods: {
-      updateActiveMenu(event) {
-        const elem = event.target;
-        const value = elem.id;
-        if (value == this.activeMenu) this.activeMenu = "";
-        else this.activeMenu = value;
-      },
-    },
   };
 </script>
 
@@ -67,9 +54,15 @@
     position: relative;
   }
 
+  .menu-row:hover .menu-row-content {
+    display: block;
+    width: 100%;
+  }
+
   .menu-row-content {
     position: absolute;
-    background: #333333;
+    background: var(--dark1);
+    display: none;
   }
 
   label,
@@ -84,10 +77,14 @@
       padding: 0 10px;
     }
 
+    .menu-row:active .menu-row-content {
+      display: flex;
+    }
+
     .menu-row-content {
       position: relative;
       width: 100%;
-      display: flex;
+      /* display: flex; */
       flex-direction: column;
     }
   }