Vuetify v-btn in v-bottom-navigation stays active when not pressed

Question

I am having an issue with a button in my bottom nav in Vuetify. I have defined a bunch of buttons as routes (I am using Nuxtjs), so a button will be active if I am on that page.

There is a button in the bottom nav bar that is not a route though, and it exists to activate a v-navigation-drawer. When I click this button, the drawer slides out fine. When I click outside the drawer to get it to slide back, though, both the button of the page I am on and the button that activates the drawer are active. I want the button that activates the drawer to never be active.

Visual-- I am on the app's home page.

Here is what the bottom nav looks like before clicking the button for the v-navigation-drawer

Here is what the bottom nav looks like after I close the v-navigation-drawer. The button furthest to the right is what activates the navigation drawer, and it should never remain active after I close the drawer. Yet it does, and I need to click another button to deactivate it.

I have tried many things suggested on other questions here to fix this, including but not limited to the following: defining a custom active class for this button, using the exact prop, and using a watcher to change the value of the active value in the nav bar. None of these things have worked.

Here is the code where the issue is. I have removed the irrelevant buttons, keeping only the home and profile buttons (the profile is the problem one which stays active undesirably):

<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>

The profile button stays active after I close the navigation drawer it opens (while another button is active at the same time due to vue's router) and I can only deactivate the profile button by clicking another button.

How might I eliminate this issue?

EDIT I think I figured out what was wrong, for any people coming from a search engine. It appears to be a limitation of Vuetify's bottom nav. It is intended specifically for navigation and since this button was on the bottom nav bar without an assigned route (all it did was slide out a navigation drawer, no route change), it associates itself with the current route temporarily until another route is navigated to and the bottom navigation bar's state is modified. This interpretation may be wrong, but it seems to match the behavior.

I was unable to fix the problem though due to my low knowledge of CSS (first time building a website, my day job is mostly data engineering) so I just changed my webapp's design. Apologies for anyone who was hoping for an answer :(

Answer 1

@genp according to the docs for v-btn, exact will match every route if passed in as a prop but no route specified. Could your btn be matching for the current route and so triggering it's active state? How about you remove the exact prop from the button in the nav. Does anything change? Docs here.