process of vueification

src/components/MenuRow.vue

@@ -0,0 +1,57 @@
+<template>
+<div class="menu-row">
+  <h2
+    @click="isHidden = !isHidden"
+    > {{ RowTitle }}</h2>
+  <div class="menu-row-content" v-if="!isHidden">
+    <form>
+      <slot></slot>
+    </form>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'MenuRow',
+  props: {
+    RowTitle: String
+  },
+  data() {
+    return {
+      isHidden: true
+    }
+  }
+}
+</script>
+
+<style>
+.menu-row h2 {
+    font-size: medium;
+    padding: 10px;
+    cursor: pointer;
+    border: 2px solid darkgrey;
+    margin: 0 0 10px 0;
+  }
+  
+input[type="button"] {
+    min-width: 60px;
+    padding: 5px;
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.form-field {
+    display: flex;
+    margin: 10px;
+}
+
+.menu-row {
+    flex: 1;
+}
+
+label, .form-field label {
+    margin-right: 10px;
+    font-weight: bold;
+}
+</style>