Is it possible to drag and drop in Navigation Menus?

[tepid fern]

Is it possible to change the location of the menus on the left side and drag and drop them?

When I create a resource, menus appear, but I want the user to be able to customize the order of these menus.

[hexed lantern]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[river merlin]

you could order them out like this

Navigation::menu(function () {
    return MenuItem::orderBy('order')->get()->map(function ($menuItem) {
        return [
            'label' => $menuItem->name,
            'url' => $menuItem->route,
        ];
    });
});```
creating a separate model for the menus and order them based on a given preference(relations were not included)

the drag and drop logic could be made with dragula or Sortable

in the frontend you would get something like this ```js
let el = document.getElementById('menu-list');
let sortable = new Sortable(el, {
onEnd(evt) {
let orderList = [];
let items = el.querySelectorAll('li');
items.forEach(item => {
orderList.push(item.getAttribute('data-position'));
});

    // Send the ordered ids to your backend using fetch
    fetch('/api/save-menu-order', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // Include any authentication token if needed
            'Authorization': 'Bearer ' + yourAuthToken
        },
        body: JSON.stringify({ order: orderList })
    })
    .then(response => response.json())
    .then(data => {
        console.log('Menu order saved:', data);
    })
    .catch(error => {
        console.error('Error saving menu order:', error);
    });
}

});

which includes third-party scripts

[tepid fern]

Instead of pulling menus automatically from resourcelar. I thought I would save it to the db and synchronize it from here, but this way it didn't work for me.

[river merlin]

i believe, that you might need a one to many relation based on the user to make those.