salix-front/src/components/LeftMenuItemGroup.vue

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import LeftMenuItem from './LeftMenuItem.vue';

const route = useRoute();
const { t } = useI18n();

const props = defineProps({
    item: {
        type: Object,
        required: true,
    },
    group: {
        type: String,
        default: '',
    },
});

const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
const isOpened = computed(() => {
    const { matched } = route;
    const { name } = item.value;

    return matched.some((item) => item.name === name);
});
</script>
<template>
    <QExpansionItem
        :group="props.group"
        active-class="text-primary"
        :label="item.title"
        :to="{ name: item.name }"
        expand-separator
        :default-opened="isOpened"
    >
        <template #header>
            <QItemSection avatar>
                <QIcon :name="item.icon"></QIcon>
            </QItemSection>
            <QItemSection>{{ t(item.title) }}</QItemSection>
            <QItemSection side>
                <slot name="side" :item="item" />
            </QItemSection>
        </template>
        <template v-for="section in item.children" :key="section.name">
            <LeftMenuItem :item="section" />
        </template>
    </QExpansionItem>
</template>