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