Vuetify: [Feature Request] Option to have Navigation Drawer expand over content when a mini variant and mouseover

[someone1]

Problem to solve

Similar to how the Google Cloud Console works, I'd like to be able to have the Navigation Drawer expand when it is in mini variant mode and the user hovers over it, and contract back on mouseleave. Using mini variant is great for saving space and some users will be able to use the icons and tooltip text to know what each link is for, but if the drawer expanded on hover that'd be even more user-friendly. You can almost get this with some tricks using the temporary option, but every click would toggle the drawer (hide it on the next page) and it shifts the content under it a bit. See: https://codepen.io/s0me0ne1/pen/pVEYEQ

Proposed solution

Add a boolean option specifying the drawer should expand on hover when a mini variant (something like mini-variant-expand-on-hover). It could be similar to the temporary behavior except that it wouldn't toggle the v-model bound to it, wouldn't add a drop shadow (or maybe make this optional as well?), and doesn't shift the content on expansion.

My apologies in advance if this is already possible with the current options available, but it didn't seem so from all that I was able to understand.

[johnleider]

This can be easily accomplished in v1.2

https://codepen.io/johnjleider/pen/dqjNay?editors=1010

[someone1]

Thanks for the reply!

I actually don't think this is fixed - the content still shifts when it transitions between the mini variant and temporary

[danielsvane]

It would be nice if this could be reopened, or a working example without moving content was provided in the docs.

[andreafonso]

Is this feature implemented in Vuetify? Anyone has an example on how to do it?

[johnleider]

This is a built in feature as of v2.0. Simply use the expand-on-hover prop.

If you have any additional questions, please reach out to us in our Discord community.