menu tweak

src/App.vue

@@ -1,8 +1,13 @@
 <template>
   <div id="main">
-    <h1 id="main-title">Cellular Automata Explorer</h1>
+    <h1 id="main-title">
+      <span id="burger-toggle" @click="toggleMainMenu">{{
+        mainMenu == true ? "▼" : "☰"
+      }}</span>
+      Cellular Automata Explorer
+    </h1>
     <div id="container">
-      <MainMenu />
+      <MainMenu v-if="mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
   </div>
@@ -18,10 +23,41 @@
       MainMenu,
       CanvasBoard,
     },
+    data() {
+      return {
+        mainMenu: false,
+        windowWidth: window.innerWidth,
+      };
+    },
+    methods: {
+      toggleMainMenu() {
+        this.mainMenu = !this.mainMenu;
+      },
+      onResize() {
+        this.windowWidth = window.innerWidth;
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        window.addEventListener("resize", this.onResize);
+      });
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", this.onResize);
+    },
   };
 </script>
 
-<style>
+<style scope>
+  :root {
+    --dark1: #000000;
+    --dark2: #333333;
+    --dark3: #666666;
+    --light1: #999999;
+    --light2: #cccccc;
+    --light3: #eeeeee;
+  }
+
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -36,15 +72,20 @@
   }
 
   body {
-    background: black;
-    color: white;
+    background: var(--dark1);
+    color: var(--light3);
     font-family: Courier New;
   }
 
   canvas {
     flex: auto;
-    background: #110812;
-    margin-right: 10px;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(131, 131, 131, 1) 52%,
+      rgba(0, 0, 0, 1) 100%
+    );
   }
 
   h1,
@@ -55,12 +96,39 @@
   h1 {
     margin: 10px auto;
     font-size: larger;
-    text-align: center;
+    text-transform: uppercase;
   }
 
   #container {
     display: flex;
     height: calc(100vh - 100px);
     overflow: hidden;
+    flex-direction: column;
+  }
+
+  #burger-toggle {
+    display: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    vertical-align: middle;
+    color: var(--light2);
+  }
+
+  @media screen and (max-width: 800px) {
+    h1 {
+      font-size: medium;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+
+    #burger-toggle {
+      display: inline;
+    }
+
+    #main-menu {
+      background: var(--dark2);
+      margin: 0 auto;
+    }
   }
 </style>

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

@@ -3,7 +3,7 @@
     <h2 :id="rowTitle" @click="updateActiveMenu">
       {{ rowTitle }}
     </h2>
-    <div v-if="activeMenu === rowTitle" class="menu-row-content">
+    <div class="menu-row-content">
       <slot />
     </div>
   </div>
@@ -18,19 +18,6 @@
         default: "",
       },
     },
-    data() {
-      return {
-        activeMenu: "",
-      };
-    },
-    methods: {
-      updateActiveMenu(event) {
-        const elem = event.target;
-        const value = elem.id;
-        if (value == this.activeMenu) this.activeMenu = "";
-        else this.activeMenu = value;
-      },
-    },
   };
 </script>
 
@@ -39,7 +26,8 @@
     font-size: medium;
     padding: 10px;
     cursor: pointer;
-    border: 2px solid darkgrey;
+    border-bottom: 1px solid var(--dark3);
+    border-top: 1px solid var(--dark3);
     margin: 0 0 10px 0;
   }
 
@@ -63,6 +51,18 @@
 
   .menu-row {
     flex: 1;
+    position: relative;
+  }
+
+  .menu-row:hover .menu-row-content {
+    display: block;
+    width: 100%;
+  }
+
+  .menu-row-content {
+    position: absolute;
+    background: var(--dark1);
+    display: none;
   }
 
   label,
@@ -70,4 +70,36 @@
     margin-right: 10px;
     font-weight: bold;
   }
+
+  @media screen and (max-width: 800px) {
+    .menu-row {
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    .menu-row h2,
+    .form-field {
+      margin: 0;
+    }
+
+    .menu-row h2 {
+      border-bottom: 1px solid var(--dark3);
+      border-top: none;
+    }
+
+    .form-field {
+      padding: 10px;
+    }
+
+    .menu-row:active .menu-row-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .menu-row-content {
+      position: relative;
+      width: 100%;
+    }
+  }
 </style>