templates/application/whileresume/website/components/sidebar.html.twig line 1

Open in your IDE?
  1. <style>
  2. .nav-wrap .nav-content-bttn.active{
  3. background:var(--theme-color,#6C3AED) !important;
  4. color:#fff !important;
  5. border-radius:10px;
  6. }
  7. .nav-wrap .nav-content-bttn.active i,
  8. .nav-wrap .nav-content-bttn.active span{
  9. color:#fff !important;
  10. }
  11. .nav-wrap .nav-content-bttn.active:hover{
  12. background:var(--theme-color,#6C3AED) !important;
  13. color:#fff !important;
  14. }
  15. </style>
  17. <nav class="navigation scroll-bar">
  18. <div class="container ps-0 pe-0">
  19. <div class="nav-content">
  21. {% include "application/whileresume/website/components/elements/connected.html.twig" %}
  22. {% include "application/whileresume/website/components/elements/discover.html.twig" %}
  23. {% include "application/whileresume/website/components/elements/blocked.html.twig" %}
  25. {% if isCandidateUser %}{% endif %}
  27. {% if sidebarFiltersCities is defined and sidebarFiltersCities|length > 0 %}
  28. <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1 mb-2 whr-filter-section" data-page-size="5">
  29. <div class="nav-caption fw-600 font-xssss text-grey-500"><span>{{ 'sidebar.filterCitiesSection'|trans({}, 'whr-public') }}</span></div>
  31. {# Input de recherche live #}
  32. {% if sidebarFiltersCities|length > 5 %}
  33. <div class="px-3 pt-1 pb-2 whr-filter-search-wrap">
  34. <div class="whr-filter-search">
  35. <span class="whr-filter-search-icon">
  36. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  37. </span>
  38. <input type="text" class="whr-filter-search-input" placeholder="{{ 'sidebar.filterSearchCity'|trans({}, 'whr-public') }}" autocomplete="off">
  39. </div>
  40. </div>
  41. {% endif %}
  43. <ul class="mb-1 whr-filter-list">
  44. {% for f in sidebarFiltersCities %}
  45. <li class="whr-filter-item" data-index="{{ loop.index0 }}" data-filter-label="{{ f.label }}"{% if loop.index0 >= 5 %} style="display:none"{% endif %}>
  46. <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter',{'slug':f.slug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':f.slug}) }}{% endif %}"
  47. class="nav-content-bttn open-font h-auto pt-2 pb-2">
  48. {% if f.icon is not empty %}
  49. <span class="me-3" style="font-size:18px;line-height:1;display:inline-block;width:24px;text-align:center;">{{ f.icon }}</span>
  50. {% else %}
  51. <i class="font-sm feather-map-pin me-3 text-grey-500"></i>
  52. {% endif %}
  53. <span>{{ f.label }}</span>
  54. </a>
  55. </li>
  56. {% endfor %}
  57. <li class="whr-filter-empty"><span>{{ 'sidebar.filterNoResults'|trans({}, 'whr-public') }}</span></li>
  58. </ul>
  60. {# Pagination ← 1/N → #}
  61. {% if sidebarFiltersCities|length > 5 %}
  62. <div class="px-3 pb-2 pt-1 whr-filter-pager-wrap">
  63. <div class="whr-filter-pager">
  64. <button type="button" class="whr-filter-pager-btn whr-filter-pager-prev" aria-label="{{ 'sidebar.filterPrev'|trans({}, 'whr-public') }}">
  65. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
  66. </button>
  67. <span class="whr-filter-pager-info"><span class="whr-filter-pager-current">1</span>/<span class="whr-filter-pager-total">{{ ((sidebarFiltersCities|length - 1) // 5) + 1 }}</span></span>
  68. <button type="button" class="whr-filter-pager-btn whr-filter-pager-next" aria-label="{{ 'sidebar.filterNext'|trans({}, 'whr-public') }}">
  69. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  70. </button>
  71. </div>
  72. </div>
  73. {% endif %}
  74. </div>
  75. {% endif %}
  77. {% if sidebarFiltersCategories is defined and sidebarFiltersCategories|length > 0 %}
  78. <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1 mb-2 whr-filter-section" data-page-size="5">
  79. <div class="nav-caption fw-600 font-xssss text-grey-500"><span>{{ 'sidebar.filterCategoriesSection'|trans({}, 'whr-public') }}</span></div>
  81. {% if sidebarFiltersCategories|length > 5 %}
  82. <div class="px-3 pt-1 pb-2 whr-filter-search-wrap">
  83. <div class="whr-filter-search">
  84. <span class="whr-filter-search-icon">
  85. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
  86. </span>
  87. <input type="text"
  88. class="whr-filter-search-input"
  89. placeholder="{{ 'sidebar.filterSearchCategory'|trans({}, 'whr-public') }}"
  90. autocomplete="off">
  91. </div>
  92. </div>
  93. {% endif %}
  95. <ul class="mb-1 whr-filter-list">
  96. {% for f in sidebarFiltersCategories %}
  97. <li class="whr-filter-item" data-index="{{ loop.index0 }}" data-filter-label="{{ f.label }}"{% if loop.index0 >= 5 %} style="display:none"{% endif %}>
  98. <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_jobs_filter',{'slug':f.slug}) }}{% else %}{{ path('locale_cvs_application_jobs_filter',{'_locale':app.request.locale,'slug':f.slug}) }}{% endif %}"
  99. class="nav-content-bttn open-font h-auto pt-2 pb-2">
  100. {% if f.icon is not empty %}
  101. <span class="me-3" style="font-size:18px;line-height:1;display:inline-block;width:24px;text-align:center;">{{ f.icon }}</span>
  102. {% else %}
  103. <i class="font-sm feather-briefcase me-3 text-grey-500"></i>
  104. {% endif %}
  105. <span>{{ f.label }}</span>
  106. </a>
  107. </li>
  108. {% endfor %}
  109. <li class="whr-filter-empty"><span>{{ 'sidebar.filterNoResults'|trans({}, 'whr-public') }}</span></li>
  110. </ul>
  112. {% if sidebarFiltersCategories|length > 5 %}
  113. <div class="px-3 pb-2 pt-1 whr-filter-pager-wrap">
  114. <div class="whr-filter-pager">
  115. <button type="button" class="whr-filter-pager-btn whr-filter-pager-prev" aria-label="{{ 'sidebar.filterPrev'|trans({}, 'whr-public') }}">
  116. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
  117. </button>
  118. <span class="whr-filter-pager-info"><span class="whr-filter-pager-current">1</span>/<span class="whr-filter-pager-total">{{ ((sidebarFiltersCategories|length - 1) // 5) + 1 }}</span></span>
  119. <button type="button" class="whr-filter-pager-btn whr-filter-pager-next" aria-label="{{ 'sidebar.filterNext'|trans({}, 'whr-public') }}">
  120. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  121. </button>
  122. </div>
  123. </div>
  124. {% endif %}
  125. </div>
  126. {% endif %}
  128. {% if (sidebarFiltersCities is defined and sidebarFiltersCities|length > 5)
  129. or (sidebarFiltersCategories is defined and sidebarFiltersCategories|length > 5) %}
  130. <style>
  131. /* Recherche */
  132. .whr-filter-search{position:relative;display:block}
  133. .whr-filter-search-input{
  134. width:100%;padding:6px 10px 6px 28px;
  135. border:1px solid #E5E7EB;border-radius:100px;
  136. font-size:11.5px;color:#1E1B2E;background:#FAFAFA;
  137. font-family:inherit;outline:none;box-sizing:border-box;
  138. transition:border-color .15s,background .15s
  139. }
  140. .whr-filter-search-input:focus{border-color:rgba(108,58,237,.4);background:#fff}
  141. .whr-filter-search-input::placeholder{color:#9CA3AF}
  142. .whr-filter-search-icon{
  143. position:absolute;left:10px;top:50%;transform:translateY(-50%);
  144. color:#9CA3AF;pointer-events:none;display:flex
  145. }
  146. .whr-filter-search-icon svg{width:11px;height:11px}
  148. /* État vide (aucun résultat de recherche) */
  149. .whr-filter-empty{display:none;list-style:none;padding:10px 14px;text-align:center}
  150. .whr-filter-empty span{font-size:11px;color:#9CA3AF;font-style:italic}
  151. .whr-filter-list.is-empty .whr-filter-empty{display:list-item}
  153. /* Pager */
  154. .whr-filter-pager{
  155. display:flex;align-items:center;justify-content:center;gap:8px;
  156. padding:4px;
  157. }
  158. .whr-filter-pager-btn{
  159. display:inline-flex;align-items:center;justify-content:center;
  160. width:26px;height:26px;
  161. background:transparent;border:1px solid rgba(108,58,237,.25);border-radius:8px;
  162. color:var(--theme-color,#6C3AED);
  163. font-family:inherit;cursor:pointer;
  164. transition:background .15s,border-color .15s,opacity .15s
  165. }
  166. .whr-filter-pager-btn:hover:not(:disabled){background:#F5F3FF;border-color:var(--theme-color,#6C3AED)}
  167. .whr-filter-pager-btn:disabled{opacity:.35;cursor:not-allowed}
  168. .whr-filter-pager-btn svg{width:12px;height:12px}
  169. .whr-filter-pager-info{
  170. font-size:11.5px;font-weight:600;color:#6B7280;
  171. min-width:36px;text-align:center;letter-spacing:.02em
  172. }
  173. .whr-filter-pager-current{color:var(--theme-color,#6C3AED)}
  175. /* Quand la recherche est active, on cache le pager (l'utilisateur voit déjà tous les matches) */
  176. .whr-filter-section.is-searching .whr-filter-pager-wrap{display:none}
  177. </style>
  178. <script>
  179. (function(){
  180. 'use strict';
  182. function whrSlug(s){
  183. if(!s) return '';
  184. var t = String(s);
  185. t = t.normalize ? t.normalize('NFD').replace(/[\u0300-\u036f]/g, '') : t;
  186. return t.toLowerCase().trim();
  187. }
  189. document.querySelectorAll('.whr-filter-section').forEach(function(section){
  190. var pageSize = parseInt(section.getAttribute('data-page-size'), 10) || 5;
  191. var list = section.querySelector('.whr-filter-list');
  192. if(!list) return;
  193. var items = section.querySelectorAll('.whr-filter-item');
  194. var input = section.querySelector('.whr-filter-search-input');
  195. var pagerWrap = section.querySelector('.whr-filter-pager');
  196. var prevBtn = section.querySelector('.whr-filter-pager-prev');
  197. var nextBtn = section.querySelector('.whr-filter-pager-next');
  198. var currentSpan = section.querySelector('.whr-filter-pager-current');
  199. var totalSpan = section.querySelector('.whr-filter-pager-total');
  201. var total = items.length;
  202. var totalPages = Math.max(1, Math.ceil(total / pageSize));
  203. var currentPage = 1;
  205. function renderPage(){
  206. var startIdx = (currentPage - 1) * pageSize;
  207. var endIdx = startIdx + pageSize;
  208. items.forEach(function(it, i){
  209. it.style.display = (i >= startIdx && i < endIdx) ? '' : 'none';
  210. });
  211. if(currentSpan) currentSpan.textContent = currentPage;
  212. if(prevBtn) prevBtn.disabled = (currentPage <= 1);
  213. if(nextBtn) nextBtn.disabled = (currentPage >= totalPages);
  214. list.classList.remove('is-empty');
  215. }
  217. function applySearch(query){
  218. var q = whrSlug(query || '');
  219. if(!q){
  220. section.classList.remove('is-searching');
  221. renderPage();
  222. return;
  223. }
  225. section.classList.add('is-searching');
  226. var visibleCount = 0;
  227. items.forEach(function(it){
  228. var label = it.getAttribute('data-filter-label') || '';
  229. var matches = whrSlug(label).indexOf(q) !== -1;
  230. it.style.display = matches ? '' : 'none';
  231. if(matches) visibleCount++;
  232. });
  233. if(visibleCount === 0){
  234. list.classList.add('is-empty');
  235. } else {
  236. list.classList.remove('is-empty');
  237. }
  238. }
  240. if(prevBtn){
  241. prevBtn.addEventListener('click', function(){
  242. if(currentPage > 1){ currentPage--; renderPage(); }
  243. });
  244. }
  245. if(nextBtn){
  246. nextBtn.addEventListener('click', function(){
  247. if(currentPage < totalPages){ currentPage++; renderPage(); }
  248. });
  249. }
  250. if(input){
  251. input.addEventListener('input', function(){
  252. applySearch(input.value);
  253. });
  254. }
  256. // Init
  257. renderPage();
  258. });
  259. })();
  260. </script>
  261. {% endif %}
  263. <div class="nav-wrap bg-white bg-transparent-card rounded-xxl shadow-xss pt-3 pb-1">
  264. <div class="nav-caption fw-600 font-xssss text-grey-500"><span></span>{{ 'sidebar.account'|trans({}, 'whr-public') }}</div>
  265. <ul class="mb-1">
  266. <li class="logo d-none d-xl-block d-lg-block"></li>
  267. {% if connectUser %}
  268. {% if isCandidateUser %}
  269. <li><a href="{% if app.request.locale == "en" %}{{ path('cvs_gestion_candidates_dashboard') }}{% else %}{{ path('locale_cvs_gestion_candidates_dashboard',{'_locale':app.request.locale}) }}{% endif %}" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-grid me-3 text-grey-500"></i><span>{{ 'layout.sidebar.dashboard'|trans({}, 'whr-candidates') }}</span></a></li>
  270. {% if app.user.first == 0 %}
  271. <li><a href="{% if app.request.locale == "en" %}{{ path('cvs_gestion_candidates_profile_profile') }}{% else %}{{ path('locale_cvs_gestion_candidates_profile_profile',{'_locale':app.request.locale}) }}{% endif %}" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-user me-3 text-grey-500"></i><span>{{ 'layout.sidebar.my_profile'|trans({}, 'whr-candidates') }}</span></a></li>
  272. {% endif %}
  273. {% else %}
  274. <li><a href="{% if app.request.locale == "en" %}{{ path('cvs_gestion_enterprises_dashboard') }}{% else %}{{ path('locale_cvs_gestion_enterprises_dashboard',{'_locale':app.request.locale}) }}{% endif %}" class="nav-content-bttn open-font h-auto pt-2 pb-2" ><i class="font-sm feather-grid me-3 text-grey-500"></i> <span>{{ 'layout.nav.dashboard'|trans({}, 'whr-enterprises') }}</span></a></li>
  275. <li><a href="{% if app.request.locale == "en" %}{{ path('cvs_gestion_enterprises_profile_profile') }}{% else %}{{ path('locale_cvs_gestion_enterprises_profile_profile',{'_locale':app.request.locale}) }}{% endif %}" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-user me-3 text-grey-500"></i><span>{{ 'layout.nav.my_profile'|trans({}, 'whr-enterprises') }}</span></a></li>
  276. <li><a href="{% if app.request.locale == "en" %}{{ path('cvs_gestion_enterprises_settings') }}{% else %}{{ path('locale_cvs_gestion_enterprises_settings',{'_locale':app.request.locale}) }}{% endif %}" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-settings me-3 text-grey-500"></i><span>{{ 'layout.nav.settings'|trans({}, 'whr-enterprises') }}</span></a></li>
  277. {% endif %}
  279. {% if is_granted("ROLE_SUPER_ADMIN") %}
  280. <li><a href="{{ path('backoffice_dashboard') }}" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-settings me-3 text-grey-500"></i><span>{{ 'layout.nav.administration'|trans({}, 'whr-enterprises') }}</span></a></li>
  281. {% endif %}
  282. <li><a href="{{ path('app_logout') }}" class="nav-content-bttn open-font h-auto pt-2 pb-2"><i class="font-sm feather-log-out me-3 text-grey-500"></i><span>{{ 'layout.nav.logout'|trans({}, 'whr-enterprises') }}</span></a></li>
  283. {% else %}
  284. {% include "application/whileresume/website/components/elements/signup.html.twig" %}
  285. {% endif %}
  286. </ul>
  287. </div>
  289. </div>
  290. </div>
  291. </nav>