src/App.vue

@@ -1,13 +1,8 @@
 <template>
   <div id="main">
-    <h1 id="main-title">
+    <h1 id="main-title">Cellular Automata Explorer</h1>
-      <span id="burger-toggle" @click="toggleMainMenu">{{
-        mainMenu == true ? "▼" : "☰"
-      }}</span>
-      Cellular Automata Explorer
-    </h1>
     <div id="container">
-      <MainMenu v-if="mainMenu || windowWidth >= 800" />
+      <MainMenu />
       <CanvasBoard />
     </div>
   </div>
@@ -23,41 +18,10 @@
       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 scope>
+<style>
-  :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;
@@ -72,20 +36,15 @@
   }
 
   body {
-    background: var(--dark1);
+    background: black;
-    color: var(--light3);
+    color: white;
     font-family: Courier New;
   }
 
   canvas {
     flex: auto;
-    background: rgb(0, 0, 0);
+    background: #110812;
-    background: linear-gradient(
+    margin-right: 10px;
-      90deg,
-      rgba(0, 0, 0, 1) 0%,
-      rgba(131, 131, 131, 1) 52%,
-      rgba(0, 0, 0, 1) 100%
-    );
   }
 
   h1,
@@ -96,39 +55,12 @@
   h1 {
     margin: 10px auto;
     font-size: larger;
-    text-transform: uppercase;
+    text-align: center;
   }
 
   #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,10 +1,12 @@
 <template>
+  <main id="mainContent">
     <canvas
       id="canvas-board"
       ref="canvas-board"
       :width="canvasWidth"
       :height="canvasHeight"
     />
+  </main>
 </template>
 <script>
   import { mapActions, mapState, mapWritableState } from "pinia";
@@ -140,8 +142,7 @@
   };
 </script>
 <style>
-  #canvas-board {
+  #mainContent {
-    flex: 1;
+    min-width: 70%;
-    margin: 0 auto;
   }
 </style>

src/components/MainMenu.vue

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

src/components/MenuRow.vue

@@ -3,7 +3,7 @@
     <h2 :id="rowTitle" @click="updateActiveMenu">
       {{ rowTitle }}
     </h2>
-    <div class="menu-row-content">
+    <div v-if="activeMenu === rowTitle" class="menu-row-content">
       <slot />
     </div>
   </div>
@@ -18,6 +18,19 @@
         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>
 
@@ -26,8 +39,7 @@
     font-size: medium;
     padding: 10px;
     cursor: pointer;
-    border-bottom: 1px solid var(--dark3);
+    border: 2px solid darkgrey;
-    border-top: 1px solid var(--dark3);
     margin: 0 0 10px 0;
   }
 
@@ -51,18 +63,6 @@
 
   .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,36 +70,4 @@
     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>