salix-front-mindshore-fork2/src/components/PinnedModules.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>
    <QMenu
        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"
            >
                <QBtn
                    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>
                </QBtn>
            </div>
        </template>
        <template v-else>
            <div
                class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
                style="min-width: 200px"
            >
                {{ t('globals.noPinnedModules') }}
            </div>
        </template>
    </QMenu>
</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>