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

Programmatically build links. Styling Changes

Browse Source
This commit is contained in:
Patrick Toal
2023-11-16 16:35:41 -05:00
parent 791f065367
commit 214cfbd1be
14 changed files with 278 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BoatComponent.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div>My component</div>
</template>
<script setup lang="ts">
</script>

49
src/components/EssentialLink.vue
View File

@@ -1,49 +0,0 @@
<template>
<q-item
clickable
tag="a"
target="_blank"
:href="link"
>
<q-item-section
v-if="icon"
avatar
>
<q-icon :name="icon" />
</q-item-section>
<q-item-section>
<q-item-label>{{ title }}</q-item-label>
<q-item-label caption>{{ caption }}</q-item-label>
</q-item-section>
</q-item>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'EssentialLink',
props: {
title: {
type: String,
required: true
},
caption: {
type: String,
default: ''
},
link: {
type: String,
default: '#'
},
icon: {
type: String,
default: ''
}
}
});
</script>

57
src/components/LeftDrawer.vue
View File

@@ -6,63 +6,25 @@
: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>
<template v-for="link in links" :key="link.name">
<q-item clickable v-ripple :to="link.to">
<q-item-section avatar>
<q-icon :name="link.icon" />
</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-item-section> {{ link.name }} </q-item-section>
</q-item>
</template>
</q-list>
</q-scroll-area>
</q-drawer>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { defineComponent } from 'vue';
import { links } from 'components/navlinks';
defineProps(['drawer']);
defineEmits(['drawer-toggle']);
@@ -70,6 +32,7 @@ defineEmits(['drawer-toggle']);
defineComponent({
name: 'LeftDrawer',
});
console.log(links);
</script>
<style lang="sass" scoped>

9
src/components/models.ts
View File

@@ -1,8 +1,9 @@
export interface Todo {
id: number;
content: string;
export interface Boat {
name: string;
class: string;
year: number;
}
export interface Meta {
export interface test {
totalCount: number;
}

38
src/components/navlinks.ts Normal file
View File

@@ -0,0 +1,38 @@
export const links = [
{
name: 'Profile',
to: '/profile',
icon: 'account_circle',
front_links: false,
},
{
name: 'Boats',
to: 'boat',
icon: 'sailing',
front_links: true,
},
{
name: 'Booking',
to: '/booking',
icon: 'calendar_month',
front_links: true,
},
{
name: 'Certifications',
to: '/certifications',
icon: 'verified',
front_links: true,
},
{
name: 'Checklists',
to: '/checklists',
icon: 'checklist',
front_links: true,
},
{
name: 'Reference',
to: '/reference',
icon: 'info_outline',
front_links: true,
},
];