templates/bundles/SyliusAdminBundle/Layout/_search.html.twig line 1

Open in your IDE?
  1. <div class="item">
  2.     <form method="get" action="{{ path('sylius_admin_product_index') }}" class="search-form">
  3.         <div class="ui transparent left icon input search-container">
  4.             <input type="text" name="criteria[search][value]" placeholder="{{ 'sylius.ui.search_products'|trans }} ..." class="search-input">
  5.             <i class="search link icon search-toggle"></i>
  6.         </div>
  7.     </form>
  8. </div>
  10. <style>
  11. @media (max-width: 768px) {
  12.     .search-container {
  13.         position: relative;
  14.     }
  16.     .search-input {
  17.         width: 0;
  18.         opacity: 0;
  19.         transition: all 0.3s ease;
  20.         padding-left: 0;
  21.         padding-right: 0;
  22.     }
  24.     .search-container.expanded .search-input {
  25.         width: 200px;
  26.         opacity: 1;
  27.         padding-left: 2.5em;
  28.         padding-right: 1em;
  29.     }
  31.     .search-container.expanded .search-toggle {
  32.         color: #666;
  33.     }
  34. }
  36. @media (min-width: 769px) {
  37.     .search-input {
  38.         width: 100% !important;
  39.         opacity: 1 !important;
  40.         padding-left: 2.5em !important;
  41.         padding-right: 1em !important;
  42.     }
  43. }
  44. </style>
  46. <script>
  47. document.addEventListener('DOMContentLoaded', function() {
  48.     const searchContainer = document.querySelector('.search-container');
  49.     const searchToggle = document.querySelector('.search-toggle');
  50.     const searchInput = document.querySelector('.search-input');
  52.     if (searchToggle && searchContainer) {
  53.         searchToggle.addEventListener('click', function(e) {
  54.             if (window.innerWidth <= 768) {
  55.                 e.preventDefault();
  56.                 searchContainer.classList.toggle('expanded');
  58.                 if (searchContainer.classList.contains('expanded')) {
  59.                     searchInput.focus();
  60.                 }
  61.             }
  62.         });
  64.         // Close search when clicking outside
  65.         document.addEventListener('click', function(e) {
  66.             if (window.innerWidth <= 768) {
  67.                 if (!searchContainer.contains(e.target)) {
  68.                     searchContainer.classList.remove('expanded');
  69.                 }
  70.             }
  71.         });
  73.         // Handle form submission
  74.         const searchForm = document.querySelector('.search-form');
  75.         if (searchForm) {
  76.             searchForm.addEventListener('submit', function(e) {
  77.                 if (window.innerWidth <= 768 && !searchContainer.classList.contains('expanded')) {
  78.                     e.preventDefault();
  79.                     searchContainer.classList.add('expanded');
  80.                     searchInput.focus();
  81.                 }
  82.             });
  83.         }
  84.     }
  85. });
  86. </script>