problem
Using beufy and <b-navbar> component. Mobile menu is being closed after clicking on any link inside instead of opening another page. Probably click event is not propagated
solution
Need to set navbar so it does not automatically close on click (close-on-click) and manually close it after menu link is clicked
// .sync modifier enables 2way binding
<b-navbar
type="is-warning"
fixed-top
transparent
:is-active.sync="mobilemenu"
:close-on-click="false"
>
//.native modifier is necessery for nuxt-link, router-link etc
<b-navbar-item
tag="nuxt-link"
:to="{ path: '/about/' }"
@click.native="menuClicked()"
>
About
</b-navbar-item>
export default {
data() {
return {
mobilemenu: false
}
},
methods: {
menuClicked(event) {
this.mobilemenu = false
}
}
}