Laravel-adminlte: [QUESTION] Review "partials/menuitems" blade layouts.

Created on 28 Apr 2020  路  4Comments  路  Source: jeroennoten/Laravel-AdminLTE

Hi, while I was reviewing the blade layouts of the folder resources/views/partials/menuitems, on some of them we found they are wrapped by if conditions. Those conditions are mainly used to filter the menu items related to a given section. As an example, this is how resources/views/partials/menuitems/menu-item-top-nav-right.blade.php looks right now:

@if((isset($item['topnav_right']) && $item['topnav_right']))
  @include('adminlte::partials.menuitems.menu-item-top-nav', $item)
@endif

This blade is used, for example, on resources/views/partials/navbar/navbar.blade.php:

<nav class="main-header navbar
    {{ config('adminlte.classes_topnav_nav', 'navbar-expand-md') }}
    {{ config('adminlte.classes_topnav', 'navbar-white navbar-light') }}">

    {{-- Navbar left links --}}
    <ul class="navbar-nav">
        {{-- Left links... --}}
    </ul>

    {{-- Navbar right links --}}
    <ul class="navbar-nav ml-auto">
        {{-- ... --}}

        {{-- Configured right links --}}
        @each('adminlte::partials.menuitems.menu-item-top-nav-right', $adminlte->menu(), 'item')

        {{-- ... --}}
    </ul>

</nav>

Now, and in order to remove the blade layouts that looks like resources/views/partials/menuitems/menu-item-top-nav-right.blade.php, I'm planing to add a filter option argument to the $adminlte->menu() method, something like this:

public function menu($filterOpt = null)
{
    if (! $this->menu) {
        $this->menu = $this->buildMenu();
    }

    if ($filterOpt == "topnav_right") {
        return array_filter($this->menu, [$this, 'topnavRightFilter']);
    }

    /* Other checks for filter conditions... */

    return $this->menu;
}

private function topnavRightFilter($item)
{
    if (isset($item['topnav_right']) && $item['topnav_right']) {
        return true;
    }

    return false;
}

With this approach, for example, we can redefine the resources/views/partials/navbar/navbar.blade.php like shown next, and then discard the file resources/views/partials/menuitems/menu-item-top-nav-right.blade.php:

<nav class="main-header navbar
    {{ config('adminlte.classes_topnav_nav', 'navbar-expand-md') }}
    {{ config('adminlte.classes_topnav', 'navbar-white navbar-light') }}">

    {{-- Navbar left links --}}
    <ul class="navbar-nav">
        {{-- Left links... --}}
    </ul>

    {{-- Navbar right links --}}
    <ul class="navbar-nav ml-auto">
        {{-- ... --}}

        {{-- Configured right links --}}
        @each('adminlte::partials.menuitems.menu-item-top-nav', $adminlte->menu('topnav_right'), 'item')

        {{-- ... --}}
    </ul>

</nav>

Do you believe this is a good idea?
In case of yes, I will come with a PR to implement these changes on a few days (when fully implemented locally)

Most helpful comment

That's a nice idea to reduce some code lines or blade files. I would say create a PR 馃槃

All 4 comments

That's a nice idea to reduce some code lines or blade files. I would say create a PR 馃槃

Thanks for feedback, I will come with a PR once I have it fully implemented and tested locally. I'm also planing to remove the menuitems folder. For example, I have moved menu-item.blade.php (the one that renders the sidebar menu items) to the resources/views/partials/sidebar folder and now it looks like this:

@if (is_string($item))

    {{-- Single header --}}
    <li class="nav-header">{{ $item }}</li>

@elseif (isset($item['header']))

    {{-- Advanced header --}}
    <li @if (isset($item['id'])) id="{{ $item['id'] }}" @endif class="nav-header">
        {{ $item['header'] }}
    </li>

@elseif (isset($item['search']) && $item['search'])

    {{-- Search form --}}
    @include('adminlte::partials.sidebar.item-search-form')

@elseif (isset($item['submenu']))

    {{-- Treeview menu --}}
    @include('adminlte::partials.sidebar.item-treeview-menu')

@else

    {{-- Link --}}
    @include('adminlte::partials.sidebar.item-link')

@endif

And this is how, for example, adminlte::partials.sidebar.item-treeview-menu looks:

<li @if (isset($item['id'])) id="{{ $item['id'] }}" @endif class="nav-item {{ $item['submenu_class'] }}">

    {{-- Submenu toggler --}}
    <a class="nav-link {{ $item['class'] }} @if(isset($item['shift'])) {{ $item['shift'] }} @endif"
       href="" {!! $item['data-compiled'] ?? '' !!}>

        <i class="{{ $item['icon'] ?? 'far fa-fw fa-circle' }} {{
            isset($item['icon_color']) ? 'text-'.$item['icon_color'] : ''
        }}"></i>

        <p>
            {{ $item['text'] }}
            <i class="fas fa-angle-left right"></i>

            @if (isset($item['label']))
                <span class="badge badge-{{ $item['label_color'] ?? 'primary' }} right">
                    {{ $item['label'] }}
                </span>
            @endif
        </p>

    </a>

    {{-- Submenu items --}}
    <ul class="nav nav-treeview">
        @each('adminlte::partials.sidebar.menu-item', $item['submenu'], 'item')
    </ul>

</li>

One question, what is $item['shift'] used for? Can't find it on documentation or referenced inside the source code. It is a deprecated property? Should I delete the logic related to it?

The $item['shift'] is used for extra css classes they not get overridden by the class-attribute. I would not remove it, we need only to add a docs info for it.

Created a PR for this: #571

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Shidersz picture Shidersz  路  4Comments

eraporsmk picture eraporsmk  路  5Comments

Basili0 picture Basili0  路  5Comments

sebian29 picture sebian29  路  4Comments

dunfy picture dunfy  路  6Comments