Menu stopped working after recent update

[eXCom]

My menu was working and after certain update(from 5.0.1 to 5.1.1) not long ago now when im clicking on a menu option to display sub options its opening and immediately closing. Any ideas why is this happening ?

[yaminncco]

can you provide more details?

[eXCom]

There's no warnings or errors in console. I dont know, should i record a video to show how its "opening and closing" ?

[yaminncco]

More details on how you're using the sidebar so that I'll be able to reproduce the issue

[eXCom]

Finally i found the problem, by clicking on the menu option there was a page reload, was typically working as a link

<sidebar-menu :menu="menuFormed" :collapsed="collapsed" :link-component-name="'custom-link'"/>

because of this :link-component-name="'custom-link'" it was reloading the page
so i removed it and now its working properly again, tho i dont remember when and why it was added there, is it something custom or its part of the component ? i checked props in the sidebar-menu component, theres no such prop found

[eXCom]

but now im back to the old problem #199

[eXCom]

this is my menu declaration in layout template

<sidebar-menu :menu="menuFormed" :collapsed="collapsed" :link-component-name="'custom-link'"/>

the script

<script>
    import BreezeApplicationLogo from '@/Components/ApplicationLogo'
    import BreezeDropdown from '@/Components/Dropdown'
    import BreezeDropdownLink from '@/Components/DropdownLink'
    import BreezeNavLink from '@/Components/NavLink'
    import BreezeResponsiveNavLink from '@/Components/ResponsiveNavLink'
    import Dropdown from '@/Components/Dropdown'

    export default {
        components: {
            BreezeApplicationLogo,
            BreezeDropdown,
            BreezeDropdownLink,
            BreezeNavLink,
            BreezeResponsiveNavLink,
            Dropdown,
        },

        props: {
            tree: Object,
            team: Object,
            treeForMenu: Object,
        },

        data() {
            return {
                showingNavigationDropdown: false,
                menu: [
                    {
                        header: 'Main Navigation',
                        hiddenOnCollapse: true
                    },
                    {
                        href: '/dashboard',
                        title: 'Dashboard',
                        icon: 'fa fa-user'
                    },
                    {
                        href: '/dashboard/team/select',
                        title: 'Select Team',
                        icon: 'fa fa-user-friends'
                    },
                ],
                collapsed: false,
            }
        },
        methods: {

        },
        computed: {
            menuFormed() {
                let result = this.menu;

                if(this.$page.props.treeForMenu !== undefined){
                    result = this.menu.concat({header: this.$page.props.team.name, hiddenOnCollapse: true}, this.$page.props.treeForMenu); // adding team folders menu
                }

                return result;
            }
        },
        mounted(){

        },
    }
</script>

some menu options are static, but some depend on the user data, they are coming from the backend, thats why im using concat in a computed property, menu options also depends on which page user is located

[yaminncco]

Code seems fine to me, I'm not sure what you did fix or what the issue right now but with inertia you need to use link-component-name prop.
and are you using persistent layouts in inertia? so the sidebar maintain its state when navigating between pages

[eXCom]

So im choosing between

1. menu not working properly when im adding link-component-name prop
2. menu working when im removing link-component-name prop but im having tons of warnings in console

-yes, im using persistent layouts

[Sandeep Ganesana]

Vue3SideBarMenu.zip

I am facing the same issue in my Vue3 project. I am doing anything wrong here?

[yaminncco]

Closing outdated issue