61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { ref } from 'vue';
|
|
import MenuHeader from 'src/modules/profile/components/shared/menu-header.vue';
|
|
|
|
const { initialMenu } = defineProps<{
|
|
firstName: string;
|
|
lastName: string;
|
|
initialMenu: string;
|
|
}>();
|
|
|
|
const current_menu = ref<string>(initialMenu);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="column flex-center"
|
|
>
|
|
<MenuHeader
|
|
:user-first-name="firstName"
|
|
:user-last-name="lastName"
|
|
class="col-auto"
|
|
/>
|
|
|
|
<div class="row col full-width">
|
|
<div
|
|
class="col-auto q-pa-xs bg-dark rounded-5 shadow-2"
|
|
:class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-sm'"
|
|
>
|
|
<q-tabs
|
|
v-model="current_menu"
|
|
:vertical="$q.screen.gt.sm"
|
|
active-color="accent"
|
|
indicator-color="accent"
|
|
>
|
|
<slot name="tabs"></slot>
|
|
</q-tabs>
|
|
</div>
|
|
|
|
<q-card
|
|
class="col"
|
|
:class="$q.screen.lt.md ? 'full-width' : 'q-ml-sm'"
|
|
>
|
|
<q-tab-panels
|
|
v-model="current_menu"
|
|
animated
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
class="rounded-5"
|
|
style="height: 50vh;"
|
|
>
|
|
<slot name="panels"></slot>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</div>
|
|
|
|
</div>
|
|
</template> |