burger menu for mobile (media queries + resize)

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>