Discussion :

[Mister Nono]

Bonjour,

J'ai un template avec la commande suivante pour insérer un menu horizontal (le menu de l'application) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
{{ render(controller("SdzReportBundle:Report:menuHorizontal")) }}

L'action appelée est la suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
public function menuHorizontalAction() {    
        return $this->render ( 'SdzReportBundle::menuHorizontal.html.twig' );
    }

Et le fichier twig qui crée ce menu est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="navbar">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="#">ALSA</a>
                  <div class="nav-collapse collapse navbar-responsive-collapse">
                    <ul class="nav">
                      <li ><a href="#">SOCIETE</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">CLIENT<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Fiche Clients</a></li>
                          <li><a href="#">Liste Clients</a></li>
                        </ul>
                      </li>
                      <li class="active"><a href="#">RAPPORT</a></li>
                      <li><a href="#">HISTORIQUE</a></li>
                    </ul>
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div><!-- /navbar -->
          </div>

Dans ce menu exemple c'est le lien RAPPORT qui est l'item actif du menu.

Mon soucis est de placer la class="active" en fonction de la page affichée et donc de l'item correspond du menu. Par exemple, quand la page SOCIETE est affichée, le lien <a href="#">SOCIETE</a> doit devenir <a href="#" class="active">SOCIETE</a> et non le lien <a href="#" class="active">RAPPORT</a> qui doit être dans ce cas <a href="#">RAPPORT</a>.

Je suppose qu'avec une boucle de type twig cela doit être assez facile à faire mais il faut savoir où et quand passer le paramètre de la page appelée pour pour mettre à active le lien correspond du menu.

Avez-vous une idée pour faire cela ? Si une autre idée est plus facile, n'hésitez pas à me l'indiquer.

Par avance, merci.

A+

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{ render(controller("SdzReportBundle:Report:menuHorizontal", { 'current' : 2}))

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 <li class="{% if current==2 %}active{% endif %}"><a ...

[Mister Nono]

Bonsoir,

Dans ton exemple, la variable current vaudra toujours 2.

J'ai trouvé la solution de renvoyer le nom de la route sélectionnée pour connaitre la page appelée mais cela fait du code à rallonge :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{ render(controller("SdzReportBundle:Report:menuHorizontal", {'route' : app.request.attributes.get("_route") })) }}

... avec dans le twig des tests de ce type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if route == "sdz_report_fiche_client" %}
     <li class="dropdown active">
{% elseif route == "sdz_report_liste_clients" %}
     <li class="dropdown active">
{% else %}
     <li class="dropdown">
 {% endif %}
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">CLIENT<b class="caret"></b></a>
                        <ul class="dropdown-menu"> 
                          <li><a href="{{ path('sdz_report_fiche_client') }}">Fiche Client</a></li>
                          <li><a href="{{ path('sdz_report_liste_clients') }}">Liste Clients</a></li>
                        </ul>
                      </li>

Cela fonctionne mais si quelqu'un à mieux, ou plus court, ou plus lisible... je suis preneur.

A+

[miltone]

tu peux essayer cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<li><a href="{{ path('page1') }}" {% if app.request.attributes.get('_route') == "page1" %}class="active"{% endif %}>Page1</a></li>
<li><a href="{{ path('page2') }}" {% if app.request.attributes.get('_route') == "page2" %}class="active"{% endif %}>Page2</a></li>