<template>
  <q-drawer
    :model-value="drawer"
    show-if-above
    :width="200"
    :breakpoint="500"
    @update:model-value="$emit('drawer-toggle')"
  >
    <!-- TODO: Build this programmatically -->
    <q-scroll-area class="fit">
      <q-list padding class="menu-list">
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="account_circle" />
          </q-item-section>

          <q-item-section> Profile </q-item-section>
        </q-item>

        <q-item active clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="sailing" />
          </q-item-section>

          <q-item-section> Boats </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="calendar_month" />
          </q-item-section>

          <q-item-section> Bookings </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="verified" />
          </q-item-section>

          <q-item-section> Certifications </q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="checklist" />
          </q-item-section>

          <q-item-section> Checklists </q-item-section>
        </q-item>
        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-icon name="info_outline" />
          </q-item-section>

          <q-item-section> Reference </q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { defineComponent } from 'vue';

defineProps(['drawer']);
defineEmits(['drawer-toggle']);

defineComponent({
  name: 'LeftDrawer',
});
</script>

<style lang="sass" scoped>
.menu-list .q-item
  border-radius: 0 32px 32px 0
</style>
