oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Left Drawer Updates

Browse Source
This commit is contained in:
Patrick Toal
2023-11-14 17:48:09 -05:00
parent ace92fd2de
commit 791f065367
4 changed files with 84 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/LeftDrawer.vue Normal file
View File

@@ -0,0 +1,78 @@
<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>