Toggle v-navigation-drawer's expand-on-hover not resizing content

Question

I want to implement a "pin" functionality for my v-navigation-drawer i.e. switching between the mini-variant and normal version on button press but preserving the expand-on-hover functionality.

I tried it like this:

<v-navigation-drawer app :expand-on-hover="!navBarPinned" permanent clipped width="300">
...

And my button toggles it like this:

<v-btn icon @click="navBarPinned = !navBarPinned">
    <v-icon>mdi-pin</v-icon>
</v-btn>

This kind of works, on the first button press the navigation drawer is open the whole time and the content is moved to the right. But on the second button press (to use the mini variant again) the content does not move back to the left meaning that there is some space on the left side of the screen.

How can I achieve that the content is adjusted again?

Codepen

Answer 1

Fixed it by changing the key of my navigation drawer which forces a re-render of the navigation drawer component:

<v-navigation-drawer app :key="navDrawerPinned" :expand-on-hover="!navDrawerPinned" permanent clipped width="300">
...