Responsive Menu Fix #2

package.json

@@ -12,13 +12,13 @@
     "@gridsome/transformer-remark": "^0.4.0",
     "gridsome": "^0.7.12",
     "gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
-    "node-sass": "^4.13.0",
+    "sass": "^1.25.0",
     "postcss-import": "^12.0.1",
     "postcss-nested": "^4.2.1",
     "prism-themes": "^1.3.0",
-    "sass-loader": "^8.0.0"
+    "sass-loader": "^8.0.2"
   },
   "devDependencies": {
-    "gridsome-plugin-tailwindcss": "^2.2.30"
+    "gridsome-plugin-tailwindcss": "^2.2.32"
   }
 }

src/layouts/partials/ResponsiveNav.vue

@@ -3,6 +3,7 @@
     <nav
       id="mobile-nav"
       class="mobile-nav fixed left-0 top-0 h-screen w-full overflow-y-auto pt-12 bg-purple-900 z-50 md:hidden"
+      :class="toggleNav ? 'menu-visible': ''"
     >
       <ul>
         <li
@@ -23,8 +24,10 @@
     <button
       id="mobile-nav-toggle"
       class="mobile-nav-toggle block fixed h-16 w-full bottom-0 flex items-center justify-center font-bold border-none bg-purple-900 text-white z-50 focus:outline-none md:hidden"
+      :class="toggleNav ? 'menu-toggle-active': ''"
       aria-expanded="false"
       aria-controls="mobile-nav"
+      @click="toggle"
     >
       <span class="mobile-nav-label mr-2 font-medium">Menu</span>
 
@@ -49,11 +52,20 @@ query {
 </static-query>
 
 <script>
-
+let myBody = {
+  classList : {}
+};
 export default {
 
-  mounted() {
-    require('@modules/mobile-nav');
+  data() {
+    return {
+      toggleNav: false
+    }
+  },
+  methods: {
+    toggle() {
+      this.toggleNav = !this.toggleNav
+    }
   }
 
 }

src/main.js

@@ -3,9 +3,6 @@
 
 import DefaultLayout from '~/layouts/Default.vue'
 
-
-//import '~/resources/js/main.js'
-
 import '~/resources/scss/main.scss'
 
 export default function (Vue, { router, head, isClient }) {

src/resources/scss/base/_links.scss

@@ -1,5 +1,6 @@
 a {
-    @apply no-underline text-pink-500 transition;
+    @apply no-underline text-pink-500;
+    transition: 0.25s all ease-out;
 
     &:hover {
         @apply text-purple-900;

src/resources/scss/components/_form.scss

@@ -28,7 +28,8 @@
 
     .input,
     .textarea {
-        @apply border border-gray-200 rounded p-3 w-full transition;
+        @apply border border-gray-200 rounded p-3 w-full;
+        transition: 0.25s all ease-out;
 
         &:focus {
             @apply border-pink-500 outline-none;