F
Filament•4w ago
Mehmet K.

Is it possible to drag and drop in Navigation Menus?

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.
No description
4 Replies
Abmael Souza
Abmael Souza•4w ago
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,
        ];
    });
});
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 
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);
        });
    }
});
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
Mehmet K.
Mehmet K.OP•4w ago
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.

message.txt

Abmael Souza
Abmael Souza•4w ago
i believe, that you might need a one to many relation based on the user to make those.
Mehmet K.
Mehmet K.OP•4w ago
If I can manage to pull the menus from the db, I actually feel like the rest will come.

Did you find this page helpful?