templates/partials/_navbar.html.twig line 1

Open in your IDE?
  1. <header class="bg-white shadow-lg sticky top-0 z-50">
  2.     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  3.         <div class="flex justify-between items-center py-4">
  4.             <a href="{{ path('app_home', {'_locale': app.request.locale}) }}" class="flex items-center space-x-3">
  5.                 <div class="w-12 h-12 rounded-full bg-primary-blue flex items-center justify-center border-2 border-gold overflow-hidden pulse-glow">
  6.                     <img src="https://aficargo.com/a.png" alt="AFI CARGO Logo" class="w-full h-full object-contain">
  7.                 </div>
  8.                 <h1 class="text-2xl md:text-3xl font-extrabold tracking-wide">
  9.                     <span class="text-primary-blue">AFI</span>
  10.                     <span class="text-primary-blue">CARGO</span>
  11.                 </h1>
  12.             </a>
  14.             <nav class="hidden lg:flex items-center space-x-6">
  15.                 {% set nav_items = {
  16.                     'home': 'nav.home',
  17.                     'about': 'nav.about',
  18.                     'company-profile': 'nav.profile',
  19.                     'services': 'nav.services',
  20.                     'afi-business': 'nav.business',
  21.                     'gallery': 'nav.gallery',
  22.                     'tracking': 'nav.tracking',
  23.                     'offices': 'nav.offices',
  24.                     'contact': 'nav.contact'
  25.                 } %}
  27.                 {% for id, label in nav_items %}
  28.                     <a href="#{{ id }}" class="nav-link font-semibold text-gray-700 hover:text-primary-blue transition duration-300 text-sm xl:text-base">
  29.                         {{ label|trans }}
  30.                     </a>
  31.                 {% endfor %}
  33.                 <div class="ml-4">
  34.                     <select id="language-select" class="p-1.5 rounded-md border border-gray-300 font-medium text-sm focus:outline-none focus:ring-2 focus:ring-gold cursor-pointer">
  35.                         <option value="en" {{ app.request.locale == 'en' ? 'selected' }}>🇬🇧 EN</option>
  36.                         <option value="fr" {{ app.request.locale == 'fr' ? 'selected' }}>🇫🇷 FR</option>
  37.                         <option value="zh" {{ app.request.locale == 'zh' ? 'selected' }}>🇨🇳 ä¸­æ–‡</option>
  38.                         <option value="pt" {{ app.request.locale == 'pt' ? 'selected' }}>🇵🇹 PT</option>
  39.                     </select>
  40.                 </div>
  41.             </nav>
  43.             <button id="mobile-menu-button" class="lg:hidden text-primary-blue text-2xl">
  44.                 <i class="fas fa-bars"></i>
  45.             </button>
  46.         </div>
  48.         <div id="mobile-menu" class="lg:hidden hidden py-4 border-t border-gray-200">
  49.             <div class="flex flex-col space-y-4">
  50.                 {% for id, label in nav_items %}
  51.                     <a href="#{{ id }}" class="font-semibold text-gray-700 hover:text-primary-blue transition duration-300 mobile-nav-link">
  52.                         {{ label|trans }}
  53.                     </a>
  54.                 {% endfor %}
  56.                 <div class="pt-4 border-t border-gray-200">
  57.                     <select id="mobile-language-select" class="w-full p-2 rounded-md border border-gray-300 font-medium focus:outline-none focus:ring-2 focus:ring-gold cursor-pointer">
  58.                         <option value="en" {{ app.request.locale == 'en' ? 'selected' }}>🇬🇧 English</option>
  59.                         <option value="fr" {{ app.request.locale == 'fr' ? 'selected' }}>🇫🇷 Français</option>
  60.                         <option value="zh" {{ app.request.locale == 'zh' ? 'selected' }}>🇨🇳 ä¸­æ–‡</option>
  61.                         <option value="pt" {{ app.request.locale == 'pt' ? 'selected' }}>🇵🇹 Português</option>
  62.                     </select>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.     </div>
  67. </header>