How to follow the parent element's link in Menu Dropdown?

[SequelONE]

Tell me how, when clicking on the link of the parent item of the drop-down menu, go to a given page and at the same time, when clicking on the icon on the right, expand nested menu items? I'm using a tabler theme.

<x-backpack::menu-dropdown title="Clients" icon="la la-user-circle" :link="backpack_url('user')">
    <x-backpack::menu-dropdown-header title="Tools" />
    <x-backpack::menu-dropdown-item title="Projekt" icon="la la-tasks" :link="backpack_url('user')" />
    <x-backpack::menu-dropdown-item title="Filter" icon="la la-filter" :link="backpack_url('permission')" />
</x-backpack::menu-dropdown>

[pxpm]

Hey @SequelONE I don't think that's possible at the moment.

If you see tabler demo, that's how it works: https://tabler.io/preview .

That's how it behaved in CoreUIv4, Tabler, and we made a change to make it work the same in CoreUIv2 here: Laravel-Backpack/theme-coreuiv2#27

Let me know if I can help you with something else.

Cheers

[SequelONE]

@pxpm hey. Thank you for answer, but that's not exactly what I meant. Below is the JavaScript code, which partially solves the problem, but navigating to parent menu items does not work on mobile devices.

<script>
    document.addEventListener("DOMContentLoaded", function(){
        if (window.innerWidth > 992) {
            document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
                everyitem.addEventListener('mouseover', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        let nextEl = el_link.nextElementSibling;
                        el_link.classList.add('show');
                        nextEl.classList.add('show');
                    }
                });
                everyitem.addEventListener('mouseleave', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        let nextEl = el_link.nextElementSibling;
                        el_link.classList.remove('show');
                        nextEl.classList.remove('show');
                    }

                });
                everyitem.addEventListener('click', function(e){
                    let el_link = this.querySelector('a[data-bs-toggle]');
                    if(el_link != null){
                        location.href = el_link.href;
                    }

                });
            });
        }
    });
</script>

[jcastroa87]

In your code, you restricted the width so that it doesn't work with small devices, did you do this intentionally? If so, did you check that on small devices the classes do not change their name or do you get an error in the console?

Cheers

[SequelONE]

@jorgetwgroup even if you remove the condition if, a transition to the page of the parent menu item occurs.

I think that it is necessary to pick up this particular class .dropdown-toggle:after. It is not yet possible to find the right solution, although it exists. On my site SEQUEL.ONE I use a template in which parent menu items become clickable for navigation, and in the mobile version, both the transition to the page and the expansion of child items work. All you need to do is add a class .parent-link to the parent menu item link.

[promatik]

@SequelONE, no one's referring that, but make sure that feature you want to do is usable, in terms of UX.

Me, as a user, I would probably find it hard to understand that clicking on text or in the arrow would trigger different actions.
As a dev, I would do a Menu where the first item would be the link, it could have the same text 🤷‍♂️

[jcastroa87]

Hello,

We haven’t heard back from you in a while, so we’re closing this issue for now. If you still need assistance, please don’t hesitate to reopen the issue or create a new one.

Thank you, and take care!

Cheers.