[Bug Report] [3.6.X] Naviagtion Drawer support width in % vw or rem.

z0lo13 commented 2 months ago

Environment

Vuetify Version: 3.6.7 Last working version: 3.5.18 Vue Version: 3.4.27 Browsers: Chrome 124.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Not possible to use responsive units such as vw or rem or even %.

The not working playground link: https://play.vuetifyjs.com/#eNplU2uTmjAU/SupnU7bsW5QgVVHd4qPVVZXUNdntx8QowQDxBAVdPzvja+l037J3FfOPcm959cxFTIbapQ+7LYoVUqVOfIosTh6evcBKO8yFqUX8+LYgc8t7CN2C4mgdbcAcBhaVt5TDuc0LEEoYOIzKsfL2A0f7MCDn1GXkmEja+4P2ischB6RmxIfaI0eGeb308ahGs+ioBrVPH/el3A/zj/P37hZNNJBfjVjMA+bMTwczEPb0CeK2vYIjpy27betoRKTyNN4l+wVuInnci8bvYz7RkMvphtS0w9GY5m53bGuFkjPmW+rm41r5JFf79O8EXq0WC/yHm06Ltoo7UGYmx7qsvLiDYvEVvk6PY0Ml6FVSwvGG7Nbr6E6pU1UHSuTvi6bzZzVt2N1rkqx2Rg+64Os33YVQZelIzndqaqj9gy5MCvJtDqY6tZUgs5oaXWymtLDBdqi+nAyYjVb1cJA6zw3V2ysT9YjRbJ1/Q3X0PR1lcaq3GUdr6Cor1qYe+zoOb6YsYVTKPZbC/PRCFv7dO7N7FXEBJKRPI0Dtsb+CjQiS8wVleHHvJIRzhmAibfLzLkPftoE22uBtWDWHjFQAZ+u1nvqyaDIB/WLV4aX8vuGCO/fFRF4vrXDK4vjwM/cMG69dhkvWCDy0SVhTgL7ckGkGF45PMns8YI7IqxIX5Jg6by1AbNYLDKcbdE99fGsK10w4GK1S+B4BLd3nU4J9f94XjUgMlcRlOFf4hBuaDNMOQgR3141gs8kODgCIQRwAksWeOCrUMDXczkA4mtCfm9cORd9W1okRN/P0FcwAZM6/fC3hFyO338Az+wrCQ==

However in 3.5.18 it was working just fine: https://play.vuetifyjs.com/#eNplUE1PwzAM/Ssml4G0tSAEQlU3wYEzByZxoBxCmnbR0iRy3FbTtP9O+o3gZr/3/Gy/zzPzKOIX56KmlixhKcnKaU5ylxmAtNlw5/qyb4Q1xJWROEI9+E0GnoVW4rjNWI68lQhbuBqqjO3enDRp3Osmp9D9tQpGhjeq5KSs2YzD45JmU9lc6tk+YxOjregHAoWqPNDCeDppGeBW5XRI4PG2aRcy6b60yPEUFIS1nKj5r/3r+x4+LB6VKZej/104pBSYIaY0/hVfaL1A5Qi8pHpIUXVrCc6AsoALFGgrWIXkV50cIITiCeYMg+i64NrLm856MAs27LI2tdZrdh89RHdP7OsHw+2TPQ==

Expected Behavior

To be able to use other units such as vw, % or rem.

Actual Behavior

only number or number as string is working.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

I am not sure why it was reworked in favor of pixel perfect design, but it was much easier to make navigation drawer certain % of the viewport and now it has to be same on every screen or a computed property must calculate the width. I have seen that there is an issue #16150 mentioning same behaviour but it was 1.5 years since it was opened and is really not clear on it progress.

I also noticed that the translateX is now the width of the drawer however when it was 110% (in <3.5.18) it seems to work as expected.

Really apreciate your time for looking into this issue and thanks for such a great project like vuetify!

NitroG42 commented 1 month ago

And right now, this looks like a bug ; the drawer is displayed when it should not if the width is in '%' or 'vw'. Here is a solution I found from a coworker => use the width reactive property from useDisplay:

<v-navigation-drawer
:width="fullWidth / 2">
...
<v-navigation-drawer/>

...
setup() {
const { width: fullWidth } = useDisplay();
return { fullWidth }
}

NitroG42 commented 1 month ago

And this workaround is not perfect as I realize it works only if you don't have any other component has it measure the fullwidth/height of the "page", meaning in a case like this : if we want the right drawer to take 100% of available space, it would extend behind left drawer (before, it would be placed above main content but would stop at drawer left).

vuetifyjs / vuetify