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