burger menu for mobile (media queries + resize)

src/components/MenuRow.vue

@@ -39,7 +39,8 @@
     font-size: medium;
     padding: 10px;
     cursor: pointer;
-    border: 2px solid darkgrey;
+    border-bottom: 1px solid darkgrey;
+    border-top: 1px solid darkgrey;
     margin: 0 0 10px 0;
   }
 
@@ -63,6 +64,12 @@
 
   .menu-row {
     flex: 1;
+    position: relative;
+  }
+
+  .menu-row-content {
+    position: absolute;
+    background: #333333;
   }
 
   label,
@@ -70,4 +77,18 @@
     margin-right: 10px;
     font-weight: bold;
   }
+
+  @media screen and (max-width: 800px) {
+    .menu-row {
+      /* position: static; */
+      padding: 0 10px;
+    }
+
+    .menu-row-content {
+      position: relative;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
 </style>