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