Hide parent with v-onclick Vue 2.0. max-width: 767px

Question

Trying to build a dropdown-menu that will only be shown when screen is smaller than 767px. There are two requirements here to hide the menu and those are:

If someone clicks outside the menu and when a random router link is being clicked.

 export default { name: 'navbar', data() { return { isShow: false } }, methods: { onClick(e) { isShow = false } } } 

 <button v-on:click ="isShow = !isShow">Click ME</button> <div class="router" v-show="isShow"> <router-link to="/" class="nav-link" v-on:click.prevent="onClick()">Home</router-link> <router-link to="/phones" class="nav-link">Phones</router-link> <router-link to="/moreproducts" class="nav-link">More Products</router-link> <router-link to="/blogs" class="nav-link">Support</router-link> <router-link to="/news" class="nav-link">News</router-link> </div> </div> 

Answer 1

To show the menu according to screensize

You can use jquery to get browser viewport width.

 $(window).width(); 

Then write a function which will check screen width and return true/false.

showMenu() {
  let screenWidth = $(window).width()
  if (screenWidth < 767) {
    return true
  } else {
    return false
  }
}

To hide the menu

1. Use Vue Clickaway to check if someone clicks outside the menu.

2. Write before each navigation guard to hide the menu.

    router.beforeEach((to, from, next) => { this.hideMenu() // Hides the Menu next() })