salix-front/src/components/LeftMenu.vue

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRole } from 'src/composables/useRole';
import routes from 'src/router/routes';

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

const mainRoute = routes.find((route) => route.path === '/');
const moduleRoutes = (mainRoute && mainRoute.children) || [];

const modules = ref([]);
for (const route of moduleRoutes) {
    const module = {
        stateName: route.name,
        name: route.name.toLowerCase(),
        roles: [],
    };

    if (route.meta) {
        Object.assign(module, route.meta);
    }

    if (route.children && route.children.length) {
        const [moduleMain] = route.children;
        const routes = moduleMain.children;

        module.children = routes.map((route) => {
            const submodule = {
                stateName: route.name,
                name: route.name,
            };

            Object.assign(submodule, route.meta);

            return submodule;
        });
    }

    modules.value.push(module);
}
</script>

<template>
    <q-list padding>
        <template v-for="module in modules" :key="module.title">
            <template v-if="!module.children">
                <q-item
                    clickable
                    v-ripple
                    active-class="text-orange"
                    :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>
            </template>

            <template v-if="module.children">
                <q-expansion-item
                    expand-separator
                    active-class="text-orange"
                    :icon="module.icon"
                    :label="t(`${module.name}.pageTitles.${module.title}`)"
                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
                    :to="{ name: module.stateName }"
                >
                    <template v-for="section in module.children" :key="section.title">
                        <q-item
                            clickable
                            v-ripple
                            active-class="text-orange"
                            :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>
</template>