Sebastien Napo Sebastien Napo - 2 months ago 8
Twig Question

Set a menu item active, and keep it in memory using TWIG and Symfony

I'm having a problem using Twig because I have a vertical sidebar used as a menu. When the user clicked on the menu item, it add an active class. But when the user change of page, active page disapear. I know this is the behavior expected but that's what I'm here. I wanted to know if someone have an idea to keep this active class in my layout when the user click on this item, so that, when he change of page, the menu will be as he desired (i.e. active or not)

Here is my layout.html.twig file :



<!DOCTYPE HTML>
<html>
<head>
{% block head %}
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %} AcreatMailing {% endblock title %}</title>
{% block js_head %}
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/jquery-3.1.1.min.js') }}"></script>
{% endblock js_head %}
{% block stylesheet %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link href="{{ asset('/bundles/front/css/style.min.css') }}" rel="stylesheet" />
{% endblock stylesheet %}
{% endblock head %}
</head>
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1">
<button class="hamburger">&#9776;</button>
</div>
<div class="col-4 offset-1">
{%- block breadcrumb -%}{%- endblock -%}
</div>
<div class="col-6">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="100" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<span class="dropdown-item"><b>{{app.user.username}}</b></span>
<span class="dropdown-item">{{app.user.email}}</span>
<a href="{{ path('fos_user_profile_show') }}" class="dropdown-item">{{ 'acreat.mailing.nav.myaccount'|trans }}</a>
<a href="{{ path('fos_user_change_password') }}" class="dropdown-item">{{ 'acreat.mailing.nav.changepassword'|trans }}</a>
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<a href="{{ path('front_index', {'account': '_exit'}) }}" class="dropdown-item">{{'acreat.mailing.admin.impersonalisation'|trans}}</a>
{% endif %}
</div>
</div>
<div class="card-footer text-center">
<a href="{{ path('fos_user_security_logout') }}" class="btn btn-block acreatRed dropdown-item">{{ 'acreat.mailing.nav.logout'|trans }}</a>
{% else %}
<a href="{{ path('fos_user_security_login') }}" class="btn btn-block acreatRed dropdown-item">{{ 'acreat.mailing.nav.login'|trans }}</a>
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
<a href="#" onclick="showAndHide()" id='icon' ><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour à l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<a href="/" id="dashboard" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span> </a>
<a href="#menu0" class="list-group-item no-escape arrowContainer" data-toggle="collapse" data-parent="#sidebar" aria-expanded="true"><i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span></a>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" id="addmessage" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" id="viewNotSent" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagenotsent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberNotSent[0][1] }}</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" id="viewSent" data-parent="#sidebar" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagesent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberSent[0][1] }}</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" id="draft" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<a href="/mailinglist/view" class="list-group-item no-escape" id="listview" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span> </a>
<a href="/member/view" class="list-group-item no-escape" id="memberview" data-parent="#sidebar" aria-expanded="false" ><i class="fa fa-users margin-right"></i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span></a>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<a href="#menu4" class="list-group-item no-escape bottom arrowContainer2" data-toggle="collapse" data-parent="#sidebar" aria-expanded="true"><i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span></a>
<div class="collapse show no-escape" id="menu4">
<a href="/admin/mailinglist" class="list-group-item no-escape" id="adminlist" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationlist'|trans }}</a>
<a href="/admin/account/view" class="list-group-item no-escape" id='adminaccount' data-parent="#menu4">{{ 'acreat.mailing.nav.administrationaccount'|trans }}</a>
<a href="/admin/message" class="list-group-item no-escape" id="adminmessage" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}</a>
<a href="/admin/parameters" class="list-group-item no-escape" id="adminparameters" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationparameters'|trans }}</a>
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
{% block footer %}
{% block footer_javascript %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/tether.min.js') }}"></script>
<script type="text/javascript" src="{{asset('bundles/front/components/moment/min/moment.min.js') }}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/bootstrap.min.js') }}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/mdb.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('/bundles/front/components/jquery-ui/jquery-ui.min.js') }}"></script>

<script type="text/javascript" src="{{ asset('/bundles/front/js/libraries.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/acreatmailingfront.min.js') }}"></script>
{% endblock footer_javascript %}
{% endblock footer %}
</html>





The sidebar is inside the {% block navbar %}.
Thanks all in advance.

Answer Source

I found the solution with one of my teamates. I used javascript and jquery to set cookies for the menu. And then if the cookie is set i add/remove the class for my menu. Thanks all by the way.