w00t a complex menu :O!

menu.html.twig

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

{% set scopesTree = constant('Pixelart\\Extensions\\Baselayout\\Menu\\MainMenuBuilder::SCOPES_TREE') %}
{% set pagesTree = constant('Pixelart\\Extensions\\Baselayout\\Menu\\MainMenuBuilder::PAGES_TREE') %}

{% macro attributes(attributes) %}
    {% for name, value in attributes %}
        {%- if value is not none and value is not sameas(false) -%}
            {{- ' %s="%s"'|format(name, value is sameas(true) ? name|e : value|e)|raw -}}
        {%- endif -%}
    {%- endfor -%}
{% endmacro %}

{% block compressed_root %}
    {% spaceless %}
        {{ block('root') }}
    {% endspaceless %}
{% endblock %}

{% block root %}
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="{{ options.home_link }}">
                <img src="{{ options.logo }}" class="img-responsive">
            </a>
        </div>
        <div class="navbar-body">
            {{ block('firstList') }}
        </div>
    </nav>
    {{ block('secondList') }}
{% endblock %}

{% block firstList %}
    {# save current variables #}
    {% set mainOptions = options %}
    {% set mainItem = item %}

    {% for item in mainItem %}
        {% set options = options|merge({'depth': -1}) %}
        <ul class="nav navbar-nav {{ item.attribute('class') }}">
            {{ block('children') }}
        </ul>
    {% endfor %}

    {# restore current variables #}
    {% set item = mainItem %}
    {% set options = mainOptions %}
{% endblock %}

{% block secondList %}
    {%- import _self as knp_menu %}

    {# save current variables #}
    {%- set mainOptions = options %}
    {%- set mainItem = item %}

    {%- set anyScopeActive = false %}
    {%- for item in mainItem.getChild('sites').children if item.getExtra('type') == scopesTree %}
        {%- if matcher.isCurrent(item) %}
            {%- set anyScopeActive = true %}
        {%- endif %}
    {%- endfor %}

    <div class="menu-container-type-{{ scopesTree }}">
        <div class="green-line"></div>
        <div class="nav-left">
            <ul>
                {%- for item in mainItem.getChild('sites') if item.getExtra('type') == scopesTree %}
                    {%- set options = options|merge({'depth': -1}) %}
                    {{ block('children') }}
                {%- endfor %}
            </ul>
        </div>
        {%- for item in mainItem.getChild('sites') if item.getExtra('type') == scopesTree %}
            {%- set options = options|merge({'depth': 0}) %}
            {{ block('children') }}
        {%- endfor %}
    </div>

    <div class="menu-container-type-{{ pagesTree }}">
        <div class="green-line"></div>
        {%- for item in mainItem.getChild('sites') if item.getExtra('type') == pagesTree %}
            {%- set listAttributes = item.childrenAttributes %}
            {%- set listAttributes = listAttributes|merge({
            'class': (listAttributes.class|default('') ~ ' content')|trim
            }) %}

            <div{{ knp_menu.attributes(listAttributes) }}>
                <a href="#" class="close"></a>

                <div class="row content">
                    {%- set options = options|merge({'depth': 0}) %}
                    {{ block('children') }}
                </div>
                <div class="row bottom">
                    <div class="col-md-12">
                        {%- set linkAttributes = item.linkAttributes %}
                        {%- set linkAttributes = linkAttributes|merge({
                        'class': (linkAttributes.class|default('') ~ ' btn')|trim
                        }) %}

                        <a href="{{ item.uri }}"{{ knp_menu.attributes(linkAttributes) }}>
                            <span class="arrow-left"></span>
                            {{- block('nav_label') -}}
                        </a>
                    </div>
                </div>
            </div>
        {%- endfor %}
    </div>

    {# restore current variables #}
    {%- set item = mainItem %}
    {%- set options = mainOptions %}
{% endblock %}

{% block children %}
    {# save current variables #}
    {%- set currentOptions = options %}
    {%- set currentItem = item %}

    {# update the depth for children #}
    {%- if options.depth is not none %}
        {% set options = options|merge({'depth': currentOptions.depth + 1}) %}
    {%- endif %}

    {%- for item in currentItem.children %}
        {%- if options.depth == 2 %}
            {{ block('applicationItem') }}
        {%- elseif options.depth == 1 and currentItem.getExtra('type') == pagesTree %}
            {{ block('pageItem') }}
        {%- elseif options.depth == 1 and currentItem.getExtra('type') == scopesTree %}
            {{ block('scopeItem') }}
        {%- elseif options.depth == 0 and currentItem.getExtra('type') == scopesTree %}
            {{ block('scopeListItem') }}
        {% elseif options.depth == 0 %}
            {{ block('firstItem') }}
        {%- endif %}
    {%- endfor %}

    {# restore current variables #}
    {%- set item = currentItem %}
    {%- set options = currentOptions %}
{% endblock %}

{% block firstItem -%}
    {%- set labelAttributes = item.labelAttributes %}
    {%- if matcher.isCurrent(item) %}
        {%- set labelAttributes = labelAttributes|merge({
        'class': (labelAttributes.class|default('') ~ ' current-page')|trim
        }) %}
    {%- endif %}

    {%- import _self as knp_menu %}
    <li{{ knp_menu.attributes(item.attributes) }}>
        <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
            <span{{ knp_menu.attributes(labelAttributes) }}>{{ block('label') }}</span>
        </a>
    </li>
{%- endblock %}

{% block scopeListItem -%}
    {%- set attributes = item.attributes %}
    {%- if matcher.isCurrent(item) or (not anyScopeActive and loop.first) %}
        {%- set attributes = attributes|merge({
        'class': (labelAttributes.class|default('') ~ ' active')|trim
        }) %}
    {%- endif %}

    {%- import _self as knp_menu -%}
    <li{{ knp_menu.attributes(attributes) }}>
        <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
            {{- block('label') }} <span class="arrow-left"></span>
        </a>
    </li>
{%- endblock %}

{% block scopeItem %}
    {%- set listAttributes = item.childrenAttributes %}
    {%- set listAttributes = listAttributes|merge({
    'class': (listAttributes.class|default('') ~ ' info-right')|trim
    }) %}

    <div{{ knp_menu.attributes(listAttributes) }}>
        <div class="img-container">
            {% spaceless %}
                <img
                        {% if matcher.isCurrent(item) or (not anyScopeActive and loop.first) %}
                            src="{{ t3image_resource(item.getExtra('image'), 'menu_scope') }}"
                        {% else %}
                            class="lazy" width="1145" height="300"
                        {% endif %}
                        data-original="{{ t3image_resource(item.getExtra('image'), 'menu_scope') }}">
            {% endspaceless %}
            <a href="{{ item.uri }}" class="btn"><span class="arrow-left"></span>{{ block('nav_label') }}</a>
            <a href="#" class="close"></a>
        </div>
        <div class="icon-container">
            <div class="row">
                {{ block('children') }}
            </div>
        </div>
    </div>
{% endblock %}

{% block applicationItem -%}
    <div class="col-xs-4 col-lg-3">
        {%- set attributes = item.attributes %}
        {%- set attributes = attributes|merge({
        'class': (attributes.class|default('') ~ ' circle-link')|trim
        }) %}

        {%- import _self as knp_menu -%}
        <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
            <div{{ knp_menu.attributes(attributes) }}>
                <div>
                    {{ t3image(item.getExtra('image'), item.label, 'menu_application') }}
                </div>
            </div>
        </a>

        <div class="circle-link-caption">{{ block('label') }}</div>
    </div>
{%- endblock %}

{% block pageItem -%}
    <div class="col-md-3">
        {%- import _self as knp_menu -%}
        <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
            <div class="img-zoom-wrapper">
                <img class="lazy img-responsive"
                     data-original="{{ t3image_resource(item.getExtra('image'), 'menu_page_teaser') }}"
                     width="300" height="200">
            </div>
            <h3>{{ block('label') }}</h3>
        </a>
    </div>
{%- endblock %}

{%- block linkElement -%}
    {%- import _self as knp_menu -%}
    <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>{{ block('label') }}</a>
{%- endblock -%}

{%- block nav_label -%}
    {%- set oldLabel = item.label %}
    {%- set navLabel = item.getExtra('nav_label')|default(oldLabel) %}
    {{- item.setLabel(navLabel) ? '' : '' }}
    {{- block('label') -}}
    {{- item.setLabel(oldLabel) ? '' : '' }}
{%- endblock -%}

{%- block label -%}
    {%- if options.allow_safe_labels and item.getExtra('safe_label', false) -%}
        {{ item.label|raw }}
    {%- else -%}
        {{ item.label }}
    {%- endif -%}
{%- endblock -%}