I am encountering an issue with a button in the bottom navigation bar of my Vuetify application. I have set up several buttons as routes in Nuxtjs, which become active when the corresponding page is visited. However, there is a button in the bottom nav bar that is not a route; instead, it is meant to open a v-navigation-drawer. The problem arises when I click on this button to open the drawer, as upon closing the drawer, both the active button for the current page and the drawer-activating button remain active. I want the drawer-activating button to never stay active.
When I am on the home page of the app, the issue becomes apparent.
Here is a preview of the bottom nav before clicking the button to open the v-navigation-drawer
I have attempted various solutions including defining a custom active class, using the exact prop, and implementing a watcher to modify the active value in the nav bar. Unfortunately, none of these methods have resolved the issue.
The problematic section of code includes only the home and profile buttons:
<v-bottom-navigation
app
fluid
grow
color="primary"
class="d-flex d-sm-none"
>
<v-btn
value="home"
to="/home"
nuxt
exact
>
<v-icon>
mdi-home
</v-icon>
</v-btn>
<v-btn
value="profile"
exact
@click="showProfileNavDrawer"
>
<v-icon>
mdi-account-circle
</v-icon>
</v-btn>
</v-bottom-navigation>
Even after closing the navigation drawer, the profile button remains active alongside another button that is active due to vue's router. Deactivating the profile button requires selecting another button.
Any suggestions on how to resolve this issue would be appreciated.
EDIT After some investigation, I believe I have identified the issue. It seems to be a limitation of Vuetify's bottom navigation, which is primarily designed for navigation purposes. The button in question, lacking an assigned route and serving the sole purpose of opening a navigation drawer, temporarily associates itself with the current route until a different route is navigated to and the bottom navigation bar's state is altered. While this explanation may not be definitive, it appears to align with the observed behavior.
Regrettably, my lack of expertise in CSS hindered me from resolving the problem, prompting me to alter my web application's design instead. I apologize to those who were seeking a solution to this issue.