templates/layout/includes/navegation/desktop.html.twig line 1

Open in your IDE?
  2. <style>
  3.     @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
  5.     {% if is_authenticated %}
  6.     .menu-outer{
  7.         background-color: #737474;
  8.     }
  9.     {% else %}
  10.     .menu-outer{
  11.         background-color: #106eea;
  12.     }
  13.     {% endif %}
  14.     #siteNav.medium {
  15.         font-family: 'Raleway', sans-serif; /* Establece el tipo de fuente para todo el navbar */
  16.     }
  17.     {% if currentPath == '/es/empresa' or currentPath == '/en/about-us'%}
  18.     {% set isAboutUs = true%}
  19.     {% else %}
  20.     {% set isAboutUs = false %}
  21.     {%  endif %}
  23.     #siteNav.medium > li a {
  24.         font-size: 16px;
  25.         padding: 8px 16px;
  26.         margin-left: 10px;
  27.         font-weight: 700;
  28.         color: #fff;
  29.         position: relative;
  30.         display: inline-block;
  31.         overflow: hidden;
  32.         text-transform: capitalize;
  33.     }
  35.     #siteNav.medium > li a::after {
  36.         content: '';
  37.         position: absolute;
  38.         bottom: 0;
  39.         left: 50%;
  40.         width: 0;
  41.         height: 2px;
  42.         background-color: #fff;
  43.         transition: width 0.3s ease-out, transform 0.3s ease-out;
  44.         transform: translateX(-50%);
  45.         transform-origin: center;
  46.     }
  48.     #siteNav.medium > li a:hover::after {
  49.         width: 100%;
  50.         transform: translateX(-50%) scaleX(2);
  51.     }
  53.     #siteNav.medium > li a:hover {
  54.         color: #fff;
  55.     }
  57.     #siteNav.medium > li .dropdown-item {
  58.         color: #000;
  59.     }
  60.     @keyframes shake {
  61.         0%, 100% {
  62.             transform: translateX(0);
  63.         }
  64.         10%, 30%, 50%, 70%, 90% {
  65.             transform: translateX(-5px);
  66.         }
  67.         20%, 40%, 60%, 80% {
  68.             transform: translateX(5px);
  69.         }
  70.     }
  71.     .shake {
  72.         animation: shake 0.5s;
  73.     }
  74.     #search-box::placeholder {
  75.         color: #FF0000;
  77.     }
  78. </style>
  79. <div class="menu-outer d-none d-lg-block pb-1">
  80.     <div class="container">
  81.         <div class="row">
  82.             <div class="col-1 col-sm-1 col-md-1 col-lg-12 align-self-center d-menu-col">
  83.                 <nav class="grid__item" id="AccessibleNav">
  84.                     <ul id="siteNav" class="site-nav medium center hidearrow">
  85.                         {#  HOME #}
  86.                         <li class="lvl1">
  87.                             <a href="{{ isRoot ? '#sticky-header' : navStartNode~'/' }}">{{ "layout.navbar-desktop.home_translations" | trans }}
  88.                                 <i class="an an-angle-down-l"></i>
  89.                             </a>
  90.                         </li>
  91.                         {# ABOUT US #}
  92.                         <li class="lvl1 parent dropdown">
  93.                             <a href="{{ isRoot ? '#featured-services' : navStartNode~'#featured-services' }}">{{ 'layout.footer.information.professional-area_translations' | trans }}
  94.                                 <i class="an an-angle-down-l"></i>
  95.                             </a>
  96.                                 <ul class="dropdown">
  97.                                     <li><a href="{{ isAboutUs ? '#company' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us' : 'empresa') }}" class="site-nav">{{ 'home.about-us_title_translations' | trans}}</a></li>
  98.                                     <li><a href="{{ isAboutUs ? '#technicalAdvice' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#technicalAdvice' : 'empresa#technicalAdvice') }}" class="site-nav">{{ 'home.about-us-cards.technical_advice_translations' | trans }}</a></li>
  99.                                     <li><a href="{{ isAboutUs ? '#customService' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#customService' : 'empresa#customService') }}" class="site-nav">{{ 'home.about-us-cards.custom_service_translations' | trans }}</a></li>
  100.                                     <li><a href="{{ isAboutUs ? '#stockLogistic' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#stockLogistic' : 'empresa#stockLogistic') }}" class="site-nav">{{ 'home.about-us-cards.stock_and_logistics_translations' | trans }}</a></li>
  101.                                     <li><a href="{{ isAboutUs ? '#training' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us#training' : 'empresa#training') }}" class="site-nav">{{ 'home.about-us-cards.training_translations'| trans }}</a></li>
  102.                                 </ul>
  103.                         </li>
  104.                         {#  PRODUCTS #}
  105.                         <li class="lvl1 parent dropdown">
  106.                             <a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/products/default_m1' : 'es/productos/default_m1') }}">{{ 'layout.navbar-desktop.products_translations'|trans }}
  107.                                 <i class="an an-angle-down-l"></i>
  108.                             </a>
  109.                         </li>
  110.                         {# Technical Area #}
  111.                         <li class="lvl1 parent dropdown">
  112.                             <a href="{{ isRoot ? '#technicalArea' : navStartNode~'#technicalArea' }}">{{ 'Layout.Navegation.Technical-Area_translations' | trans }}
  113.                                 <i class="an an-angle-down-l"></i>
  114.                             </a>
  115.                             {% if  currentPath != '/' and currentPath != '/en' %}
  116.                                 <ul class="dropdown">
  117.                                     <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/technical-area/painting-schemes' : 'es/area-tecnica/esquemas-de-pintado') }}" class="site-nav">{{ "Esquemas de pintado" | trans }}</a></li>
  118.                                     <li><a href="#" class="site-nav" id="search-link">{{ "Fichas técnicas y de seguridad" | trans }}</a></li>
  119.                                     <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/technical-area/calculate-square-meters' : 'es/area-tecnica/calcular-metros-cuadrados') }}" class="site-nav">{{ "Calcular metros cuadrados" | trans }}</a></li>
  120.                                     <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/technical-area/how-much-paint-do-I-need' : 'es/area-tecnica/cuanta-pintura-necesito') }}" class="site-nav">{{ "Cuánta pintura necesito?" | trans }}</a></li>
  121.                                 </ul>
  122.                             {% endif %}
  123.                         </li>
  124.                         {# Catalog Area #}
  125.                         <li class="lvl1 parent dropdown">
  126.                             <a href="{{ isRoot ? '#catalog' : navStartNode~'#catalog' }}">{{ 'lbl_Catálogo' | trans }}
  127.                                 <i class="an an-angle-down-l"></i>
  128.                             </a>
  129.                         </li>
  130.                         {% if not is_authenticated %}
  131.                             <li class="lvl1 parent dropdown">
  132.                                 <a href="{{ isRoot ? '#collaborators' : navStartNode~'#collaborators' }}">{{ "layout.navegation.collaborators_translations" | trans}}<i class="an an-angle-down-l"></i></a>
  133.                                 {% if  currentPath != '/' and currentPath != '/en' %}
  134.                                     <ul class="dropdown">
  135.                                         <li>
  136.                                             <a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/point-of-sale' : 'es/puntos-de-venta') }}" class="site-nav">{{ 'home.collaborators.points-of-sale_translations' | trans}}</a>
  137.                                         </li>
  138.                                         <li>
  139.                                             <a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/industry-professionals' : 'es/profesionales-del-sector') }}" class="site-nav">{{ 'home.collaborators.industry-professionals_translations' | trans}}</a>
  140.                                         </li>
  141.                                     </ul>
  142.                                 {% endif %}
  143.                             </li>
  144.                         {% else %}
  146.                             {# Define las rutas para ambos idiomas #}
  147.                             {% set ratesEnRoute = 'rates-view-translated-en' %}
  148.                             {% set ratesEsRoute = 'rates-view-translated-es' %}
  150.                             {# Asigna las rutas según el idioma actual #}
  151.                             {% if currentLocale == 'en' %}
  152.                                 {% set ratesRoute = ratesEnRoute %}
  153.                             {% else %}
  154.                                 {% set ratesRoute = ratesEsRoute %}
  155.                             {% endif %}
  156.                             <li class="lvl1 parent dropdown">
  157.                                 <a href="{{path(ratesRoute)}}">{{ 'lbl_Tarifa' | trans }}<i class="an an-angle-down-l"></i></a>
  158.                             </li>
  159.                         {% endif %}
  160.                         <li class="lvl1 parent dropdown">
  161.                             <a href="{{ isRoot ? '#news' : navStartNode~'#news' }}">{{ 'layout.navbar-desktop.new-arrivals_translations' | trans }}<i class="an an-angle-down-l"></i></a>
  162.                         </li>
  163.                         <li class="lvl1 parent dropdown">
  164.                             <a href="{{ isRoot ? '#contact' : navStartNode~'#contact' }}" class="site-nav">
  165.                                 {{ 'BotonContacto' | trans }}<i class="an an-angle-down-l"></i>
  166.                             </a>
  167.                         </li>
  168.                         {# Gets the events document dinamically with his path to get the data from the editables in it#}
  169.                         {% set documentName = app.request.locale == 'en' ? '/recent-events' : '/eventos-recientes' %}
  170.                         {% set eventDocument = pimcore_document_by_path('/' ~ app.request.locale ~ documentName) %}
  171.                         {% set eventBlock = eventDocument.getEditable('eventBlock') %}
  172.                         {% if is_authenticated and eventBlock is not null and not eventBlock.isEmpty() %}
  173.                             <li class="lvl1 parent dropdown">
  174.                                 {% set eventsPath = app.request.locale == 'en' ? '/en/recent-events' : '/es/eventos-recientes' %}
  175.                                 <a href="{{ eventsPath }}" class="site-nav">
  176.                                     {{ 'Events' | trans }}<i class="an an-angle-down-l"></i>
  177.                                 </a>
  178.                             </li>
  179.                         {% endif %}
  180.                     </ul>
  181.                 </nav>
  182.             </div>
  183.         </div>
  184.     </div>
  185. </div>
  187. <script>
  188.     document.addEventListener("DOMContentLoaded", function() {
  189.         var searchLink = document.getElementById("search-link");
  190.         var searchBox = document.getElementById("search-box");
  192.         var lang = document.documentElement.lang;
  194.         var placeholderText = lang === "en" ? "What product do you want technical information for?" : "¿De qué producto quiere su ficha técnica?";
  196.         var placeholderInterval;
  197.         var placeholderTextIndex = 0;
  198.         var isTyping = false;
  200.         function typePlaceholderText(element, text, interval) {
  201.             placeholderTextIndex = 0;
  202.             clearInterval(placeholderInterval);
  203.             isTyping = true;
  205.             placeholderInterval = setInterval(function() {
  206.                 element.setAttribute("placeholder", text.slice(0, placeholderTextIndex));
  207.                 element.style.color = "red";
  208.                 placeholderTextIndex++;
  209.                 if (placeholderTextIndex > text.length) {
  210.                     clearInterval(placeholderInterval);
  211.                     isTyping = false;
  213.                 }
  214.             }, interval);
  215.         }
  217.         function shakeSearchBox() {
  218.             if (isTyping) {
  219.                 clearInterval(placeholderInterval);
  220.                 isTyping = false;
  221.                 searchBox.style.color = "black";
  222.             }
  224.             searchBox.value = "";
  225.             searchBox.removeAttribute("placeholder");
  226.             searchBox.focus();
  227.             searchBox.classList.add("shake");
  229.             setTimeout(function() {
  230.                 searchBox.classList.remove("shake");
  231.                 typePlaceholderText(searchBox, placeholderText, 100);
  232.             }, 600);
  234.             searchBox.focus();
  235.         }
  237.         searchLink.addEventListener("click", function(event) {
  238.             event.preventDefault();
  239.             shakeSearchBox();
  240.         });
  242.         searchBox.addEventListener("input", function() {
  243.             if (searchBox.getAttribute("placeholder") === placeholderText) {
  244.                 searchBox.value = "";
  245.                 searchBox.removeAttribute("placeholder");
  246.             }
  248.             if (searchBox.value.length > 0) {
  249.                 searchBox.style.setProperty("color", "#000000", "important");
  250.             } else if (!isTyping) {
  251.                 searchBox.style.setProperty("color", "#FF0000", "important");
  252.             }
  253.         });
  255.         searchBox.addEventListener("keydown", function() {
  256.             if (isTyping) {
  257.                 clearInterval(placeholderInterval);
  258.                 isTyping = false;
  259.                 searchBox.removeAttribute("style");
  260.             }
  261.         });
  262.     });
  263. </script>