hover nav on mobile

src/components/NavBar.vue

@@ -63,8 +63,19 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
+@import "@/style/_variables.scss";
 .nav-title {
   font-weight: bold;
 }
+@media screen and (max-width: $navbar-breakpoint) {
+  .navbar {
+    position: relative
+  }
+  .navbar-menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+}
 </style>

src/style/_variables.scss

@@ -2,4 +2,6 @@ $primary: #2ecc71;
 $tabs-link-active-color: #3498db;
 $tabs-link-active-border-bottom-color: #3498db;	
 $family-sans-serif: 'Fira Sans', sans-serif;
+$gap: 32px !default;
+$navbar-breakpoint: 960px + (2 * $gap);
 @import "~bulma/sass/utilities/_all.sass";