Drawer min-width

[rodrigofsacht]

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

[rodrigofsacht]

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>