css based active menu

src/App.vue

@@ -49,6 +49,15 @@
 </script>
 
 <style scope>
+  :root {
+    --dark1: #000000;
+    --dark2: #333333;
+    --dark3: #666666;
+    --light1: #999999;
+    --light2: #cccccc;
+    --light3: #eeeeee;
+  }
+
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -63,15 +72,20 @@
   }
 
   body {
-    background: black;
+    background: var(--dark1);
-    color: white;
+    color: var(--light3);
     font-family: Courier New;
   }
 
   canvas {
     flex: auto;
-    background: #110812;
+    background: rgb(0, 0, 0);
-    margin-right: 10px;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(131, 131, 131, 1) 52%,
+      rgba(0, 0, 0, 1) 100%
+    );
   }
 
   h1,
@@ -97,7 +111,7 @@
     cursor: pointer;
     font-size: 1.5em;
     vertical-align: middle;
-    color: #c6c6c6;
+    color: var(--light2);
   }
 
   @media screen and (max-width: 800px) {
@@ -113,7 +127,7 @@
     }
 
     #main-menu {
-      background: black;
+      background: var(--dark2);
       margin: 0 auto;
     }
   }

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;
     }
   }