burger menu for mobile (media queries + resize)

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,32 @@
       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>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -55,12 +82,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: #c6c6c6;
+  }
+
+  @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: black;
+      margin: 0 auto;
+    }
   }
 </style>

src/components/CanvasBoard.vue

@@ -1,12 +1,10 @@
 <template>
-  <main id="mainContent">
+  <canvas
-    <canvas
+    id="canvas-board"
-      id="canvas-board"
+    ref="canvas-board"
-      ref="canvas-board"
+    :width="canvasWidth"
-      :width="canvasWidth"
+    :height="canvasHeight"
-      :height="canvasHeight"
+  />
-    />
-  </main>
 </template>
 <script>
   import { mapActions, mapState, mapWritableState } from "pinia";
@@ -142,7 +140,8 @@
   };
 </script>
 <style>
-  #mainContent {
+  #canvas-board {
-    min-width: 70%;
+    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 {
+  #main-menu {
-    width: 25%;
+    display: flex;
-    padding: 0 10px;
+    flex-direction: row;
-    overflow-y: scroll;
+    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 {
+    #main-menu {
-      display: flex;
       flex-direction: column;
-      justify-content: center;
+      position: absolute;
-    }
-
-    #mainContent {
-      flex: 1;
-      width: 100%;
-    }
-
-    #sidebar {
-      flex: 1;
-      padding: 0;
-      width: 100%;
     }
   }
 </style>

src/components/MenuRow.vue

@@ -39,7 +39,8 @@
     font-size: medium;
     padding: 10px;
     cursor: pointer;
-    border: 2px solid darkgrey;
+    border-bottom: 1px solid darkgrey;
+    border-top: 1px solid darkgrey;
     margin: 0 0 10px 0;
   }
 
@@ -63,6 +64,12 @@
 
   .menu-row {
     flex: 1;
+    position: relative;
+  }
+
+  .menu-row-content {
+    position: absolute;
+    background: #333333;
   }
 
   label,
@@ -70,4 +77,18 @@
     margin-right: 10px;
     font-weight: bold;
   }
+
+  @media screen and (max-width: 800px) {
+    .menu-row {
+      /* position: static; */
+      padding: 0 10px;
+    }
+
+    .menu-row-content {
+      position: relative;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
 </style>