<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>
