Currently, I'm working on a project for my University where I am trying to incorporate a feature that will automatically close the navigation drawer whenever any of its items are clicked. However, I am facing some challenges figuring out how to achieve this.
<template>
<div id="navigation-mobile">
<Searchbar class="search"/>
<ul v-for="item in tabs"
:key="item.path"
active-class
@click="$router.push(item.path)"
>
<li>{{item.name}}</li>
</ul>
<div class="mobile-footer">
<ul>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</div>
</template>
I have also included a snippet from App.vue below, which showcases a section of the nav-drawer:
<template>
<v-app id="app">
<NavBarMobile v-if="mobileView"/>
<div class="content" :class="{'open': showNav}">
<div style="height:20px"></div>
<div id="navigation-icon" v-if="mobileView"
@click="showNav = !showNav">
<v-icon medium dark>menu</v-icon>
</div>
<NavBar v-if="!mobileView"></NavBar>
<v-content class="pa-0" transition="slide-x-transition"></v-content>
<Footer v-if="!mobileView"></Footer>
<router-view></router-view>
</div>
</v-app>
</template>
This is the progress I've made so far. I believe using a @click event would be the most efficient solution, but I'm unsure if it can be implemented due to existing uses within the code. As programming isn't my strongest suit, I would greatly appreciate any advice or suggestions to overcome this hurdle.
You can access the codepen link here: https://codesandbox.io/s/gameshelf-0209-jack-forked-zobe5
To view the component mentioned above, navigate to NavBarMobile.vue
Thank you for taking the time to review this post and offer assistance!