<div class="navigation showSide" id="sideBarContent" >
<aside id="sidebar" class="sidebar break-point-lg has-bg-image">
<div class="image-wrapper">
<img src="/img/144499035-2911184c-76d3-4611-86e7-bc4e8ff84ff5.jpg" alt="sidebar background" />
</div>
<nav class="menu">
<ul>
<li class="list active">
<a href="/depChoice">
<span class="title">Home</span>
</a>
</li>
<li class="list">
<a href="javascript:void(0)">
<span class="title" data-mdb-toggle="modal" data-mdb-target="#seeHistorical" id="see_historique" data-dep-choiced="{{ dep }}" >Historique</span>
</a>
</li>
<li class="list">
<a href="javascript:void(0)">
<div id="see_rappel" data-mdb-toggle="modal" data-mdb-target="#viewRappel" data-dep-choiced="{{ dep }}">
<span class="title" data-dep-choiced="{{ dep }}">Rappel</span>
</div>
</a>
</li>
<li class="list">
<a href="javascript:void(0)">
<div id="see_profile" data-mdb-toggle="modal" data-mdb-target="#viewProfil" data-user-id="{{ app.user.id }}">Profile</div>
</a>
</li>
<li class="list" id="dep_choice">
<a href="javascript:void(0)">
<span class="title">dep choice</span>
<span class="menu-suffix"> <i class="fa-solid fa-angle-right"></i> </span>
</a>
<div class="sub-menulist nonactive">
<ul>
{% if deps is defined %}
{% for dep in deps%}
<li class="dep">
<a href="javascript:void(0)" class="sub-menu-title-href" data-user-dep="{{dep.dep}}">
<span class="sub-menu-title" data-user-dep="{{dep.dep}}">{{ dep.dep }} </span>
</a>
</li>
{% endfor %}
{% else %}
<li class="dep">
<a href="javascript:void(0)" class="sub-menu-title-href" data-user-dep="no-deps">
<span class="sub-menu-title" data-user-dep="no-deps">no-deps </span>
</a>
</li>
{% endif %}
</ul>
</div>
</li>
{% if is_granted('ROLE_ADMIN') %}
<li class="list">
<a href="/admin">
<span class="title">admin</span>
</a>
</li>
{% endif %}
<li class="list">
<a href="/logout">
<span class="title">Sign Out</span>
</a>
</li>
</ul>
</nav>
</aside>
</div>