<template>
  <q-drawer
    :value="true"
    side="left"
    :width="300"
    :overlay="false"
    :mini="isMini"
    :mini-width="miniWidth"
    show-if-above
    bordered
    content-class="bg-background q-pb-lg"
  >
    <template slot="mini">
      <div class="flex no-wrap full-height">
        <slot name="mini" />
        <div @click="setFullMode" class="col q-pt-md ui-drawer__mini-wrap">
          <div class="ui-drawer__mini-icon">
            <q-icon name="la la-bars" size="24px" />
          </div>
          <div class="ui-drawer__mimi-item text-h3 q-mt-md">{{ miniText }}</div>
        </div>
      </div>
    </template>
    <slot />
  </q-drawer>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from 'vue-property-decorator'
import { QDrawer, QIcon } from 'quasar'

@Component({ inheritAttrs: false, components: { QDrawer, QIcon } })
export default class UiDrawer extends Vue {
  @PropSync('mini') isMini?: boolean
  @Prop(String) miniText?: string
  @Prop(Number) miniWidth?: number

  setFullMode() {
    this.isMini = false
  }
}
</script>
