[Bug Report][3.6.6] VNavigationDrawer renders below VAppBar

[karanb0]

Environment

Vuetify Version: 3.6.6
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

1. v-app with children v-navigation-drawer and v-app-bar in that order
2. Make the drawer render a bit slower than the app bar.
   • In the repro below I used 1ms delay, but in practice this could be an async call or complex computation in the loading hooks of the component.

Expected Behavior

In the order the components are defined, the drawer should consistently open over the app bar.

Actual Behavior

Observe that when the navigation drawer opens, it's clipped below the app bar.

Reproduction Link

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

Screenshot

Other comments

The issue doesn't exist in Vuetify 3.5, it's happening in versions 3.6+. If you change the Vuetify version in the repro link, you'll notice that the drawer renders correctly regardless of delay.

Workaround

Able to work around if for now by only loading the VAppBar (via v-if) after the VNavigationDrawer is mounted. Ideally we wouldn't have to manage this though.