One issue I encountered was that even though I successfully disabled the document body scroll when my mobile nav was open, the overflow hidden feature was not being removed when a user clicked a link to another route or page. To address this, I implemented a simple method to remove the overflow hidden when a link is clicked in the nav while the menu is open. This method works well, but there is a small caveat I need help with. Currently, if a user is on a page like "home" with the mobile nav open and they click the "home" link in the nav, it closes the menu. I understand that this behavior is due to the method I created. Is there a way to prevent this event from firing when clicking the link of the current page?
<header :class="{ 'header-active': activeHamburger }">
<nav class="nav-row nav-row--primary" aria-label="Main Navigation">
<ul class="row--flex justify--space-between">
<li>
<router-link to="/" @click="removeOverflowHidden();
">
home
</router-link>
</li>
<li>
<router-link to="About" @click="removeOverflowHidden();
">
about
</router-link>
</li>
<li>
<router-link to="Work" @click="removeOverflowHidden();
">
work
</router-link>
</li>
<li>
<router-link to="Contact" @click="removeOverflowHidden();
">
contact
</router-link>
</li>
</ul>
</nav>
</header>
data() {
return {
activeHamburger: false
};
},
watch: {
activeHamburger: function() {
if (this.activeHamburger) {
document.documentElement.style.overflow = "hidden";
return;
}
document.documentElement.style.overflow = "auto";
}
},
methods:{
removeOverflowHidden() {
this.activeHamburger = false;
}
}