Mangarr/assets/vue/app/shared/components/layout/sidebar/MenuGroup.vue

<template>
    <div
        class="border-l-4"
        :class="{
            'border-green-600': isActive,
            'border-transparent': !isActive
        }">
        <div class="flex w-full">
            <RouterLink
                :to="to"
                class="flex-grow px-4 py-2 flex items-center"
                :class="isActive
                    ? 'text-green-600 bg-gray-800'
                    : 'hover:bg-gray-700 hover:text-white'">
                <component :is="icon" class="w-5 h-5 mr-3" />
                <span class="px-2">{{ text }}</span>
            </RouterLink>
            <button
                v-if="subItems.length > 0"
                class="px-3 hover:bg-gray-700"
                :class="isActive ? 'text-green-600 bg-gray-800' : 'hover:text-white'"
                @click="toggleExpanded">
                <component :is="expanded ? ChevronUpIcon : ChevronDownIcon" class="w-4 h-4" />
            </button>
        </div>

        <ul v-if="subItems.length > 0" class="ml-8 mt-2 space-y-4" v-show="expanded">
            <SubMenuItem
                v-for="(subItem, index) in subItems"
                :key="index"
                :text="subItem.text"
                :to="subItem.to"
                @click="subItem.onClick" />
        </ul>
    </div>
</template>

<script setup>
    import { ref, watch, computed } from 'vue';
    import { useRoute } from 'vue-router';
    import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
    import SubMenuItem from './SubMenuItem.vue';
    import { useMenuStore } from '../../../stores/menuStore';

    const props = defineProps({
        id: {
            type: String,
            required: true
        },
        icon: {
            type: Function,
            required: true
        },
        text: {
            type: String,
            required: true
        },
        to: {
            type: String,
            required: true
        },
        subItems: {
            type: Array,
            default: () => []
        }
    });

    const menuStore = useMenuStore();
    const expanded = ref(false);
    const route = useRoute();

    
    const isActive = computed(() => {
        if (!props.to) {
            return props.subItems?.some(subItem => route.path.startsWith(subItem.to)) || false;
        }

        if (props.to === '/') {
            return route.path === props.to || props.subItems.some(item => route.path.startsWith(item.to));
        }

        return route.path.startsWith(props.to) || props.subItems.some(item => route.path.startsWith(item.to));
    });

    const isRouteMatching = path => {
        return props.subItems.some(item => path.startsWith(item.to)) || path === props.to;
    };

    watch(
        [() => route.path, () => menuStore.activeMenuId],
        ([newPath, newMenuId]) => {
            if (isRouteMatching(newPath)) {
                expanded.value = true;
                menuStore.setActiveMenu(props.id);
            } else if (newMenuId !== props.id) {
                expanded.value = false;
            }
        },
        { immediate: true }
    );

    const toggleExpanded = () => {
        if (expanded.value) {
            menuStore.setActiveMenu(null);
        } else {
            menuStore.setActiveMenu(props.id);
        }
        expanded.value = !expanded.value;
    };
</script>