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 modules = mainRoute && mainRoute.children || []

const items = ref([]);
for (const module of modules) {
    const item = {
        path: module.path,
        roles: []
    };

    if (module.meta) {
        const meta = module.meta;
        item.title = meta.title;
        item.icon = meta.icon;
        item.roles = meta.roles || [];
    }

    items.value.push(item);
}

</script>

<template>
    <q-list padding>
        <template v-for="route in items" :key="route.title">
            <q-item
                clickable
                v-ripple
                :to="{ path: route.path }"
                v-if="!route.roles.length || hasAny(route.roles)"
                active-class="text-orange"
            >
                <q-item-section avatar :if="route.icon">
                    <q-icon :name="route.icon" />
                </q-item-section>
                <q-item-section>{{ t(`pages.${route.title}`) }}</q-item-section>
            </q-item>
        </template>
    </q-list>
</template>