Active Navigation with Treeview Doesnt Work! - InertiaJS Laravel Vue

Question

It has been a few days since I experienced this anomaly but it is quite incomprehensible ... so I tried to push this problem to stackoverflow, so when I clicked the sidebar with treeview it didn't change even though I did the same thing as was done on jetstream and pingcrm, here are the anomalies that occur

anomalous form

code in layout

<sub-nav :active="route().current('admin.a') || route().current('admin.b') || route().current('admin.c')">
    <template #main>
                        <span class="flex items-center">
                            <!-- svg -->
                            <span class="mx-2 font-medium">Api Manager</span>
                        </span>
                    </template>

    <template #content>
                        <sub-nav-link :href="route('admin.a')"
                                      :active="route().current('admin.a') || route().current('admin.api.maps.b')"
                        >
                            Mapper
                        </sub-nav-link>
    
                        <sub-nav-link :href="route('admin.c')"
                                      :active="route().current('admin.c')"
                        >
                            Get Services
                        </sub-nav-link>
                    </template>

</sub-nav>

code sub nav

<template>
    <div class="relative">
        <button @click="openSubNav = !openSubNav" :class="dropdown_classes">
            <slot name="main"></slot>
            <span>
                <svg :class="{'rotate-90': openSubNav, 'rotate-0': !openSubNav}"
                     class="inline-flex w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
                     viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 5L16 12L9 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                          stroke-linejoin="round"></path>
                </svg>
            </span>
        </button>

        <div v-show="openSubNav" class="bg-gray-200">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script>
import SubNavLink from "@/Layouts/Admin/Components/SubNavLink"

export default {
    name: "SubNav",
    components: {SubNavLink},
    props: {
        active: {
            type: Boolean,
            default() {
                return false
            }
        },
    },

    data() {
        return {
            openSubNav: this.active ? true : false,
        }
    },

    computed: {
        dropdown_classes() {
            return this.active
                ? 'flex justify-between items-center w-full cursor-pointer py-3 px-6 hover:bg-main-500 hover:text-white border-r-4 border-main-300 focus:outline-none'
                : 'flex justify-between items-center w-full cursor-pointer py-3 px-6 hover:bg-main-500 hover:text-white focus:outline-none border-l-4 border-gray-100'
        }
    }
}
</script>

code sub nav link

<template>
    <inertia-link :href="href" 
                  :class="classes"
                  class="py-2 px-16 block text-sm"
    >
        <slot></slot>
    </inertia-link>
</template>

<script>
export default {
    name: "SubNavLink",
    props: {
        href: String,
        
        active: {
            type: Boolean,
            default() {
                return false
            }
        },
    },
    
    data() {
        return {
            hasActive: false,
        }
    },
    
    computed: {
        classes() {
            return this.active
                ? 'text-gray-100 bg-main-500 ytext-white'
                : 'hover:bg-main-500 hover:text-white'
        }
    },
    
    
}
</script>

thanks

Answer 1

Great, i have found a solution for this problem you can find there