encapsulation of left menu items and dynamic inclusion of classes in left menu <li> items

[L4ZARIN3]

When trying to use sortable.js I realized that there is no dynamic way to encapsulate the <li> tags inside a <ul> to be able to apply the sortable classes, and there is also no way to set the <li> class in the left menu , is there any alternative?

[dfsmania]

Please, I suggest to share more details with screenshots of your goals. You can add extra classes to the menu items and even and id:

• The classes attribute
• The id attribute

Items can also be grouped with a submenu.

All the allowed properties for a menu items are listed here.

However if you are planning to implement a drag & drop feature over the menu items, I doubt it can be done since the underlying AdminLTE package already comes with Javascript to handle events over those menu items and may conflict with the listeners added by the sortable.js plugin.

[L4ZARIN3]

The objective would be to achieve this so that sortable.js can identify the <li> tags and make them organizeable, but in the documentation I didn't find anything about how I could do this, I think it would only be by editing the vendor code and even then it would be a tedious task

[dfsmania]

I just tried this plugin using a CDN with a submenu item and I could arrange the menu items of that submenu. Here are the steps:

1. Include plugin using config file

Here I use a CDN link to include the plugin...

/*
|--------------------------------------------------------------------------
| Plugins Initialization
|--------------------------------------------------------------------------
|
| Here we can modify the plugins used inside the admin panel.
|
| For detailed instructions you can look the plugins section here:
| https://github.com/jeroennoten/Laravel-AdminLTE/wiki/Plugins-Configuration
|
*/

'plugins' => [
    'SortableJs' => [
        'active' => true,
        'files' => [
            [
                'type' => 'js',
                'asset' => false,
                'location' => 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js',
            ],
        ],
    ],
    ...
],

2. Add a submenu item with items that will be sortable

I just added some menu items to test the plugin, use it as reference...

[
    'id' => 'sortable_items',
    'text' => 'Sortable Items',
    'icon' => 'fas fa-fw fa-sort',
    'submenu' => [
        [
            'text' => 'Item 1',
            'url' => 'home',
            'icon' => 'fas fa-fw fa-circle',
        ],
        [
            'text' => 'Item 2',
            'url' => 'home',
            'icon' => 'fas fa-fw fa-circle',
        ],
        [
            'text' => 'Item 3',
            'url' => 'home',
            'icon' => 'fas fa-fw fa-circle',
        ],
    ],
],

3. Initialize the plugin over that submenu

On your blade view (or views) extending the layout with @extends('adminlte::page'), add next extra Javascript section at the end:

{{-- Extra JS --}}

@push('js')
<script>

    $(document).ready(function() {
        // Test Sortable.js plugin.

        var el = document.querySelector('#sortable_items > ul');
        var sortable = Sortable.create(el);
    });

</script>
@endpush

4. Some screenshots

Submenu item with the original sort...

Submenu after arranging some items...

If you need a more sophisticated implementation, you can always publish the package views and customize the sidebar menu as you like by adding a custom dom section on resources/views/vendor/adminlte/partials/sidebar/left-sidebar.blade.php. Use next example as reference:

Custom version of resources/views/vendor/adminlte/partials/sidebar/left-sidebar.blade.php

<aside class="main-sidebar {{ config('adminlte.classes_sidebar', 'sidebar-dark-primary elevation-4') }}">

    {{-- Sidebar brand logo --}}
    @if(config('adminlte.logo_img_xl'))
        @include('adminlte::partials.common.brand-logo-xl')
    @else
        @include('adminlte::partials.common.brand-logo-xs')
    @endif

    {{-- Sidebar menu --}}
    <div class="sidebar">
        <nav class="pt-2">
            <ul class="nav nav-pills nav-sidebar flex-column {{ config('adminlte.classes_sidebar_nav', '') }}"
                data-widget="treeview" role="menu"
                @if(config('adminlte.sidebar_nav_animation_speed') != 300)
                    data-animation-speed="{{ config('adminlte.sidebar_nav_animation_speed') }}"
                @endif
                @if(!config('adminlte.sidebar_nav_accordion'))
                    data-accordion="false"
                @endif>
                {{-- Configured sidebar links --}}
                @each('adminlte::partials.sidebar.menu-item', $adminlte->menu('sidebar'), 'item')

                {{-- MY CUSTOM SIDEBAR SECTION --}}
                <div id="sortable">
                    <div class="border text-light">ITEM 1</div>
                    <div class="border text-light">ITEM 2</div>
                    <div class="border text-light">ITEM 3</div>
                    <div class="border text-light">ITEM 4</div>
                    <div class="border text-light">ITEM 5</div>
                </div>
            </ul>
        </nav>
    </div>

</aside>

Then again, in your blade view (or views) extending the layout with @extends('adminlte::page'), add next extra Javascript section at the end:

{{-- Extra JS --}}

@push('js')
<script>

    $(document).ready(function() {
        // Test Sortable.js plugin.

        var el = document.querySelector('#sortable');
        var sortable = Sortable.create(el);
    });

</script>
@endpush