salix-front/src/components/LeftMenu.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useRole } from 'src/composables/useRole';
import { useQuasar } from 'quasar';
import { useNavigation } from 'src/composables/useNavigation';

const { t } = useI18n();
const { hasAny } = useRole();
const navigation = useNavigation();

const quasar = useQuasar();

async function onToggleFavoriteModule(moduleName, event) {
    await navigation.toggleFavorite(moduleName, event);

    quasar.notify({
        message: t('globals.dataSaved'),
        type: 'positive',
    });
}
</script>

<template>
    <q-list padding>
        <q-item-label header>{{ t('globals.favoriteModules') }}</q-item-label>
        <template v-for="module in navigation.favorites.value" :key="module.title">
            <div class="module" v-if="!module.children">
                <q-item
                    clickable
                    v-ripple
                    active-class="text-primary"
                    :key="module.title"
                    :to="{ name: module.stateName }"
                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
                >
                    <q-item-section avatar :if="module.icon">
                        <q-icon :name="module.icon" />
                    </q-item-section>
                    <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
                    <q-item-section side>
                        <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
                            <q-icon name="vn:pin_off"></q-icon>
                        </div>
                    </q-item-section>
                </q-item>
            </div>

            <template v-if="module.children">
                <q-expansion-item
                    class="module"
                    active-class="text-primary"
                    :label="t(`${module.name}.pageTitles.${module.title}`)"
                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
                    :to="{ name: module.stateName }"
                >
                    <template #header>
                        <q-item-section avatar>
                            <q-icon :name="module.icon"></q-icon>
                        </q-item-section>
                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
                        <q-item-section side>
                            <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
                                <q-icon name="vn:pin_off"></q-icon>
                            </div>
                        </q-item-section>
                    </template>
                    <template v-for="section in module.children" :key="section.title">
                        <q-item
                            clickable
                            v-ripple
                            active-class="text-primary"
                            :to="{ name: section.stateName }"
                            v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
                        >
                            <q-item-section avatar :if="section.icon">
                                <q-icon :name="section.icon" />
                            </q-item-section>
                            <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
                        </q-item>
                    </template>
                </q-expansion-item>
            </template>
        </template>
    </q-list>

    <q-separator />

    <q-expansion-item :label="t('moduleIndex.allModules')">
        <q-list padding>
            <template v-for="module in navigation.modules.value" :key="module.title">
                <div class="module" v-if="!module.children">
                    <q-item
                        class="module"
                        clickable
                        v-ripple
                        active-class="text-primary"
                        :key="module.title"
                        :to="{ name: module.stateName }"
                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
                    >
                        <q-item-section avatar :if="module.icon">
                            <q-icon :name="module.icon" />
                        </q-item-section>
                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
                        <q-item-section side>
                            <div
                                @click="onToggleFavoriteModule(module.name, $event)"
                                class="row items-center"
                                v-if="module.name != 'dashboard'"
                            >
                                <q-icon name="vn:pin"></q-icon>
                            </div>
                        </q-item-section>
                    </q-item>
                </div>

                <template v-if="module.children">
                    <q-expansion-item
                        class="module"
                        active-class="text-primary"
                        :label="t(`${module.name}.pageTitles.${module.title}`)"
                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
                        :to="{ name: module.stateName }"
                    >
                        <template #header>
                            <q-item-section avatar>
                                <q-icon :name="module.icon"></q-icon>
                            </q-item-section>
                            <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
                            <q-item-section side>
                                <div
                                    @click="onToggleFavoriteModule(module.name, $event)"
                                    class="row items-center"
                                    v-if="module.name != 'dashboard'"
                                >
                                    <q-icon name="vn:pin"></q-icon>
                                </div>
                            </q-item-section>
                        </template>
                        <template v-for="section in module.children" :key="section.title">
                            <q-item
                                clickable
                                v-ripple
                                active-class="text-primary"
                                :to="{ name: section.stateName }"
                                v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
                            >
                                <q-item-section avatar :if="section.icon">
                                    <q-icon :name="section.icon" />
                                </q-item-section>
                                <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
                            </q-item>
                        </template>
                    </q-expansion-item>
                </template>
            </template>
        </q-list>
    </q-expansion-item>
</template>

<style>
.module .icon-pin,
.module .icon-pin_off {
    visibility: hidden;
}
.module:hover .icon-pin,
.module:hover .icon-pin_off {
    visibility: visible;
}
</style>