How can I create a "footer" in my drawer to minimize it?

Yoshi60

Hello Quasar Community !

I’m new on Quasar to upgrade my old personal project developed with CoreUI but I cannot manage to create a “footer” in my left drawer to minimize the drawer.

Here is my current menu in CoreUi. You can see the ‘left-arrow’ at the bottom of the sidebar to minimize.
Sidebar-Complete

Once minimized, I would like to do something like that (a right-arrow to expanse):
Sidebar-Minimized

Even if I reduce the heigh of my window I would like to get this ‘footer’ in front of my menu:
Sidebar-reduced

I have successfully created the same menu in Quasar with a q-drawer, a q-list and many q-item for each section/subsection as you can see:

<q-drawer
      show-if-above
      v-model="drawer"
      :width="250"
      bordered
      content-class="bg-grey-10"
      :mini="miniState"
      >
      <q-list dark >
        <q-item-label header class="text-grey-1">Section 1</q-item-label>
        <q-item clickable exact @click="dosubA = true" class="sidebar-item" >
          <q-item-section avatar>
            <q-icon name="add"></q-icon>
          </q-item-section>
          <q-item-section>
            <q-item-label>SubA</q-item-label>
          </q-item-section>
        </q-item>
[...]

Unfortunately after many hours I was not able to reproduce this ‘bottom-footer-arrow’ on my drawer to minimize my drawer.

For now, the only solution I have found was to split my global app footer, create a toolbar with the same background color of my drawer and display a q-btn with a v-if/v-else statement to display the right div (left-arrow or right arrow). But it’s completely not satisfying because of the ‘transition’ gap between this section and the drawer (and also I would like to remove the global footer of my app ).

    <q-footer>
      <q-toolbar class="arrow_footer">
      <div class="arrow-global">
          <q-avatar v-if="!miniState && drawer" class="arrow">
            <q-btn dense flat round class="arrow-btn absolute-right" icon="keyboard_arrow_left" @click="miniState = !miniState"/>
          </q-avatar>
          <q-avatar v-if="miniState && drawer" class="arrow-minimized">
            <q-btn dense flat round class="arrow-minimized-btn" icon="keyboard_arrow_right" @click="miniState = !miniState"/>
          </q-avatar>
      </div>
      <div>

Do you have a tip for me please? I think there is a ‘simply’ way to do what I want but I’m a little bit lost

Thanks in advance

No More Posting New Topics!

How can I create a "footer" in my drawer to minimize it?