Vuetify: [Bug Report] v-content padding is inverted while toggle Navigation drawer mini-variant with defined width

[Arsync]

Environment

Vuetify Version: 2.0.3
Vue Version: 2.6.10
Browsers: Google Chrome
OS: Windows 10

Steps to reproduce

1. Create App with clipped Navigation drawer and App bar (clipped-left).
2. Bind drawer 'mini-variant' to button click event for toggle.
3. All works correctly.
4. Set drawer width to 320px and mini-variant-width to 120px.

Expected Behavior

v-content left padding is 120px when mini-variant is true and 320px when not.

Actual Behavior

v-content left padding is 320px when mini-variant is true and 120px when not.

Reproduction Link

https://codepen.io/anon/pen/PMmgNX

[KaelWD]

It works if you use a number instead: width="320"

[johnleider]

This happens due to a change made in order to allow the drawer to take non px value numbers such as 40vw. However, even when using 300px, the system checks to see if it is NaN and if so, simply returns the current width of the drawer.

The issue starts when you swap between mini and full width, the element is animating when the check for its width is called and therefor returns an incorrect value.

What I'll probably end up doing with this is informing users of the caveat as I'm not sure it is worth dedicating time to come up with a specific solution.

[HeshamMeneisi]

It works if you use a number instead: width="320"

Only works for the first time then breaks (expand, collapse, expand, collapse << fails). And this doesn't support expand-on-hover being set.

This is on v2.2.11.

I only got it to works with this workaround inside my Drawer component:

onTransitionEnd () {
    this.isMini = this.$refs.drawer.isMiniVariant;
}
@Watch("isMini")
onIsMiniChanged() {
  this.width = this.miniWidth;
  this.$nextTick(() => {
    this.width = this.fullWidth;
  });
}

onTransitionEnd is triggered by @transitionend