CODEWITHSUNDEEP
javascriptvue.js
newbiedev
newbiedev

Reputation: 3586

Show or hide offcanvas menu when router link is clicked

I have a vue electron app where the main menu template is loaded inside the App.vue file. I want to hide it when a <router-link> is clicked. It's an offcanvas menu so only the hamburger button is always displayed in all the components and the content will be showed only when the button is clicked. Is there any valid solution to manage this?

This is a sample of the menu markup that is inside the main view loaded inside the App.vue file

<template>
<div>
 <nav v-if="isVisible">
  <button @click.prevent="toggleMenu()"><i class="fas fa-bars"></i></button>
  <li><router-link to="/"></router-link></li>
  <li><router-link to="/link-one"></router-link></li>
 </nav>
 <router-view></router-view>
</div> 
</template>

<script>
export {
 methods: {
  toggleMenu() {
   this.isVisible = !this.isVisible;
  }
 }
}
</script>

At the moment the offcanvas content will remain on screen also after the router view will change.

Upvotes: 0

Views: 1631

Answers (1)

LHJ
LHJ

Reputation: 692

use click.native?
Did a quick search on stackoverflow, looks like click on router-link will trigger click.native
https://stackoverflow.com/a/52230500/13703967

<template>
<div>
 <nav v-if="isVisible">
  <button @click.prevent="toggleMenu()"><i class="fas fa-bars"></i></button>
  <li><router-link to="/" @click.native="toggleMenu"></router-link></li>
  <li><router-link to="/link-one" @click.native="toggleMenu"></router-link></li>
 </nav>
 <router-view></router-view>
</div> 
</template>

<script>
export {
 methods: {
  toggleMenu() {
   this.isVisible = !this.isVisible;
  }
 }
}
</script>

Upvotes: 2

Related Questions