57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useNavigation } from 'src/composables/useNavigation';
|
|
|
|
const { t } = useI18n();
|
|
const modules = useNavigation();
|
|
|
|
onMounted(() => {
|
|
modules.fetchFavorites();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-menu
|
|
anchor="bottom left"
|
|
class="row q-pa-md q-col-gutter-lg"
|
|
max-width="350px"
|
|
max-height="400px"
|
|
style="justify-content: center"
|
|
v-if="modules.favorites.value.length"
|
|
>
|
|
<div v-for="module of modules.favorites.value" :key="module.title" class="row no-wrap q-pa-xs flex-item">
|
|
<q-btn
|
|
align="evenly"
|
|
padding="16px"
|
|
flat
|
|
stack
|
|
size="lg"
|
|
:icon="module.icon"
|
|
color="orange-6"
|
|
class="col-4 button"
|
|
:to="{ name: module.stateName }"
|
|
>
|
|
<div class="text-center text-orange-6 button-text">
|
|
{{ t(`${module.name}.pageTitles.${module.title}`) }}
|
|
</div>
|
|
</q-btn>
|
|
</div>
|
|
</q-menu>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex-item {
|
|
width: 100px;
|
|
}
|
|
.button {
|
|
width: 100%;
|
|
line-height: normal;
|
|
align-items: center;
|
|
}
|
|
.button-text {
|
|
font-size: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|