AdminLTE v3 with Bootstrap 4

[kevinpapst]

Work started in #107 done by @yudhir

Fixes #96 Fixes #51

Try it with composer require kevinpapst/adminlte-bundle dev-adminlte-v3

TODO

• [ ] validate if config options still work
  • [ ] theme support
  • [ ] setting to toggle between legacy user menu and navbar link
• [ ] KNP menu testing and adjustments
• [ ] social login styles
• [ ] header navbar links (left from search)
• [ ] add new Flex recipe for changed config
• [ ] complete UPGRADING docs (check TODO)
• [ ] update flex recipe after release

[Gonzalo1987]

the admin_lte.yaml should have:

        fixed_header: false
        form_theme: 'default'
        # fixes the position of the left sidebar
        fixed_menu: false
        # fixes the position of the footer
        fixed_footer: false

and not:

        fixed_layout: false

thanks!

[kevinpapst]

@Gonzalo1987 What do you want to say? The config has exactly these keys...

[Gonzalo1987]

You're right @kevinpapst , I'm sorry, the problem is here: https://github.com/symfony/recipes-contrib/blob/master/kevinpapst/adminlte-bundle/0.9/config/packages/admin_lte.yaml

Is not updated for the v3 yet.

Greetings and tyvm!

[kevinpapst]

True, good reminder for the time when this will be released! Added it to the TODO list

[curtchan]

So any ETA? i used v3 branch on my new project, had to do few fixes to views though - knp menu needs look into, and its also impossible to change logo text atm.

[kevinpapst]

What about sharing your fixes and findings @curtchan ?

[curtchan]

@kevinpapst might do, but still struggling with making knpmenu look nice like on demo :)

[curtchan]

Theoretically i think i have it all working as intended - need to test it further though.

knp-menu.html.twig

{{
knp_menu_render(admin_lte_context.knp_menu.main_menu, {
    "template"      : "@AdminLTE/Partials/_menu.html.twig",
    "currentClass"  : "active",
    "ancestorClass" : "active menu-open",
    "branch_class"  : "nav-item has-treeview",
    'firstClass'    : '',
    'lastClass'     : '',
    'leaf_class'    : 'nav-item',
})
}}

_menu.html.twig

{% extends 'knp_menu.html.twig' %}

{% block label %}
    {% if item.labelAttribute('icon') is empty %} {# default icon, might put it elsewhere / configurable  #}
        {% do item.setLabelAttribute('icon', 'far fa-circle') %}
    {% endif %}

    {% if item.labelAttribute('icon') %}<i class="nav-icon {{ item.labelAttribute('icon') }}"></i>{% endif %}
    <p>
        {% if not item.labelAttribute('iconOnly') %}
            {% if options.allow_safe_labels and item.getExtra('safe_label', false) %}{{ item.label|trans|raw }}{% else %}{{ item.label|trans }}{% endif %}
        {% endif %}
        {% if item.labelAttribute('data-image') %}<img src="{{ item.labelAttribute('data-image') }}" alt="{{ item.name }}" class="menu-thumbnail"/>{% endif %}

        {% import _self as selfMacros %}
        {% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}
            <i class="fas fa-angle-left right"></i>
        {% endif %}
        {{ selfMacros.badges(item) }}
    </p>
{% endblock %}

{% macro badges(item) %}
    {% import _self as selfMacros %}
    {% if item.getExtra('badge') is not null %}
        {{ selfMacros.badge(item.getExtra('badge')) }}
    {% elseif item.getExtra('badges') is not null %}
        {% for badge in item.getExtra('badges') %}
            {{ selfMacros.badge(badge) }}
        {% endfor %}
    {% endif %}
{% endmacro %}

{% macro badge(badge) %}
    <span class="right badge badge-{{ badge.color|default('success') }}">{{ badge.value }}</span>
{% endmacro %}

{% block root %}
    {% set listAttributes = item.childrenAttributes %}
    <nav class="mt-2">
        {{ block('list') -}}
    </nav>
{% endblock %}

{% block list %}
    {% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}
        {% import "knp_menu.html.twig" as macros %}

        {% if matcher.isAncestor(item) %}
            {%- set listAttributes = listAttributes|merge({class: (listAttributes.class|default(''))|trim}) -%}
        {% endif %}
        {% if not item.isRoot %}
            {%- set listAttributes = listAttributes|merge({class: (listAttributes.class|default('') ~ ' nav-treeview')|trim}) -%}
        {% endif %}
        <ul{{ macros.attributes(listAttributes) }}>
            {{ block('children') }}
        </ul>
    {% endif %}
{% endblock %}

{% macro attributes(attributes) %}
    {% for name, value in attributes %}
        {%- if value is not none and value is not same as(false) -%}
            {{- ' %s="%s"'|format(name, value is same as(true) ? name|e : value|e)|raw -}}
        {%- endif -%}
    {%- endfor -%}
{% endmacro %}
{% block item %}
{% if item.displayed %}
    {# building the class of the item #}
    {%- set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %}
    {%- if matcher.isCurrent(item) %}
        {%- set classes = classes|merge([options.currentClass]) %}
    {%- elseif matcher.isAncestor(item, options.matchingDepth) %}
        {%- set classes = classes|merge([options.ancestorClass]) %}
    {%- endif %}
    {%- if item.actsLikeFirst %}
        {%- set classes = classes|merge([options.firstClass]) %}
    {%- endif %}
    {%- if item.actsLikeLast %}
        {%- set classes = classes|merge([options.lastClass]) %}
    {%- endif %}

    {# Mark item as "leaf" (no children) or as "branch" (has children that are displayed) #}
    {% if item.hasChildren and options.depth is not same as(0) %}
        {% if options.branch_class is not empty and item.displayChildren %}
            {%- set classes = classes|merge([options.branch_class]) %}
        {% endif %}
    {% elseif options.leaf_class is not empty %}
        {%- set classes = classes|merge([options.leaf_class]) %}
    {%- endif %}

    {%- set attributes = item.attributes %}
    {%- if classes is not empty %}
        {%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
    {%- endif %}

    {% if item.children|length and item.uri is empty %}
        {% do item.setUri('#') %}
    {% endif %}

    {# displaying the item #}
    {% import _self as knp_menu %}
    <li{{ knp_menu.attributes(attributes) }}>
        {%- if item.uri is not empty and (not matcher.isCurrent(item) or options.currentAsLink) %}
            {{ block('linkElement') }}
        {%- else %}
            {{ block('spanElement') }}
        {%- endif %}
        {# render the list of children#}
        {%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
        {%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level]) %}
        {%- set listAttributes = item.childrenAttributes|merge({'class': childrenClasses|join(' ') }) %}
        {{ block('list') }}
    </li>
{% endif %}
{% endblock %}

{% block linkElement %}
    {% import _self as knp_menu %}
    <a class="nav-link{% if matcher.isCurrent(item) or matcher.isAncestor(item) %} {{ options.currentClass }}{% endif %}" href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
        {{- block('label') -}}
    </a>
{% endblock %}

{% block spanElement %}
    {% import _self as selfMacros %}
    {% import "knp_menu.html.twig" as macros %}
    {% if item.attribute('class') matches '/(^|\s+)header(\s+|$)/' %}
        {{ selfMacros.badges(item) }}
        {{ item.label }}
    {% else %}
        {{- block('label') -}}
        {#<a{{ macros.attributes(item.labelAttributes) }}>#}
        {#{{ selfMacros.badges(item) }}#}
        {#</a>#}
    {% endif %}
{% endblock %}

[kevinpapst]

Closing: I will archive this repo now