Q:

Quasar JS collapsible in drawer collapse on mini state

I am using Quasar JS version v0.17.19 and I would like that on mouseout the layout drawer goes to mini state BUT that the collapsible items remain expandable with only the icons showing.  On mouse out the layout drawer goes to mini state; however the items that were expanded are collapsed.  I've gone over the documentation but haven't seen any config for this behavior. 
<q-layout-drawer side="left" no-hide-on-route-change overlay v-model="isLeftDrawerOpen" 
        content-class="bg-blue-grey-10" @mouseover="miniState = false" @mouseout="miniState = true" 
        :mini="miniState" :width=290 :breakpoint="1037">
        <user-menu />
    </q-layout-drawer>

A:

There is no default option for this in the layout drawer but you can achieve this programmatically.  Please refer the following example. 
<q-layout-drawer
      v-model="isLeftDrawerOpen"
      :mini="miniState"
      @mouseover="miniState = false"
      @mouseout="miniState = true;"
    >
      <q-list>
        <q-item>
          <component :is="comp" v-model="comp_model" icon="settings" label="Settings">
            <div>
              <q-list
                no-border
                inset-delimiter
              >
                <q-item v-if="miniState && comp=='div'">
                  <q-item-side icon="settings">
                  </q-item-side>
                  <q-item-main>
                    Settings
                  </q-item-main>
                </q-item>
                <q-item>
                  <q-item-side icon="insert_drive_file">
                  </q-item-side>
                  <q-item-main>
                    User Accounts
                  </q-item-main>

                </q-item>
                <q-item>
                  <q-item-side icon="group">
                  </q-item-side>
                  <q-item-main>
                    User Accounts
                  </q-item-main>
                </q-item>
              </q-list>
            </div>
          </component>
        </q-item>
      </q-list>
    </q-layout-drawer>

    data() {
      return {
        comp:'q-collapsible',
        isLeftDrawerOpen: true,
        comp_model:false,
        miniState:true,
      }
    },
    watch: {
       'miniState': function () {
         if (this.miniState && this.comp_model) {
           this.comp = 'div'
         }
         else{
           this.comp = 'q-collapsible'
         }
       }
     }

