M
M
Mike Evstropov2016-06-29 13:23:37
symfony
Mike Evstropov, 2016-06-29 13:23:37

How to make an active menu?

It is required to set the .selected class to the active menu item, as well as remove the link.
How to do it correctly and concisely (without JS)?

homepage:
    path: /
    defaults: { _controller: SiteAppBundle:Main:index }
download:
    path: /download
    defaults: { _controller: SiteAppBundle:Main:download }
entry:
    path: /entry/{name}
    defaults: { _controller: SiteAppBundle:Main:entry }

<li><a href="{{ path('homepage') }}">HOME</a></li>
<li><a href="{{ path('entry', {'name': 'info'}) }}">INFO</a></li>
<li><a href="{{ path('entry', {'name': 'settings'}) }}">SETTINGS</a></li>
<li><a href="{{ path('download') }}">DOWNLOAD</a></li>

UPD
Created variables in main template:
{% set route = app.request.get('_route') %}
{% set entry = app.request.get('_route') == 'entry' ? app.request.get('_route_params').name : '' %}

Moved the menu to menu.html.twig and included it in the main template.
Then the usual check through {% if %}
<li>{% if route == 'homepage' %}HOME{% else %}<a href="{{ path('homepage') }}">HOME</a>{% endif %}</li>
<li>{% if entry == 'info' %}INFO{% else %}<a href="{{ path('entry', {'name': 'info'}) }}">INFO</a>{% endif %}</li>
<li>{% if entry == 'settings' %}SETTINGS{% else %}<a href="{{ path('entry', {'name': 'settings'}) }}">SETTINGS</a>{% endif %}</li>
<li>{% if route == 'download' %}DOWNLOAD{% else %}<a href="{{ path('download') }}">DOWNLOAD</a>{% endif %}</li>

p.s. Unfortunately, through the Twig extension, use the test like this:
{% if 'homepage' is is_page %}текущая страница "homepage"{% endif %}

failed How to get route name in Twig extension (test)?
There will be an option even shorter, offer =D
Thank you all!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
BoShurik, 2016-06-29
@Aroused

1. symfony.com/doc/current/bundles/KnpMenuBundle/inde...
2. If you don’t want to connect third-party bundles, then you can do something like this (but it doesn’t smell brevity here):

{% if app.request.attributes.get('_route') == 'homepage' %}
    <li class="selected"><span>HOME</span></li>
{% else %}
    <li><a href="{{ path('homepage') }}">HOME</a></li>
{% endif %}

{% if app.request.attributes.get('_route') == 'entry' and
    app.request.attributes.get('_route_params').name is defined and
    app.request.attributes.get('_route_params').name == 'info' %}
    <li class="selected"><span>INFO</span></li>
{% else %}
    <li><a href="{{ path('entry', { 'name': 'info' }) }}">INFO</a></li>
{% endif %}

{% if app.request.attributes.get('_route') == 'entry' and
    app.request.attributes.get('_route_params').name is defined and
    app.request.attributes.get('_route_params').name == 'settings' %}
    <li class="selected"><span>SETTINGS</span></li>
{% else %}
    <li><a href="{{ path('entry', { 'name': 'settings' }) }}">SETTINGS</a></li>
{% endif %}

{% if app.request.attributes.get('_route') == 'download' %}
    <li class="selected"><span>DOWNLOAD</span></li>
{% else %}
    <li><a href="{{ path('download') }}">DOWNLOAD</a></li>
{% endif %}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question