From 4106adbd655f35f5b09cce57c8142156b3ffa120 Mon Sep 17 00:00:00 2001
From: Dinesh Salunke <dineshsalunke@consultbop.com>
Date: Fri, 3 Nov 2023 16:28:34 +0530
Subject: [PATCH] refactor: dropdown for the sort order working

---
 templates/catalog/_partials/sort-orders.tpl | 47 ++++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl
index b9c40e8..6b83551 100644
--- a/templates/catalog/_partials/sort-orders.tpl
+++ b/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="{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">
-  <button
-    class="btn-unstyle select-title"
-    rel="nofollow"
-    data-toggle="dropdown"
-    aria-haspopup="true"
-    aria-expanded="false">
-    {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
-    <i class="material-icons float-xs-right">&#xE5C5;</i>
-  </button>
-  <div class="dropdown-menu">
-    {foreach from=$listing.sort_orders item=sort_order}
-      <a
-        rel="nofollow"
-        href="{$sort_order.url}"
-        class="select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
-      >
-        {$sort_order.label}
-      </a>
-    {/foreach}
+<div class="relative flex gap-2 items-center">
+  <span class="text-base">{l s='Sort by:' d='Shop.Theme.Global'}</span>
+  <div class="relative w-48 dropdown group">
+    <button
+      class="w-full px-4 pr-8 py-1 gap-4 relative text-left h-8 hover:text-yellow-700 dropdown-toggle"
+      type="button"
+      rel="nofollow"
+      aria-haspopup="true"
+      aria-expanded="false">
+      {if isset($listing.sort_selected)}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
+      <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">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M6 9l6 6l6 -6"></path>
+      </svg>
+    </button>
+    <div class="dropdown-menu hidden group-hover:flex absolute top-full left-0 w-full flex-col bg-white">
+      {foreach from=$listing.sort_orders item=sort_order}
+        <a
+          rel="nofollow"
+          href="{$sort_order.url}"
+          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>