[wip] top menu browsable by mobile devices

src/App.vue

@@ -1,10 +1,5 @@
 <template>
   <div id="main">
-    <h1
-      id="main-title"
-    >
-      Cellular Automata Explorer
-    </h1>
     <div id="container">
       <MainMenu />
       <Canvas />
@@ -47,29 +42,18 @@ body {
     font-family: Courier New;
 }
 
+body, html {
+    height: calc(100vh - 100px);
+}
+
 canvas {
     flex: auto;
     background: #110812;
     margin-right: 10px;
 }
 
-h1, h2 {
-    font-weight: bold;
-}
-
-h1 {
-    margin : 10px auto;
-    font-size: larger;
-    text-align: center;
-}
-
-#main {
-    
-}
-
 #container {
-    display: flex;
-    height: calc(100vh - 100px);
     overflow: hidden;
+    width: 100%;
 }
 </style>

src/components/Canvas.vue

@@ -114,7 +114,6 @@ export default {
       this.draw2d(board)
     },
     async draw2dLast() {
-      console.log(this.lastBoard)
       this.draw2d(this.lastBoard)
     },
     stop() {
@@ -122,13 +121,13 @@ export default {
     },
     reset() {
       this.stop()
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
     }
   }
 }
 </script>
 <style>
   #mainContent {
-      min-width: 70%;
+
   }
 </style>

src/components/MainMenu.vue

@@ -1,9 +1,14 @@
 <template>
-  <div id="sidebar">
+  <div id="mainMenu">
     <MenuGeneralOptions />
     <MenuCellProperties />
     <MenuElementaryCA />
     <Menu2dCA />
+    <h1
+      id="main-title"
+    >
+      Cellular Automata Explorer
+    </h1>
   </div>
 </template>
 
@@ -24,9 +29,22 @@ export default {
 </script>
 
 <style>
-#sidebar {
+#mainMenu {
     width: 25%;
     padding: 0 10px;
-    overflow-y: scroll;
+    overflow: scroll;
+    display: flex;
+    width: 100%;
+}
+
+h1, h2 {
+    font-weight: bold;
+}
+
+h1 {
+    margin : 10px 20px;
+    font-size: larger;
+    text-align: center;
+    width: 100%;
 }
 </style>

src/components/MenuRow.vue

@@ -45,14 +45,21 @@ export default {
 </script>
 
 <style>
+.menu-row, h1 {
+    white-space: nowrap;
+    position: relative;
+}
 .menu-row h2 {
-    font-size: medium;
+    font-size: small;
     padding: 10px;
     cursor: pointer;
-    border: 2px solid darkgrey;
     margin: 0 0 10px 0;
 }
 
+.menu-row h2:hover {
+    color: darkgrey;
+}
+
 select {
     margin-top: 10px;
     padding: 5px;
@@ -71,11 +78,17 @@ input[type="button"] {
 }
 
 .menu-row {
-    flex: 1;
+    flex-basis: max-content;
 }
 
 label, .form-field label {
     margin-right: 10px;
     font-weight: bold;
 }
+
+.menu-row-content {
+    font-size: small;
+    background: black;
+    position: relative;
+}
 </style>