I'm struggling with finding a solution to this issue, as I am unsure of how to proceed. The problem I am facing is that when I click on an item, the router-view changes correctly, but the menu remains open. I would like it to close after a click.
This pertains to my navbar component. <template>
<nav class="navbar-main">
<div class="navbar-button" :class="{'is-active': isActive}" @click="isActive = !isActive">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-menu" :class="{'is-active-menu': isActive}">
<ul class="primary-menu">
<li class="nav-menu-item">
<router-link to="/" exact activeClass="link-active" class="nav-menu--link" tag="a">
<i class="fas fa-home"></i>Home
</router-link>
</li>
<li class="nav-menu-item">
<router-link to="/about" activeClass="link-active" class="navbar-item" tag="a">
<i class="fas fa-user"></i>About
</router-link>
<</li>
<li class="nav-menu-item">
<router-link to="/resume" activeClass="link-active" class="navbar-item" tag="a">
<i class="fas fa-address-card"></i>Resume
</router-link>
</li>
<li class="nav-menu-item">
<router-link to="/portfolio" activeClass="link-active" class="navbar-item">
<i class="fas fa-briefcase"></i>Portfolio
</router-link>
<</li>
</ul>
<div class="copy">
<p>Copyright © {{ new Date().getFullYear() }}</p>
<p>All rights Reserved</p>
</div>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
isActive: false
};
}
};
</script>