I'm trying to make a vuetify toolbar that extend on click. (https://vuetifyjs.com/en/components/toolbars/)

Here is a sample of what it looks likes :

 <v-toolbar
    width="100%"
    height="40"
    extension-height="80"
    @click="toggleToolbarExtension"
  >    
  // stuff here...
    <v-expand-transition>
     <template v-if="isToolbarExtended" #extension="{}">
       <v-list dense color="transparent">

So the extended part of this vuetify component is only created in DOM when the data is on true. But what I would like is that the componen "grows" from height 0 to 80 with a transition. So, here are the changes I made :

    <v-toolbar
    width="100%"
    height="40"
    extension-height="isToolBarExtended ? 80 : 0"
    @click="toggleToolbarExtension"
  >
   // stuff here...
    <v-expand-transition>
     <template #extension="{}">
       <v-list v-show="IsToolBarExtended" dense color="transparent">

But it's not working. I've searched on forums but I haven't anyone trying to reproduce the exercice i'm doing. Seems like the template tag can't take any tranisition.

How to make the vuetify toolbar extension grow with smooth transition ?