59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script setup>
|
|
import { onMounted, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
|
|
|
const navigation = useNavigationStore();
|
|
const { t } = useI18n();
|
|
|
|
onMounted(() => {
|
|
navigation.fetchPinned();
|
|
});
|
|
|
|
const pinnedModules = computed(() => navigation.getPinnedModules());
|
|
</script>
|
|
|
|
<template>
|
|
<q-menu anchor="bottom left" class="row q-pa-md q-col-gutter-lg" max-width="350px" max-height="400px">
|
|
<template v-if="pinnedModules.length">
|
|
<div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
|
|
<q-btn
|
|
align="evenly"
|
|
padding="16px"
|
|
flat
|
|
stack
|
|
size="lg"
|
|
:icon="item.icon"
|
|
color="primary"
|
|
class="col-4 button"
|
|
:to="{ name: item.name }"
|
|
>
|
|
<div class="text-center text-primary button-text">
|
|
{{ t(item.title) }}
|
|
</div>
|
|
</q-btn>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="row no-wrap q-pa-xs flex-item text-center text-grey-5" style="min-width: max-content">
|
|
{{ t('globals.noPinnedModules') }}
|
|
</div>
|
|
</template>
|
|
</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>
|