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>