Vuetify: [Feature Request]: Start/stop events when toggling navigation drawer

[jfrs]

I use Google Maps in my main view, and the map needs to be resized every time its container is resized.

When the navigation drawer is toggled, I use a timeout in order to wait for the animation to finish, otherwise the map will be resized too early.

This is the method called by my toolbar-icon click event:

toggleSidebar: function() {
  this.sidenav = !this.sidenav;
  setTimeout(function() {
    eventBus.$emit('toggleSidebar');
  }, 300);

It would be nice to have events triggered by the navigation drawer itself when the toggle starts and stops.

[johnleider]

Just as I stated in the PR for this, I'm not sure how I feel about this. Not that it is necessarily bad, but it opens the door for people probably wanting it on more components.

[johnleider]

After careful consideration, we are going to try and avoid this behavior for the foreseeable future. It is recommended if you need custom functionality as such, to apply an eventListener for transitionend.

[amitgur]

I'm moving BandPad to Veutify. I need that start and stop event for the drawer.
@johnleider I understand you decided not to add that event. can you explain how to "apply an eventListener for transitionend"?

[nekosaur]

You should be able to do

<v-navigation-drawer @transitionend="yourHandler"></v-navigation-drawer>

[theopjr]

Hi @nekosaur, I am having a similar case wherein I want to know if the navigation drawer has been closed. Are there other event listeners that I can use aside from @transitioned? It fires 5x on open and twice on close. Thanks in advance

[jacekkarczmarczyk]

@theopjr look at the PR for this issue - https://github.com/jacekkarczmarczyk/vuetify/commit/b2e8bd35458b18ac7d424e9d476fe7057b6432dd - there is a function onTransitionend which checks which transition has ended, maybe it will help. Note, that this function tests also the transition that fires when the mini-variant prop changes

[Christilut]

I need a way to detect closing of the drawer too, @transitionend works but I'm not sure how I can differentiate between opening and closing.

[johnleider]

Bind a model to the sidebar and check against that after the transition is complete.

[theopjr]

Hello @jacekkarczmarczyk , i'll try the onTransitionend tonight. @johnleider i tried this one last night. my scenario is that i have 3 components, Header and NavigationDrawer which are children under ProductList component. Now i have a button inside the Header component which will open the NavigationDrawer.. So far i was able to achieve the expected behavior by saving the value in the store.. My problem right now is that i need to update the value inside the store, so the next toggle will work.

[Christilut]

I'm doing exactly the same: button in header and saving the value in the store.

The problem is that the store value will go out of sync when closing the drawer with a slide touch motion. But I'll try to find a working solution with transitionEnd and the model. But I suspect it will be a slightly hackish solution and that's why a close and open event on the drawer would be nice here.

I'll report back

[theopjr]

yeah.. take note, @transitionend is not a very good solution in our case because if there are animations inside the drawer, say for instance, hover it also fires @transitionend event..
So AFAIK the only way to properly do this is to put the header and drawer in a single component.

[luiguild]

Someone can provide some example to trigger close/open event from navigation-drawer?

Thanks! 😄

[shierro]

in theory, what you can do is map the v-model to a state variable, and add a watcher to that state variable in order to update values outside your component.
Please see this link on how to implement watcher https://vuejs.org/v2/guide/computed.html#Watchers

[manico]

Has anyone figured out this?
I have added @transitionend to navigation drawer but handler is not triggered.

[jacekkarczmarczyk]

@manico This issue is closed, if you have any questions visit official discord chat at https://chat.vuetifyjs.com

[dougiefresh49]

In the event anyone is still struggling on this issue, i found a good workaround that isn't hacky and works very well.

Scenario:

I have a CartIcon button that is its own component, which is also inside the application Header component. Then i have a CartNavDrawer that should open up upon click of the CartIcon and dismiss when clicked outside of the CartNavDrawer.

Code Implementation

Everything resides in the store and the drawer uses the state from the store

<template>
  <v-navigation-drawer
    v-if="isVisible"
    v-click-outside="handleClickOutside"
    :value="isVisible"
    absolute
    temporary
    right
    stateless
  >
    ...

  </v-navigation-drawer>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ClickOutside from 'vue-click-outside';

export default {
  name: 'CartNavDrawer',
  directives: {
    ClickOutside,
  },
  computed: {
    ...mapState('cart', {
      isVisible: state => state.isVisible,
    }),
  },
  methods: {
    ...mapActions('cart', [
      'toggleCart',
    ]),
    handleClickOutside() {
      if (this.isVisible) {
        this.toggleCart();
      }
    },
  },
  data: () => ({}),
};
</script>

I used the external npm lib vue-click-outside to use as a helper directive to determine if the user has clicked outside the nav drawer.