hot sexy fixes for active menu

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;