[Feature Request] VAppBar and VToolbar should be able to calculate and emit it's own height

[MatthewAry]

Problem to solve

This is something that I've ran into frequently. I often need to change the contents of my VToolbar or VAppBar dynamically depending on the height of the contents with in it. That way I might swap out contents depending on my route by using something like use PortalVue, or by some other means.

If you want to use VAppBar or VToolbar in a layout (and I am using VToolbar as a Layout Item for reasons) it's best to define the height of the element so it can pass that information along to the layout system. But that also means that if you want to automatically adjust the size of the VAppBar or VToolbar depending on it's contents, you have to handle that yourself, which can really make things difficult if you don't want to interfere with the styles built into Vuetify.

Proposed solution

Make it an option for vuetify to apply a resize observer to the container v-toolbar__content in the toolbar components via a prop. Get the height of the element with the v-toolbar__content class (I'm not saying use a class selector, that's dumb. That's just how I'm identifying the element you should use) and also get the border and padding heights that exist outside of the the observed element within the component (so you can get the actual height of the toolbar which is content height + padding height + border height). Emit that to the layout system if applicable and expose an event on the component so if you need to wrap VToolbar in VLayoutItem, you can wire them together.

[JoachimTillessen]

I ran into the same problem and decided against using the layout system, because of the lack of flexibility regarding AppBar height. If @MatthewAry 's approach should be too complicated. Maybe a variant that allows to use a header with position relative would also play nicely with dynamic heights.