Improve mobile navigation

Author: Veilza

src/components/Navbar/navbar.js

@@ -15,8 +15,21 @@ export default {
         }
     },
     methods: {
-        toggleMenu() {
+        toggleMenu () {
             this.isMenuVisible = !this.isMenuVisible
+        },
+        closeMenu () {
+            this.isMenuVisible = false
+        },
+        handleOutsideClick (event) {
+            // If the user isn't clicking the nav element, close the menu
+            if (!this.$el.contains(event.target)) {
+                this.closeMenu()
+            }
         }
+    },
+    mounted () {
+        // Add an event listener to listen for user clicks
+        document.addEventListener('click', this.handleOutsideClick)
     }
 }

src/components/Navbar/navbar.vue

@@ -10,7 +10,7 @@
         </ul>
         <div :class="$style['menu-icon']" @click="toggleMenu">&#9776;</div>
         <div :class="[$style['waffle-menu'], { [$style.show]: isMenuVisible }]" id="waffleMenu">
-            <router-link v-for="link in links" :key="link.text" :to="link.href">{{ link.text }}</router-link>
+            <router-link v-for="link in links" :key="link.text" :to="link.href" @click="closeMenu">{{ link.text }}</router-link>
         </div>
     </nav>
 </template>