media query for mobile screens

src/components/MainMenu.vue

@@ -29,4 +29,23 @@ export default {
     padding: 0 10px;
     overflow-y: scroll;
 }
+
+@media screen and (max-width: 800px) {
+    #container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    #mainContent {
+        flex: 1;
+        width: 100%;
+    }
+
+    #sidebar {
+        flex: 1;
+        padding: 0;
+        width: 100%;
+    }
+}
 </style>

src/store/index.js

@@ -25,7 +25,7 @@ export default new Vuex.Store({
     canvasHeight: 0,
     refreshRate: 300,
     initial1dState: "onecell",
-    activeMenu: "Elementary Cellular Automata",
+    activeMenu: "",
     drawingDirection: "y",
     lastBoard: {}
   },