templates/header.html.twig line 1

  1. <header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-gray-100 transition-all duration-300" 
  2.         x-data="{ scrolled: false, mobileMenu: false }" 
  3.         x-init="() => { }"
  4.         @scroll.window="scrolled = window.scrollY > 50">
  5.     <div class="container mx-auto px-4">
  6.         <div class="flex items-center justify-between h-20">
  7.             <!-- Logo -->
  8.             <a href="{{ path('app_home') }}" class="flex items-center space-x-2 group">
  9.                 <img src="{{ asset('/image/metfpa.png') }}" class="relative h-10 w-auto" alt="METFPA">
  10.                 <img src="{{ asset('/image/logo.png') }}" class="relative h-10 w-auto" alt="DAIP">
  11.             </a>
  12.             
  13.             <!-- Navigation Desktop -->
  14.             <nav class="hidden lg:flex items-center space-x-8">
  15.                 <a href="{{ path('app_home') }}" class="text-gray-700 hover:text-primary-600 font-medium transition {{ app.current_route == 'app_home' ? 'text-primary-600' : '' }}">
  16.                     Accueil
  17.                 </a>
  18.                 <a href="{{ path('app_candidature_index') }}" class="text-gray-700 hover:text-primary-600 font-medium transition {{ app.current_route starts with 'app_candidature' ? 'text-primary-600' : '' }}">
  19.                     Candidatures
  20.                 </a>
  21.                 <a href="#contact" class="text-gray-700 hover:text-primary-600 font-medium transition">
  22.                     Contact
  23.                 </a>
  24.             </nav>
  25.             
  26.             <!-- Actions -->
  27.             <div class="flex items-center space-x-4">
  28.                 {% if app.user %}
  29.                     <a href="{{ path('app_dashboard') }}" class="hidden md:flex items-center space-x-2 bg-gradient-to-r from-orange-300 to-orange-500 text-white px-6 py-2.5 rounded-xl hover:from-orange-400 hover:to-orange-600 transition shadow-lg">
  30.                         <i class="fas fa-tachometer-alt"></i>
  31.                         <span>Dashboard</span>
  32.                     </a>
  33.                 {% else %}
  34.                     <a href="{{ path('app_login') }}" class="hidden md:flex items-center space-x-2 bg-gradient-to-r from-orange-300 to-orange-500 text-white px-6 py-2.5 rounded-xl hover:from-orange-400 hover:to-orange-600 transition shadow-lg">
  35.                         <i class="fas fa-sign-in-alt"></i>
  36.                         <span>Connexion</span>
  37.                     </a>
  38.                 {% endif %}
  39.                 
  40.                 <!-- Menu mobile button -->
  41.                 <button @click="mobileMenu = !mobileMenu;" 
  42.                         class="lg:hidden w-10 h-10 rounded-lg bg-gray-100 text-gray-700 hover:bg-primary-600 hover:text-white transition relative z-50 focus:outline-none"
  43.                         :aria-expanded="mobileMenu">
  44.                     <i class="fas fa-bars" x-show="!mobileMenu"></i>
  45.                     <i class="fas fa-times" x-show="mobileMenu"></i>
  46.                 </button>
  47.             </div>
  48.         </div>
  49.     </div>
  50.     
  51.     <!-- Menu mobile -->
  52.     <div x-show="mobileMenu" 
  53.          x-cloak
  54.          x-transition:enter="transition ease-out duration-300"
  55.          x-transition:enter-start="opacity-0 -translate-y-2"
  56.          x-transition:enter-end="opacity-100 translate-y-0"
  57.          x-transition:leave="transition ease-in duration-200"
  58.          x-transition:leave-start="opacity-100 translate-y-0"
  59.          x-transition:leave-end="opacity-0 -translate-y-2"
  60.          class="lg:hidden absolute top-20 left-0 right-0 bg-white border-t border-gray-100 shadow-xl z-40 max-h-[calc(100vh-5rem)] overflow-y-auto">
  61.         <div class="container mx-auto px-4 py-6">
  62.             <nav class="flex flex-col space-y-3">
  63.                 <a href="{{ path('app_home') }}" 
  64.                    @click="mobileMenu = false"
  65.                    class="flex items-center px-4 py-3 rounded-xl bg-gray-50 text-gray-700 hover:bg-primary-50 hover:text-primary-600 font-medium transition">
  66.                     <i class="fas fa-home w-6 mr-3 text-primary-500"></i>
  67.                     Accueil
  68.                 </a>
  69.                 <a href="{{ path('app_candidature_index') }}" 
  70.                    @click="mobileMenu = false"
  71.                    class="flex items-center px-4 py-3 rounded-xl bg-gray-50 text-gray-700 hover:bg-primary-50 hover:text-primary-600 font-medium transition">
  72.                     <i class="fas fa-file-alt w-6 mr-3 text-primary-500"></i>
  73.                     Candidatures
  74.                 </a>
  75.                 <a href="#contact" 
  76.                    @click="mobileMenu = false"
  77.                    class="flex items-center px-4 py-3 rounded-xl bg-gray-50 text-gray-700 hover:bg-primary-50 hover:text-primary-600 font-medium transition">
  78.                     <i class="fas fa-envelope w-6 mr-3 text-primary-500"></i>
  79.                     Contact
  80.                 </a>
  81.                 
  82.                 <div class="border-t border-gray-200 my-4"></div>
  83.                 
  84.                 {% if app.user %}
  85.                     <a href="{{ path('app_dashboard') }}" 
  86.                        @click="mobileMenu = false"
  87.                        class="flex items-center px-4 py-3 rounded-xl bg-gradient-to-r from-orange-300 to-orange-500 text-white font-medium">
  88.                         <i class="fas fa-tachometer-alt w-6 mr-3"></i>
  89.                         Dashboard
  90.                     </a>
  91.                     <a href="{{ path('app_logout') }}" 
  92.                        @click="mobileMenu = false"
  93.                        class="flex items-center px-4 py-3 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 font-medium transition">
  94.                         <i class="fas fa-sign-out-alt w-6 mr-3"></i>
  95.                         Déconnexion
  96.                     </a>
  97.                 {% else %}
  98.                     <a href="{{ path('app_login') }}" 
  99.                        @click="mobileMenu = false"
  100.                        class="flex items-center px-4 py-3 rounded-xl bg-gradient-to-r from-orange-300 to-orange-500 text-white font-medium">
  101.                         <i class="fas fa-sign-in-alt w-6 mr-3"></i>
  102.                         Connexion
  103.                     </a>
  104.                     <a href="{{ path('app_register') }}" 
  105.                        @click="mobileMenu = false"
  106.                        class="flex items-center px-4 py-3 rounded-xl bg-green-50 text-green-600 hover:bg-green-100 font-medium transition">
  107.                         <i class="fas fa-user-plus w-6 mr-3"></i>
  108.                         Inscription
  109.                     </a>
  110.                 {% endif %}
  111.             </nav>
  112.         </div>
  113.     </div>
  114. </header>
  116. <!-- Espace pour compenser le header fixe -->
  117. <div class="h-20"></div>
  119. <style>
  120.     [x-cloak] { display: none !important; }
  121. </style>