<template>
  <q-drawer
    :value="value"
    :mini="isMini"
    bordered
    content-class="bg-background"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div v-show="isMini" class="ui-drawer__mini flex no-wrap fit absolute">
      <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>

    <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 {
  @Prop({ type: Boolean, default: true }) value!: boolean
  @PropSync('mini') isMini?: boolean
  @Prop(String) miniText?: string

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