open close behaviour only on smaller screens

Author: supalarry

frontend/src/components/shared/NavBar.vue

@@ -21,7 +21,7 @@
         </button>
       </div>
     </div>
-    <div id="links" v-on:click="isOpen = !isOpen" v-bind:class="isOpen ? 'block' : 'hidden'" class="px-2 pb-5 text-center md:p-0 md:block md:flex md:items-center">
+    <div id="links" v-on:click="openOnSmallerScreens()" v-bind:class="isOpen ? 'block' : 'hidden'" class="px-2 pb-5 text-center md:p-0 md:block md:flex md:items-center">
       <div v-if="!loggedIn" class="md:flex md:bg-purple-matcha md:border-2 md:border-purple-matcha md:rounded-lg">
         <router-link to="/accounts/signin" class="navigation-button-logged-in md:hover:bg-white-matcha md:hover:text-purple-matcha md:text-purple-matcha md:bg-white-matcha md:py-2 md:px-8 md:rounded-md mx-0">Sign In</router-link>
         <router-link to="/accounts/signup" class="navigation-button-logged-in md:hover:bg-purple-matcha md:hover:text-white-matcha md:text-white-matcha md:py-2 md:px-8">Get Started</router-link>
@@ -52,6 +52,13 @@ export default {
       route: null,
     };
   },
+  methods: {
+    openOnSmallerScreens() {
+      if (window.innerWidth <= 768) {
+        this.isOpen = !this.isOpen;
+      }
+    },
+  },
   watch: {
     $route(to) {
       this.route = to.name;