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


Log in to reply