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

  • 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.

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

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

    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-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>

    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-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 v-if="miniState && drawer" class="arrow-minimized">
                <q-btn dense flat round class="arrow-minimized-btn" icon="keyboard_arrow_right" @click="miniState = !miniState"/>

    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

Log in to reply