templates/components/_header.html.twig line 1

Open in your IDE?
  1. {% set route = app.request.attributes.get('_route') %}
  3. <header class="bg-white shadow-lg sticky top-0 z-50 border-b border-gray-100">
  4. <div class="container mx-auto px-4 md:px-6">
  6. <!-- Top bar — desktop uniquement -->
  7. <div class="bg-gray-50 border-b border-gray-100 hidden lg:block">
  8. <div class="container mx-auto px-4 md:px-6 py-2">
  9. <div class="flex justify-between items-center text-sm">
  11. <!-- Infos contact -->
  12. <div class="flex items-center space-x-6 text-gray-600">
  13. <span>
  14. <i class="fas fa-phone-alt mr-2 text-[#006633]"></i>
  15. +269 123 45 67
  16. </span>
  17. <span>
  18. <i class="fas fa-envelope mr-2 text-[#006633]"></i>
  19. contact@journal-officiel.km
  20. </span>
  21. <span>
  22. <i class="fas fa-clock mr-2 text-[#006633]"></i>
  23. Lun - Ven: 8h00 - 16h30
  24. </span>
  25. </div>
  27. <!-- Réseaux sociaux + sélecteur de langue -->
  28. <div class="flex items-center space-x-4">
  29. <a href="#" class="text-gray-500 hover:text-[#006633] transition">
  30. <i class="fab fa-facebook-f"></i>
  31. </a>
  32. <a href="#" class="text-gray-500 hover:text-[#006633] transition">
  33. <i class="fab fa-twitter"></i>
  34. </a>
  35. <a href="#" class="text-gray-500 hover:text-[#006633] transition">
  36. <i class="fab fa-linkedin-in"></i>
  37. </a>
  38. <span class="text-gray-300">|</span>
  40. <!-- Sélecteur de langue -->
  41. <div class="relative" id="lang-switcher">
  42. <button type="button" id="lang-btn"
  43. onclick="toggleLangMenu()"
  44. class="flex items-center gap-2 text-gray-600 hover:text-[#006633]
  45. transition font-medium border border-gray-200
  46. hover:border-[#006633]/40 rounded-xl px-3 py-1.5 bg-white">
  47. <img src="https://flagcdn.com/w20/fr.png"
  48. id="lang-flag" class="w-4 rounded-sm">
  49. <span id="lang-label" class="text-sm">Français</span>
  50. <i id="lang-chevron"
  51. class="fas fa-chevron-down text-[10px] text-gray-400
  52. transition-transform duration-200"></i>
  53. </button>
  55. <!-- Dropdown -->
  56. <div id="lang-menu"
  57. class="absolute right-0 top-full mt-2 w-44 bg-white
  58. border border-gray-100 rounded-xl shadow-lg
  59. overflow-hidden z-50 hidden">
  60. <button type="button" id="lang-opt-fr"
  61. onclick="switchLanguage('fr')"
  62. class="w-full flex items-center gap-3 px-4 py-3 text-sm
  63. transition text-[#006633] font-semibold
  64. bg-emerald-50/60 hover:bg-emerald-50">
  65. <img src="https://flagcdn.com/w20/fr.png" class="w-4 rounded-sm">
  66. <span>Français</span>
  67. <i class="fas fa-check text-[#006633] text-xs ml-auto lang-check-fr"></i>
  68. </button>
  69. <div class="h-px bg-gray-100"></div>
  70. <button type="button" id="lang-opt-en"
  71. onclick="switchLanguage('en')"
  72. class="w-full flex items-center gap-3 px-4 py-3 text-sm
  73. transition text-gray-700
  74. hover:bg-gray-50 hover:text-[#006633]">
  75. <img src="https://flagcdn.com/w20/gb.png" class="w-4 rounded-sm">
  76. <span>English</span>
  77. <i class="fas fa-check text-[#006633] text-xs ml-auto lang-check-en hidden"></i>
  78. </button>
  79. </div>
  80. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  87. <!-- Navigation principale -->
  88. <div class="flex justify-between items-center py-3 md:py-4">
  90. <!-- Logo -->
  91. <a href="{{ path('app_home') }}">
  92. <div class="flex items-center space-x-2 md:space-x-3">
  93. <img src="{{ asset('images/path6.png') }}"
  94. alt="Logo Journal Officiel"
  95. class="w-10 h-10 md:w-12 md:h-12 object-contain rounded-lg shadow-md">
  96. <div>
  97. <h1 class="text-base md:text-xl font-bold text-gray-800 tracking-tight">
  98. <span class="md:hidden">Journal Officiel</span>
  99. <span class="hidden md:inline">JOURNAL OFFICIEL</span>
  100. </h1>
  101. <p class="hidden md:block text-xs text-gray-500">Union des Comores</p>
  102. </div>
  103. </div>
  104. </a>
  106. <!-- Menu desktop -->
  107. <nav class="hidden lg:flex items-center space-x-1 xl:space-x-2">
  108. <a href="{{ path('app_home') }}"
  109. class="font-medium transition py-1.5 px-3 rounded-lg
  110. {{ route == 'app_home'
  111. ? 'bg-[#006633] text-white shadow-sm'
  112. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50' }}">
  113. Accueil
  114. </a>
  115. <a href="{{ path('app_journal_officiel') }}"
  116. class="font-medium transition py-1.5 px-3 rounded-lg
  117. {{ route == 'app_journal_officiel'
  118. ? 'bg-[#006633] text-white shadow-sm'
  119. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50' }}">
  120. Journal Officiel
  121. </a>
  122. <a href="{{ path('app_munganyo') }}"
  123. class="font-medium transition py-1.5 px-3 rounded-lg
  124. {{ route == 'app_munganyo'
  125. ? 'bg-[#006633] text-white shadow-sm'
  126. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50' }}">
  127. Munganyo
  128. </a>
  129. <a href="{{ path('app_publications') }}"
  130. class="font-medium transition py-1.5 px-3 rounded-lg
  131. {{ route == 'app_publications'
  132. ? 'bg-[#006633] text-white shadow-sm'
  133. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50' }}">
  134. Publications
  135. </a>
  136. <a href="{{ path('app_search') }}"
  137. class="font-medium transition py-1.5 px-3 rounded-lg
  138. {{ route == 'app_search'
  139. ? 'bg-[#006633] text-white shadow-sm'
  140. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50' }}">
  141. <i class="fas fa-search mr-1"></i> Recherche
  142. </a>
  143. </nav>
  145. <!-- Actions droite -->
  146. <div class="flex items-center space-x-2 md:space-x-4">
  147. {% if app.user %}
  148. <div class="relative group">
  149. <button class="flex items-center space-x-1 md:space-x-2
  150. text-gray-700 hover:text-[#006633] transition">
  151. <i class="fas fa-user-circle text-xl md:text-2xl"></i>
  152. <span class="hidden md:inline text-sm">
  153. {{ app.user.firstName|default('Utilisateur') }}
  154. </span>
  155. <i class="fas fa-chevron-down text-xs hidden md:inline"></i>
  156. </button>
  157. <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg
  158. opacity-0 invisible group-hover:opacity-100
  159. group-hover:visible transition-all z-50">
  160. <a href="{{ path('app_dashboard') }}"
  161. class="block px-4 py-2 text-gray-700 hover:bg-gray-50">
  162. <i class="fas fa-tachometer-alt mr-2"></i> Tableau de bord
  163. </a>
  164. <a href="{{ path('app_abonn') }}"
  165. class="block px-4 py-2 text-gray-700 hover:bg-gray-50">
  166. <i class="fas fa-crown mr-2"></i> Abonnement
  167. </a>
  168. <div class="border-t"></div>
  169. <a href="{{ path('app_logout') }}"
  170. class="block px-4 py-2 text-red-600 hover:bg-gray-50">
  171. <i class="fas fa-sign-out-alt mr-2"></i> Déconnexion
  172. </a>
  173. </div>
  174. </div>
  175. {% else %}
  176. <a href="{{ path('app_login') }}"
  177. class="text-gray-700 hover:text-[#006633] transition font-medium text-sm md:text-base">
  178. <i class="fas fa-user mr-0 md:mr-1"></i>
  179. <span class="hidden sm:inline">Connexion</span>
  180. </a>
  181. <a href="{{ path('app_abonn') }}"
  182. class="bg-gradient-to-r from-[#006633] to-[#008844] text-white
  183. px-2 md:px-5 py-1.5 md:py-2 rounded-lg
  184. hover:from-[#004d26] hover:to-[#006633]
  185. transition shadow-md hover:shadow-lg
  186. text-xs md:text-base whitespace-nowrap">
  187. <i class="fas fa-gem mr-0 md:mr-1 text-xs md:text-base"></i>
  188. <span class="hidden sm:inline">S'abonner</span>
  189. <span class="sm:hidden">Abonner</span>
  190. </a>
  191. {% endif %}
  193. <!-- Bouton menu mobile -->
  194. <button id="mobileMenuButton"
  195. class="lg:hidden text-gray-700 hover:text-[#006633] transition p-2">
  196. <i class="fas fa-bars text-xl md:text-2xl"></i>
  197. </button>
  198. </div>
  199. </div>
  201. <!-- Menu mobile -->
  202. <div id="mobileMenu"
  203. class="lg:hidden hidden border-t border-gray-100 bg-white shadow-lg">
  204. <nav class="flex flex-col py-4">
  205. <a href="{{ path('app_home') }}"
  206. class="py-3 px-4 transition flex items-center space-x-3 border-l-4 font-medium
  207. {{ route == 'app_home'
  208. ? 'bg-green-50 text-[#006633] border-[#006633]'
  209. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50 border-transparent hover:border-[#006633]' }}">
  210. <i class="fas fa-home text-[#006633] w-5"></i>
  211. <span>Accueil</span>
  212. </a>
  213. <a href="{{ path('app_journal_officiel') }}"
  214. class="py-3 px-4 transition flex items-center space-x-3 border-l-4 font-medium
  215. {{ route == 'app_journal_officiel'
  216. ? 'bg-green-50 text-[#006633] border-[#006633]'
  217. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50 border-transparent hover:border-[#006633]' }}">
  218. <i class="fas fa-newspaper text-[#006633] w-5"></i>
  219. <span>Journal Officiel</span>
  220. </a>
  221. <a href="{{ path('app_munganyo') }}"
  222. class="py-3 px-4 transition flex items-center space-x-3 border-l-4 font-medium
  223. {{ route == 'app_munganyo'
  224. ? 'bg-green-50 text-[#006633] border-[#006633]'
  225. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50 border-transparent hover:border-[#006633]' }}">
  226. <i class="fas fa-file-alt text-[#006633] w-5"></i>
  227. <span>Munganyo</span>
  228. </a>
  229. <a href="{{ path('app_publications') }}"
  230. class="py-3 px-4 transition flex items-center space-x-3 border-l-4 font-medium
  231. {{ route == 'app_publications'
  232. ? 'bg-green-50 text-[#006633] border-[#006633]'
  233. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50 border-transparent hover:border-[#006633]' }}">
  234. <i class="fas fa-bullhorn text-[#006633] w-5"></i>
  235. <span>Publications</span>
  236. </a>
  237. <a href="{{ path('app_search') }}"
  238. class="py-3 px-4 transition flex items-center space-x-3 border-l-4 font-medium
  239. {{ route == 'app_search'
  240. ? 'bg-green-50 text-[#006633] border-[#006633]'
  241. : 'text-gray-700 hover:text-[#006633] hover:bg-green-50 border-transparent hover:border-[#006633]' }}">
  242. <i class="fas fa-search text-[#006633] w-5"></i>
  243. <span>Recherche avancée</span>
  244. </a>
  246. <!-- Sélecteur de langue mobile -->
  247. <div class="border-t border-gray-100 mt-2 pt-3 px-4">
  248. <p class="text-xs text-gray-400 uppercase tracking-widest mb-2 font-semibold"
  249. data-no-translate>
  250. Langue / Language
  251. </p>
  252. <div class="flex gap-2">
  253. <button onclick="switchLanguage('fr')"
  254. class="flex items-center gap-2 px-3 py-2 rounded-xl
  255. border border-gray-200 text-sm text-gray-700
  256. hover:border-[#006633] hover:text-[#006633] transition">
  257. <img src="https://flagcdn.com/w20/fr.png" class="w-4 rounded-sm">
  258. Français
  259. </button>
  260. <button onclick="switchLanguage('en')"
  261. class="flex items-center gap-2 px-3 py-2 rounded-xl
  262. border border-gray-200 text-sm text-gray-700
  263. hover:border-[#006633] hover:text-[#006633] transition">
  264. <img src="https://flagcdn.com/w20/gb.png" class="w-4 rounded-sm">
  265. English
  266. </button>
  267. </div>
  268. </div>
  270. <!-- Connexion / Déconnexion -->
  271. <div class="border-t border-gray-100 mt-2 pt-2">
  272. {% if not app.user %}
  273. <a href="{{ path('app_login') }}"
  274. class="text-gray-700 hover:text-[#006633] hover:bg-green-50
  275. py-3 px-4 transition flex items-center space-x-3">
  276. <i class="fas fa-sign-in-alt text-[#006633] w-5"></i>
  277. <span>Connexion</span>
  278. </a>
  279. <a href="{{ path('app_abonn') }}"
  280. class="bg-gradient-to-r from-[#006633] to-[#008844] text-white
  281. mx-4 mt-2 mb-1 py-2.5 px-4 rounded-lg transition
  282. flex items-center justify-center space-x-2 shadow-md">
  283. <i class="fas fa-gem"></i>
  284. <span class="font-semibold">S'abonner maintenant</span>
  285. </a>
  286. {% else %}
  287. <a href="{{ path('app_dashboard') }}"
  288. class="text-gray-700 hover:text-[#006633] hover:bg-green-50
  289. py-3 px-4 transition flex items-center space-x-3">
  290. <i class="fas fa-tachometer-alt text-[#006633] w-5"></i>
  291. <span>Tableau de bord</span>
  292. </a>
  293. <a href="{{ path('app_logout') }}"
  294. class="text-red-600 hover:bg-red-50 py-3 px-4
  295. transition flex items-center space-x-3">
  296. <i class="fas fa-sign-out-alt text-red-600 w-5"></i>
  297. <span>Déconnexion</span>
  298. </a>
  299. {% endif %}
  300. </div>
  301. </nav>
  302. </div>
  304. </div>
  305. </header>
  307. <style>
  308. @media (max-width: 480px) {
  309. .whitespace-nowrap { font-size: .7rem; padding-left: .5rem; padding-right: .5rem; }
  310. .whitespace-nowrap i { font-size: .65rem; }
  311. }
  312. #mobileMenu { max-height: 80vh; overflow-y: auto; scrollbar-width: thin; }
  313. #mobileMenu::-webkit-scrollbar { width: 4px; }
  314. #mobileMenu::-webkit-scrollbar-track { background: #f1f1f1; }
  315. #mobileMenu::-webkit-scrollbar-thumb { background: #006633; border-radius: 4px; }
  316. </style>
  318. <script>
  319. // ── Menu mobile ──────────────────────────────────────────────
  320. const mobileMenuButton = document.getElementById('mobileMenuButton');
  321. const mobileMenu = document.getElementById('mobileMenu');
  323. if (mobileMenuButton && mobileMenu) {
  324. mobileMenuButton.addEventListener('click', function () {
  325. const isHidden = mobileMenu.classList.contains('hidden');
  326. if (isHidden) {
  327. mobileMenu.classList.remove('hidden');
  328. mobileMenu.style.animation = 'slideDown 0.3s ease-out';
  329. this.innerHTML = '<i class="fas fa-times text-xl md:text-2xl"></i>';
  330. } else {
  331. mobileMenu.style.animation = 'slideUp 0.3s ease-out';
  332. setTimeout(() => mobileMenu.classList.add('hidden'), 250);
  333. this.innerHTML = '<i class="fas fa-bars text-xl md:text-2xl"></i>';
  334. }
  335. });
  337. mobileMenu.querySelectorAll('a').forEach(link => {
  338. link.addEventListener('click', () => {
  339. mobileMenu.classList.add('hidden');
  340. mobileMenuButton.innerHTML = '<i class="fas fa-bars text-xl md:text-2xl"></i>';
  341. });
  342. });
  343. }
  345. // Animations menu mobile
  346. const _s = document.createElement('style');
  347. _s.textContent = `
  348. @keyframes slideDown {
  349. from { opacity: 0; transform: translateY(-10px); }
  350. to { opacity: 1; transform: translateY(0); }
  351. }
  352. @keyframes slideUp {
  353. from { opacity: 1; transform: translateY(0); }
  354. to { opacity: 0; transform: translateY(-10px); }
  355. }
  356. `;
  357. document.head.appendChild(_s);
  358. </script>