salix-front/src/components/LeftMenuItemGroup.vue

<script setup>
import { computed, ref, defineExpose } from 'vue';
import LeftMenuItem from './LeftMenuItem.vue';
import { elementIsVisibleInViewport } from 'src/composables/elementIsVisibleInViewport';

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

const groupEnd = ref(null);

const scrollToLastElement = () => {
    if (groupEnd.value && !elementIsVisibleInViewport(groupEnd.value)) {
        groupEnd.value.scrollIntoView({
            behavior: 'smooth',
            block: 'end',
        });
    }
};

const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys

defineExpose({
    scrollToLastElement,
});
</script>

<template>
    <template v-for="section in item.children" :key="section.name">
        <LeftMenuItem :item="section" />
    </template>
    <div ref="groupEnd" />
</template>