119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<template>
|
|
<q-layout view="hhh lpR lff">
|
|
<q-header reveal elevated class="bg-primary text-white">
|
|
<q-toolbar>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
round
|
|
icon="menu"
|
|
aria-label="Menu"
|
|
@click="toggleLeftDrawer"
|
|
/>
|
|
|
|
<q-toolbar-title>
|
|
{{ pageTitle || "Polétání.cz" }}
|
|
</q-toolbar-title>
|
|
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer
|
|
v-model="leftDrawerOpen"
|
|
show-if-above
|
|
bordered
|
|
>
|
|
|
|
<q-img class="absolute-top" src="https://galerie.kvacek.cz/_data/i/upload/2022/06/22/20220622102027-b104fc0d-me.jpg" style="height: 150px">
|
|
<div class="absolute-bottom bg-transparent">
|
|
<router-link :to="{name: 'profile'}">
|
|
<q-avatar size="56px" class="q-mb-sm" v-if="loggedUser.avatarImageUrl">
|
|
<q-img :src="loggedUser.avatarImageUrl"/>
|
|
</q-avatar>
|
|
<q-avatar icon="person" color="primary" text-color="white" size="56px" v-else/>
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="loggedUser.name !== ''"
|
|
:to="{name: 'profile'}"
|
|
class="text-weight-bold">
|
|
{{ loggedUser.name }}
|
|
</router-link>
|
|
</div>
|
|
</q-img>
|
|
<q-scroll-area style="height: calc(100% - 150px); margin-top: 150px; border-right: 1px solid #ddd">
|
|
<q-list class="q-my-lg">
|
|
<template v-for="link in linksList" :key="link.title">
|
|
<q-separator v-if="link.separator"/>
|
|
<NavigationButton
|
|
v-if="!link.separator"
|
|
v-bind="link"
|
|
/>
|
|
</template>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
|
|
<q-page-container class="q-px-md">
|
|
<BreadcrumbsNavigation class="q-mx-md q-my-md" :items="breadcrumbs"/>
|
|
<router-view/>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted, ref, watch} from 'vue'
|
|
import NavigationButton from "components/navigation/NavigationButton.vue";
|
|
import {useUserStore} from "stores/User";
|
|
import {storeToRefs} from "pinia";
|
|
import BreadcrumbsNavigation from "components/BreadcrumbsNavigation.vue";
|
|
import {useAppStore} from "stores/App";
|
|
import {useMeta} from "quasar";
|
|
|
|
const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
|
|
useMeta(() => ({
|
|
title: pageTitle.value !== '' ? `${pageTitle.value} - Polétání.cz` : 'Polétání.cz'
|
|
}));
|
|
|
|
const linksList = [
|
|
{
|
|
title: 'Přidat let',
|
|
icon: 'airplane_ticket',
|
|
to: {name: "addFlight"}
|
|
},
|
|
{
|
|
title: 'Moje lety',
|
|
icon: "flight_takeoff",
|
|
to: {name: "myFlights"}
|
|
},
|
|
{separator: true},
|
|
{
|
|
title: 'Letadla',
|
|
icon: "connecting_airports",
|
|
to: {name: "aircrafts"}
|
|
},
|
|
{separator: true},
|
|
{
|
|
title: 'Zajímavá místa',
|
|
icon: "place",
|
|
to: {name: "poi"}
|
|
},
|
|
{separator: true},
|
|
{
|
|
title: 'Spolucestující',
|
|
icon: "people",
|
|
to: {name: "copilots"}
|
|
},
|
|
]
|
|
|
|
const leftDrawerOpen = ref(false)
|
|
const toggleLeftDrawer = () => {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
};
|
|
|
|
onMounted(() => {
|
|
useUserStore().setupCredentials();
|
|
})
|
|
const loggedUser = storeToRefs(useUserStore()).user;
|
|
</script>
|