79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<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>
|