refactor: make footer responsive

modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -23,7 +23,30 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div id="block_myaccount_infos" class="flex flex-col gap-4">
+ {*Mobile View*}
+<div id="block_myaccount_infos" class=" md:hidden th-accordion">
+  <div class="flex flex-col gap-4 th-accordion-item">
+    <div class="title clearfix th-accordion-item-trigger flex items-center gap-2" data-target="#footer_account_list" data-toggle="collapse">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon th-accordion-item-trigger-svg icon-tabler stroke-[3px] icon-tabler-chevron-right" width="20" height="20" 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 d="M9 6l6 6l-6 6" /></svg>
+      <span class="font-bold">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
+    </div>
+    <ul class="account-list th-accordion-item-content pl-6" id="footer_account_list">
+      {foreach from=$my_account_urls item=my_account_url}
+          <li class="flex">
+            <a href="{$my_account_url.url}" class="text-sm font-normal leading-6" title="{$my_account_url.title}" rel="nofollow">
+              {$my_account_url["title"]}
+            </a>
+          </li>
+      {/foreach}
+      <a href="{$logout_url}" class="text-sm font-normal leading-6" title="logout" rel="nofollow">
+        Sign out
+      </a>
+    </ul>
+  </div>
+</div>
+
+ {*Desktop View*}
+<div id="block_myaccount_infos" class="flex max-md:hidden flex-col gap-4">
   <div class="title clearfix" data-target="#footer_account_list" data-toggle="collapse">
     <span class="font-bold">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
   </div>

modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -22,9 +22,28 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="flex flex-wrap flex-1 flex-col md:flex-row">
+ 
+ {*Mobile View*}
+<div class="flex flex-wrap flex-1 flex-col md:flex-row th-accordion">
 {foreach $linkBlocks as $linkBlock}
-  <div class="flex flex-col mb-4 md:w-1/3">
+  <div class="flex md:hidden flex-col mb-4 md:w-1/3 th-accordion-item">
+    <div class="font-bold flex gap-2 items-center mb-4 th-accordion-item-trigger">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon th-accordion-item-trigger-svg icon-tabler stroke-[3px] icon-tabler-chevron-right" width="20" height="20" 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 d="M9 6l6 6l-6 6" /></svg>
+      {$linkBlock.title}
+    </div>
+    <ul class="flex flex-col th-accordion-item-content pl-6">
+      {foreach $linkBlock.links as $link}
+        <li class="flex">
+          <a id="{$link.id}-{$linkBlock.id}" class="text-sm font-normal leading-6 {$link.class}" href="{$link.url}" title="{$link.description}" {if !empty($link.target)} target="{$link.target}" {/if}>
+            {$link.title}
+          </a>
+        </li>
+      {/foreach}
+    </ul>
+  </div>
+
+ {*Desktop View*}
+  <div class="flex max-md:hidden flex-col mb-4 md:w-1/3">
     <div class="font-bold mb-4">
       {$linkBlock.title}
     </div>

templates/_partials/footer.tpl

@@ -29,7 +29,7 @@
 </div>
 <div class="container mx-auto flex flex-col gap-8">
     <div class="flex flex-col lg:flex-row gap-8">
-      <div class="w-48 flex flex-row justify-center items-center">
+      <div class="w-48 max-sm:hidden flex flex-row justify-center items-center">
           <a class="w-24 h-24" href="{$urls.base_url}">
             <img class="logo w-full aspect-square object-fit" src="{$shop.logo}" alt="{$shop.name}">
           </a>