Drawer min-width



  • If I change a min-width in layout drawer componet, when I click to expand mini = “min_state =! min_state” there is a BUG in the icons. They move to the left, if I remove the min-width property it doesn’t happen

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      :mini-width="130"
      :mini="isMin"
      content-class="bg-grey"
    >
        <q-list>
            <q-item clickable @click="menu">
              <q-item-section avatar v-ripple>
                <q-icon name='menu' />
              </q-item-section>
            </q-item>
      </q-list></q-drawer>
    

    I need help. Simple remove min-width and work fine. With min-width ICON move to left and is BAD



  • a need post to total code for best help-me. SImple create quasar default project and use this code to layout

    <template>
      <q-layout view="lHr Lpr lFr">
        <q-header  height-hint="98" :reveal="true">
          <q-toolbar>
            <q-btn
              flat
              dense
              round
              icon="menu"
              aria-label="Menu"
              @click="leftDrawerOpen = !leftDrawerOpen"
            />
    
            <q-toolbar-title>
              Quasar App
            </q-toolbar-title>
    
            <div>Quasar v{{ $q.version }}</div>
          </q-toolbar>
        </q-header>
        <q-drawer
          v-model="leftDrawerOpen"
          show-if-above
          :width="400"
          :mini-width="130"
          :mini="isMin"
          content-class="bg-grey"
        >
          <div class="flex full-height no-wrap justify-start row" >
    
            <div class="menuOne">
              <q-list>
                <q-item clickable @click="menu">
                  <q-item-section avatar v-ripple>
                    <q-icon name='menu' />
                  </q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name='star' />
                  </q-item-section>
                </q-item>
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name='control_point' />
                  </q-item-section>
                </q-item>
                <div class="fixar">
                  <q-item clickable>
                    <q-item-section avatar>
                      <q-icon name='dashboard' />
                    </q-item-section>
                  </q-item>
                  <q-item clickable>
                    <q-item-section avatar>
                      <q-icon name='account_circle' />
                    </q-item-section>
                  </q-item>
                </div>
              </q-list>
            </div>
    
            <div class="col menuTwo bg-white">
              <q-list >
                <q-item clickable>
                  <q-item-section avatar>
                    <q-icon name='language' />
                  </q-item-section>
    
                  <q-item-section>Menu bem legal</q-item-section>
                </q-item>
                <q-item clickable v-for="n in 6" :key="n">
                  <q-item-section avatar>
                    <q-icon name='lock' />
                  </q-item-section>
    
                  <q-item-section>App OfferX</q-item-section>
                </q-item>
              </q-list>
            </div>
          </div>
        </q-drawer>
    
        <q-page-container>
          <router-view />
        </q-page-container>
      </q-layout>
    </template>
    
    <script>
    export default {
      name: 'MainLayout',
    
      data () {
        return {
          isMin: true,
          leftDrawerOpen: true
        }
      },
    
      methods: {
        menu () {
          this.isMin = !this.isMin
        }
      }
    }
    </script>
    
    <style lang="stylus">
    .menuOne {
      background: linear-gradient(25deg, #05057c, #3c07a2, #6409ca, #8c0cf4);
      color: white;
      max-width: 70px;
      min-width: 70px;
      width: 70px;
    }
    
    .menuTwo {
      color: #757575;
      border-right: 1px;
      border: 1px solid #e0e0e0;
      min-width: 60px;
    }
    
    .fixar {
      position: absolute;
      bottom: 0;
      left: 0px;
      padding-left: 0;
      width: 70px;
      margin-left: 0px;
    }
    </style>
    
    

Log in to reply