How to link in Click trigger Layout Drawer ?



  • Hello, I’m discovering Quasar and try to use a “Mini-mode with click trigger” https://quasar.dev/layout/drawer#Example--Mini-mode-with-click-trigger

    I’ve made links with the router and it’s working fine when the drawer is deployed.
    My pages are displayed in the QPage Container.

        <q-page-container>
          <transition
            appear
            enter-active-class="animated fadeOut"
            leave-active-class="animated rotateOut"
            :duration="300"
          >
            <router-view />
          </transition>
        </q-page-container>
    

    The problem is when I minify the menu with just the icons. When I click on an icon :

    • the whole page is blank,
    • the whole page appears, with the correct link,
    • the menu is deployed

    How could I avoid this flashing page reload ?

    Here is my code, loading the menu structure from data.
    Thanks for help.

    {
      title: "Page1",
      caption: "blabla",
      icon: "favorite",
      iconColor: "pink",
      link: "page1",
      separator: false
    },
    

    MainLayout Q-drawer :

        <q-drawer
          v-model="leftDrawerOpen"
          show-if-above
          :mini="!leftDrawerOpen || miniState"
          @click.capture="drawerClick"
          :width="250"
          :breakpoint="500"
          bordered
          content-class="bg-grey-3"
        >
          <q-scroll-area class="fit">
            <q-list padding>
              <MenuItem
                v-for="link in menuLinks"
                :key="link.title"
                v-bind="link"
              />
            </q-list>
          </q-scroll-area>
          <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
            <q-btn dense round unelevated color="accent" icon="chevron_left" @click="miniState = true" />
          </div>
        </q-drawer>
    

    Menu template :

    <template>
      <div>
        <q-item clickable :to="link">
          <q-item-section v-if="icon" avatar>
            <q-icon :name="icon" :color="iconColor" />
          </q-item-section>
    
          <q-item-section>
            <q-item-label>{{ title }}</q-item-label>
            <q-item-label caption>{{ caption }}</q-item-label>
          </q-item-section>
        </q-item>
    
      </div>
    </template>
    


  • @Incremental

    The problems you are describing are very hard to solve with just some lines of code. If you create a codepen.io we are able to help you better .



  • This post is deleted!


  • I created the following Codesandbox where you can see the problem.
    https://codesandbox.io/s/layout-drawer-o21ky?file=/src/layouts/MainLayout.vue

    Regards


Log in to reply