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

Open in your IDE?
  1. {% if currentPath == '/es/empresa' or currentPath == '/en/about-us'%}
  2.     {% set isAboutUs = true%}
  3. {% else %}
  4.     {% set isAboutUs = false %}
  5. {%  endif %}
  6. <div class="mobile-nav-wrapper" role="navigation">
  7.     <div id='closeMenu' class="closemobileMenu"><i class="icon an an-times-l pull-right"></i>{{ 'movile.navigation_close_menu' | trans }}</div>
  8.     <ul id="MobileNav" class="mobile-nav">
  9.         <li class="lvl1 bottom-link"><a href="{{ isRoot ? '#sticky-header' : navStartNode~'/' }}">{{ 'home' | trans }}</a></li>
  10.         <!-- Dropdown menu for "Professional Area" -->
  11.         <li class="lvl1 parent dropdown">
  12.             <a href="{{ isRoot ? '#featured-services' : navStartNode~'#featured-services' }}" class="lvl-1">
  13.                 {{ 'layout.footer.information.professional-area_translations' | trans }}
  14.                 <i class="an an-plus-l"></i>
  15.             </a>
  16.             <ul class="dropdown">
  17.                 <li><a href="{{ isAboutUs ? '#company' : navStartNode~'/'~ (app.request.locale == 'en' ? 'about-us' : 'empresa') }}" class="site-nav">{{ 'home.about-us_title_translations' | trans }}</a></li>
  18.                 <li><a href="/{{ app.request.locale == 'en' ? 'en/about-us' : 'es/empresa' }}#technicalAdvice" class="site-nav">{{ 'home.about-us-cards.technical_advice_translations' | trans }}</a></li>
  19.                 <li><a href="/{{ app.request.locale == 'en' ? 'en/about-us' : 'es/empresa' }}#customService" class="site-nav">{{ 'home.about-us-cards.custom_service_translations' | trans }}</a></li>
  20.                 <li><a href="/{{ app.request.locale == 'en' ? 'en/about-us' : 'es/empresa' }}#stockLogisticMobile" class="site-nav">{{ 'stockLogisticMobile' | trans }}</a></li>
  21.                 <li><a href="/{{ app.request.locale == 'en' ? 'en/about-us' : 'es/empresa' }}#trainingMobile" class="site-nav">{{ 'about-us-cards.training'| trans }}</a></li>
  22.             </ul>
  23.         </li>
  25.         <!-- Other menu items -->
  26.         <li class="lvl1 bottom-link"><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/products/default_m1' : 'es/productos/default_m1') }}">{{ 'layout.navbar-desktop.products_translations' | trans }}</a></li>
  27.         <li class="lvl1 parent dropdown">
  28.             <a href="{{ isRoot ? '/#technicalArea' : navStartNode~'/#technicalArea' }}" class="lvl-1">
  29.                 {{ 'Layout.Navegation.Technical-Area_translations' | trans }}
  30.                 <i class="an an-plus-l"></i>
  31.             </a>
  32.             <ul class="dropdown">
  33.                 <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>
  34.                 <li><a href="#" onclick="event.preventDefault()" id="search-link-mobile" class="site-nav">{{ "Fichas técnicas y de seguridad" | trans }}</a></li>
  35.                 <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>
  36.                 <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>
  37.             </ul>
  38.         </li>
  39.         <li class="lvl1 bottom-link"><a href="/#catalog">{{ 'home.catalog.title_translations' | trans }}</a></li>
  40.         <li class="lvl1 bottom-link"><a href="{{path('rates-view')}}">{{ 'lbl_Tarifa' | trans }}</a></li>
  41.         <li class="lvl1 parent dropdown">
  42.             <a href="{{ isRoot ? '/#collaborators' : navStartNode~'/#collaborators' }}" class="lvl-1">
  43.                 {{ 'layout.navegation.collaborators_translations' | trans }}
  44.                 <i class="an an-plus-l"></i>
  45.             </a>
  46.             <ul class="dropdown">
  47.                 <li><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></li>
  48.                 <li><a href="{{ '/' ~ (app.request.locale == 'en' ? 'en/industry-professionals' : 'es/profesionales-del-sector') }}" class="site-nav">{{ 'home.collaborators.industry-professionals_translations' | trans}}</a></li>
  49.             </ul>
  50.         </li>
  51.         <li class="lvl1 bottom-link"><a href="/#news">{{ 'layout.navbar-desktop.new-arrivals_translations' | trans }}</a></li>
  52.         <li class="lvl1 bottom-link"><a href="/{{ app.request.locale }}#contact">{{ 'BotonContacto' | trans }}</a></li>
  53.         {# Gets the events document dinamically with his path to get the data from the editables in it#}
  54.         {% set documentName = app.request.locale == 'en' ? '/recent-events' : '/eventos-recientes' %}
  55.         {% set eventDocument = pimcore_document_by_path('/' ~ app.request.locale ~ documentName) %}
  56.         {% set eventBlock = eventDocument.getEditable('eventBlock') %}
  57.         {% if eventBlock is not null and not eventBlock.isEmpty() %}
  58.                 {% set eventsPath = app.request.locale == 'en' ? '/en/recent-events' : '/es/eventos-recientes' %}
  59.                 <li class="lvl1 bottom-link"><a href="{{ eventsPath }}">{{ 'Events' | trans }}</a></li>
  60.             <li><a href="/myAccount">{{ 'layout.footer.information.my-account_translations' | trans }}</a></li>
  61.             <li><a href="{{ path('account_logout')}}">{{ "Logout" | trans }}</a></li>
  62.         {% else %}
  63.             <li><a href="/account/login">{{ 'home.footer_login_translations' | trans }}</a></li>
  64.             <li><a id="register-btn" href="/{{ app.request.locale }}/#contact-title">{{ "Regístrate" | trans }}</a></li>
  65.         {% endif %}
  66.     </ul>
  67. </div>
  69. <script>
  70.     // JavaScript code to handle the dropdown toggle
  71.     document.addEventListener("DOMContentLoaded", function () {
  72.         const dropdownToggles = document.querySelectorAll(".dropdown-toggle")
  73.         const searchLinkMobile = document.getElementById("search-link-mobile");
  74.         const closeMenu = document.getElementById("closeMenu");
  75.         var searchBox = document.getElementById("search-box");
  76.         var searchBoxMobile = document.getElementById("search-box-mobile");
  77.         var searchBoxMobile = document.getElementById("search-box-mobile");
  79.         var lang = document.documentElement.lang;
  81.         var placeholderText = lang === "en" ? "What product do you want technical information for?" : "¿De qué producto quiere su ficha técnica?";
  83.         var placeholderInterval;
  84.         var placeholderTextIndex = 0;
  85.         var isTyping = false;
  87.         dropdownToggles.forEach(function (toggle) {
  88.             toggle.addEventListener("click", function () {
  89.                 const dropdownMenu = this.nextElementSibling;
  90.                 const icon = this.querySelector(".an");
  91.                 if (dropdownMenu.classList.contains("active")) {
  92.                     dropdownMenu.classList.remove("active");
  93.                     icon.classList.remove("an-minus-l");
  94.                     icon.classList.add("an-plus-l");
  95.                 } else {
  96.                     dropdownMenu.classList.add("active");
  97.                     icon.classList.remove("an-plus-l");
  98.                     icon.classList.add("an-minus-l");
  99.                 }
  100.             });
  101.         });
  103.         function typePlaceholderText(element, text, interval) {
  104.             placeholderTextIndex = 0;
  105.             clearInterval(placeholderInterval);
  106.             isTyping = true;
  108.             placeholderInterval = setInterval(function() {
  109.                 element.setAttribute("placeholder", text.slice(0, placeholderTextIndex));
  110.                 element.style.color = "red";
  111.                 placeholderTextIndex++;
  112.                 if (placeholderTextIndex > text.length) {
  113.                     clearInterval(placeholderInterval);
  114.                     isTyping = false;
  116.                 }
  117.             }, interval);
  118.         }
  120.         function shakeSearchBox() {
  121.             if (isTyping) {
  122.                 clearInterval(placeholderInterval);
  123.                 isTyping = false;
  124.                 searchBox.removeAttribute("style");
  125.                 searchBoxMobile.removeAttribute("style");
  126.             }
  128.             searchBox.value = "";
  129.             searchBox.removeAttribute("placeholder");
  130.             searchBox.focus();
  131.             searchBox.classList.add("shake");
  133.             searchBoxMobile.value = "";
  134.             searchBoxMobile.removeAttribute("placeholder");
  135.             $('#search-popup').addClass("active");
  136.             searchBoxMobile.focus();
  137.             searchBoxMobile.classList.add("shake");
  139.             setTimeout(function() {
  140.                 searchBox.classList.remove("shake");
  141.                 searchBoxMobile.classList.remove("shake");
  142.                 typePlaceholderText(searchBox, placeholderText, 100);
  143.                 typePlaceholderText(searchBoxMobile, placeholderText, 100);
  144.             }, 600);
  146.             searchBox.focus();
  147.             searchBoxMobile.focus();
  148.         }
  150.         searchLinkMobile.addEventListener("click", function(event) {
  151.             event.preventDefault();
  152.             shakeSearchBox();
  153.             closeMenu.click();
  154.         });
  155.     });
  156. </script>