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 = {
        path: route.path,
        name: route.name.toLowerCase(),
        roles: []
    };

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

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

<template>
    <q-list padding>
        <template v-for="module in modules" :key="module.title">
            <q-item
                clickable
                v-ripple
                :to="{ path: module.path }"
                v-if="!module.roles.length || hasAny(module.roles)"
                active-class="text-orange"
            >
                <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>
    </q-list>
</template>