refactor: dropdown for the sort order working

templates/catalog/_partials/sort-orders.tpl

@@ -22,26 +22,31 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<span class="col-sm-3 col-md-3 hidden-sm-down sort-by">{l s='Sort by:' d='Shop.Theme.Global'}</span>
+<div class="relative flex gap-2 items-center">
-<div class="{if !empty($listing.rendered_facets)}col-sm-9 col-xs-8{else}col-sm-12 col-xs-12{/if} col-md-9 products-sort-order dropdown">
+  <span class="text-base">{l s='Sort by:' d='Shop.Theme.Global'}</span>
-  <button
+  <div class="relative w-48 dropdown group">
-    class="btn-unstyle select-title"
+    <button
-    rel="nofollow"
+      class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"
-    data-toggle="dropdown"
+      type="button"
-    aria-haspopup="true"
+      rel="nofollow"
-    aria-expanded="false">
+      aria-haspopup="true"
-    {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
+      aria-expanded="false">
-    <i class="material-icons float-xs-right">&#xE5C5;</i>
+      {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
-  </button>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-down absolute right-0 top-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <div class="dropdown-menu">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    {foreach from=$listing.sort_orders item=sort_order}
+        <path d="M6 9l6 6l6 -6"></path>
-      <a
+      </svg>
-        rel="nofollow"
+    </button>
-        href="{$sort_order.url}"
+    <div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white">
-        class="select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+      {foreach from=$listing.sort_orders item=sort_order}
-      >
+        <a
-        {$sort_order.label}
+          rel="nofollow"
-      </a>
+          href="{$sort_order.url}"
-    {/foreach}
+          class="px-4 py-1 hover:text-yellow-700 select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
+        >
+          {$sort_order.label}
+        </a>
+      {/foreach}
+    </div>
   </div>
 </div>