Inertiajs workaround dropdown

Hello,

I use this sidebar with inertiajs in a laravel project, if you tried using this, you’ll notice the active state in sidebar no longer works, and the dropdowns no longer / childs do not show.

My workaround this is as follows: for siderbar-menu props: :showChild="true"

this will show all dropdowns opened. So from here, its all dom manipulation

    beforeUpdate() {
        const parent_vsm_item = document.getElementsByClassName('vsm--item vsm--item_open')
        for(var i=0; i<parent_vsm_item.length; i++){
            // remove the arrow open
            const parent_vsm_item_arrow = parent_vsm_item[i].querySelector('.vsm--arrow_open')
            parent_vsm_item_arrow.classList.remove(this.parents_div.parent_highlight_vsm_arrow)

            // hide dropdown with display none
            const child_dropdown = parent_vsm_item[i].querySelector('.vsm--dropdown');
            child_dropdown.style.display = "none"

            // remove parent background hightlight
            parent_vsm_item[i].classList.remove(this.parents_div.parent_hightlight_vsm_item)
        }

        let open_parent = false

        this.menu.forEach((parent) => {
            if(parent.child != undefined) {
                parent.child.forEach((child_item) => {
                    if (child_item.to == document.URL) {
                        let [parent_id, child_id] = child_item.cid.split('-')
                        if(open_parent == false) {
                            this.parents_div.list[parent_id].classList.add(this.parents_div.parent_hightlight_vsm_item)
                            this.parents_div.list[parent_id].querySelector('.vsm--arrow').classList.add(this.parents_div.parent_highlight_vsm_arrow)
                            this.parents_div.list[parent_id].querySelector('.vsm--dropdown').style.display = 'block'
                            open_parent = true
                        }
                        parent.class = "vsm--item_open"
                        child_item.class = "vsm--link_active"
                    } else {
                        child_item.class = ""
                    }
                })
            } else {
                if (parent.to == document.URL) {
                    parent.class = "vsm--link_active"
                } else {
                    parent.class = ""
                }
            }
        })
    },
    .....
       methods: {
        inertia_navigate(event, item, node) {
            if(item.child instanceof Array) {
                if(!this.parents_div.list[item.id].classList.contains(this.parents_div.parent_hightlight_vsm_item)) {
                    this.parents_div.list[item.id].classList.add(this.parents_div.parent_hightlight_vsm_item)
                    this.parents_div.list[item.id].querySelector('.vsm--arrow').classList.add(this.parents_div.parent_highlight_vsm_arrow)
                    this.parents_div.list[item.id].querySelector('.vsm--dropdown').style.display = 'block'
                } else {
                    this.parents_div.list[item.id].classList.remove(this.parents_div.parent_hightlight_vsm_item)
                    this.parents_div.list[item.id].querySelector('.vsm--arrow').classList.remove(this.parents_div.parent_highlight_vsm_arrow)
                    this.parents_div.list[item.id].querySelector('.vsm--dropdown').style.display = 'none'
                }
            }
            // do not set `to` prop on dropdown parent, only set it on childs. Only childs should navigate
            if(item.to != undefined) {
                this.$inertia.visit(item.to)
            }
        },
    },
    computed: {
            parents_div: function () {
            return {
                list: document.querySelectorAll('.vsm--list > .vsm--item'),
                parent_hightlight_vsm_item: "vsm--item_open",
                parent_highlight_vsm_arrow: "vsm--arrow_open"
            }
        }
    }

I also use a menu.js which contains the menu items, where the childs also requires the parent id and child id. The child id is not used, but perhaps it will be useful later… The child id will contain the parent id so that you can easily get to the parent example:

        {
            id: 7,
            icon: 'icon-settings',
            title: 'Settings',
            class: "",
            child: [
                {
                    cid: "7-8",
                    to: route('admin.settings'),
                    title: 'General Settings',
                    class: "",
                    icon: 'icon-child',
                },
             ]
         },

I know this is just an ugly workaround hack, but I have no idea if its possible to control the dropdown in any other way, if its possible, please do share.

[yaminncco]

i released a new patch that should fix the active state on init, the only thing left is when the url change you need to manually call onRouteChange, with inertia something like this can work:

const customLink = (props, { slots }) => {
  const { item, ...attrs } = props
  const onRouteChange = inject('onRouteChange')
  return h(link, {
    ...attrs,
    onFinish: () => {
      onRouteChange()
    },
  }, slots.default)
}

and make sure to use persistent layouts to prevent the sidebar from re-rendring whenever a link is clicked

[yaminncco]

what problem did you face did you use the prop above? you need to make a custom link component and register it globaly

import { createApp, h } from 'vue'

const customLink = (props, { slots }) => {
  const { item, ...attrs } = props
  return h('inertia-link', { ...attrs }, slots.default())
}

const app = createApp(App)
app.component('custom-link', customLink)

then config the sidebar with the prop <sidebar-menu :link-component-name="'custom-link'"/>