burger menu for mobile (media queries + resize)

src/components/CanvasBoard.vue

@@ -1,12 +1,10 @@
 <template>
-  <main id="mainContent">
-    <canvas
-      id="canvas-board"
-      ref="canvas-board"
-      :width="canvasWidth"
-      :height="canvasHeight"
-    />
-  </main>
+  <canvas
+    id="canvas-board"
+    ref="canvas-board"
+    :width="canvasWidth"
+    :height="canvasHeight"
+  />
 </template>
 <script>
   import { mapActions, mapState, mapWritableState } from "pinia";
@@ -142,7 +140,8 @@
   };
 </script>
 <style>
-  #mainContent {
-    min-width: 70%;
+  #canvas-board {
+    flex: 1;
+    margin: 0 auto;
   }
 </style>

src/components/MainMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="sidebar">
+  <div id="main-menu">
     <MenuGeneralOptions />
     <MenuCellProperties />
     <MenuElementaryCA />
@@ -24,39 +24,29 @@
 </script>
 
 <style>
-  #sidebar {
-    width: 25%;
-    padding: 0 10px;
-    overflow-y: scroll;
+  #main-menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    flex: 1;
   }
 
   /* Hide scrollbar for Chrome, Safari and Opera */
-  #sidebar::-webkit-scrollbar {
+  #main-menu::-webkit-scrollbar {
     display: none;
   }
 
   /* Hide scrollbar for IE, Edge and Firefox */
-  #sidebar {
+  #main-menu {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
 
   @media screen and (max-width: 800px) {
-    #container {
-      display: flex;
+    #main-menu {
       flex-direction: column;
-      justify-content: center;
-    }
-
-    #mainContent {
-      flex: 1;
-      width: 100%;
-    }
-
-    #sidebar {
-      flex: 1;
-      padding: 0;
-      width: 100%;
+      position: absolute;
     }
   }
 </style>

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>