Header CLS fixes, reduced styles and classes complexity

modules/ps_contactinfo/ps_contactinfo.tpl

@@ -5,9 +5,9 @@
 
 <div class="footer__block block-contact col-md-6 col-lg-3">
 
-  <p class="footer__block__title hidden-on-mobile">{l s='Store information' d='Shop.Theme.Global'}</p>
+  <p class="footer__block__title d-none d-md-flex">{l s='Store information' d='Shop.Theme.Global'}</p>
 
-  <div class="footer__block__toggle hidden-on-desktop collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
+  <div class="footer__block__toggle d-md-none collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Store information' d='Shop.Theme.Global'}</span>
     <i class="material-icons">arrow_drop_down</i>
   </div>

modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -4,13 +4,13 @@
  *}
 
 <div id="block-myaccount-infos" class="footer__block col-md-6 col-lg-3">
-  <p class="footer__block__title hidden-on-mobile">
+  <p class="footer__block__title d-none d-md-flex">
     <a href="{$urls.pages.my_account}" rel="nofollow">
       {l s='Your account' d='Shop.Theme.Customeraccount'}
     </a>
   </p>
 
-  <div class="footer__block__toggle hidden-on-desktop collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
+  <div class="footer__block__toggle d-md-none collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <i class="material-icons">arrow_drop_down</i>
   </div>

modules/ps_customersignin/ps_customersignin.tpl

@@ -6,10 +6,16 @@
 <div id="_desktop_user_info">
   <div class="user-info">
     {if $customer.is_logged}
-      <div class="dropdown">
-        <button class="dropdown-toggle btn btn-link btn-with-icon" type="button" id="userMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <i class="material-icons">&#xE7FD;</i>
-          <span class="user-info__name">{$customerName|truncate:22:"..":true}</span>
+      <div class="dropdown header-block">
+        <button
+          class="dropdown-toggle header-block__action-btn"
+          type="button"
+          id="userMenuButton"
+          data-bs-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false">
+          <i class="material-icons header-block__icon">&#xE7FD;</i>
+          <span class="header-block__title">{$customerName|truncate:22:"..":true}</span>
         </button>
 
         <div class="dropdown-menu dropdown-menu-start" aria-labelledby="userMenuButton">
@@ -65,16 +71,17 @@
         </div>
       </div>
     {else}
-      <a 
-        href="{$urls.pages.authentication}?back={$urls.current_url|urlencode}"
-        title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
-        class="btn"
-        rel="nofollow"
-        role="button"
-      >
-        <i class="material-icons">&#xE7FD;</i>
-        <span class="d-none d-md-inline">{l s='Sign in' d='Shop.Theme.Actions'}</span>
-      </a>
+      <div class="header-block">
+        <a
+          href="{$urls.pages.authentication}?back={$urls.current_url|urlencode}"
+          title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
+          class="header-block__action-btn"
+          rel="nofollow"
+          role="button">
+          <i class="material-icons header-block__icon">&#xE7FD;</i>
+          <span class="d-none d-md-inline header-block__title">{l s='Sign in' d='Shop.Theme.Actions'}</span>
+        </a>
+      </div>
     {/if}
   </div>
 </div>

modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl

@@ -5,9 +5,9 @@
 
 <div class="footer__block col-md-6 col-lg-3">
 
-  <h3 class="footer__block__title hidden-on-mobile">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
+  <h3 class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
 
-  <div class="footer__block__toggle hidden-on-desktop collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
+  <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
     <span class="footer__block__title">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>
     <i class="material-icons">arrow_drop_down</i>
   </div>

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

@@ -6,9 +6,9 @@
 {foreach $linkBlocks as $linkBlock}
   <div class="footer__block col-md-6 col-lg-3">
 
-    <p class="footer__block__title hidden-on-mobile">{$linkBlock.title}</p>
+    <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle hidden-on-desktop collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
+    <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
       <span class="footer__block__title">{$linkBlock.title}</span>
       <i class="material-icons">arrow_drop_down</i>
     </div>

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

@@ -5,9 +5,9 @@
 {foreach $linkBlocks as $linkBlock}
   <div class="footer__block col-md-6 col-lg-3">
 
-    <p class="footer__block__title hidden-on-mobile">{$linkBlock.title}</p>
+    <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle hidden-on-desktop collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
+    <div class="footer__block__toggle d-md-none collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
       <span class="footer__block__title">{$linkBlock.title}</span>
       <i class="material-icons">arrow_drop_down</i>
     </div>

modules/ps_mainmenu/ps_mainmenu.tpl

@@ -13,7 +13,7 @@
         {if $depth > 1 && $node.children|count}
           <div class="dropdown dropend">
         {/if}
-          <a 
+          <a
             class="main-menu__tree__link{if $node.children|count} dropdown-toggle{/if}{if $depth > 0} dropdown-item{/if}"
             href="{$node.url}"
             data-depth="{$depth}"
@@ -63,11 +63,11 @@
           <li class="main-menu__title h5">{$parent.label}</li>
         {/if}
         {foreach from=$nodes item=node}
-          <li 
+          <li
             class="{$node.type}{if $node.current} current{/if}{if $node.children|count} menu--childrens{/if}"
             id="{$node.page_identifier}"
           >
-            <a 
+            <a
               class="{if $depth>= 0}menu__link{/if}"
               href="{$node.url}"
               data-depth="{$depth}"
@@ -94,34 +94,38 @@
       </ul>
     </nav>
     {foreach from=$children item=child}
-      {mobileMenu 
-        nodes=$child.children 
-        depth=$child.children[0].depth 
-        parent=$child backTitle=$child.parent.label 
+      {mobileMenu
+        nodes=$child.children
+        depth=$child.children[0].depth
+        parent=$child backTitle=$child.parent.label
         expandId=$child.expandId
       }
     {/foreach}
   {/if}
 {/function}
 
-<div id="_desktop_menu" class="main-menu main-menu--desktop order-0 order-xl-1">
+<div class="main-menu col-xl col-auto">
   <div class="d-none d-xl-block position-static js-menu-desktop">
     {desktopMenu nodes=$menu.children}
   </div>
-  <button
-    class="main-menu__toggler btn btn-unstyle d-xl-none me-2" 
-    type="button" 
-    data-bs-toggle="offcanvas"
-    data-bs-target="#mobileMenu"
-    aria-controls="mobileMenu"
-  >
-    <i class="material-icons">menu</i>
-  </button>
+
+  <div class="header-block d-xl-none">
+    <a
+      class="header-block__action-btn"
+      href="#"
+      role="button"
+      data-bs-toggle="offcanvas"
+      data-bs-target="#mobileMenu"
+      aria-controls="mobileMenu"
+    >
+      <span class="material-icons header-block__icon">menu</span>
+    </a>
+  </div>
 </div>
 
 <div
-  class="main-menu__offcanvas offcanvas offcanvas-start js-menu-canvas" 
-  tabindex="-1" 
+  class="main-menu__offcanvas offcanvas offcanvas-start js-menu-canvas"
+  tabindex="-1"
   id="mobileMenu"
   aria-labelledby="mobileMenuLabel"
 >

modules/ps_searchbar/ps_searchbar.tpl

@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div id="_desktop_search" class="order-2 ms-auto">
+<div id="_desktop_search" class="order-2 ms-auto col-auto d-none d-md-flex">
   <div id="search_widget" class="search-widgets js-search-widget" data-search-controller-url="{$search_controller_url}">
     <form method="get" action="{$search_controller_url}">
       <input type="hidden" name="controller" value="search">

modules/ps_shoppingcart/ps_shoppingcart.tpl

@@ -3,15 +3,21 @@
  * file that was distributed with this source code.
  *}
 <div id="_desktop_cart">
-  <div class="blockcart cart-preview {if $cart.products_count> 0}active{else}inactive{/if}" data-refresh-url="{$refresh_url}">
+  <div class="header-block blockcart cart-preview {if $cart.products_count> 0}header-block--active{else}inactive{/if}" data-refresh-url="{$refresh_url}">
     {if $cart.products_count> 0}
-      <a rel="nofollow" href="{$cart_url}">
+      <a class="header-block__action-btn" rel="nofollow" href="{$cart_url}">
+    {else}
+      <span class="header-block__action-btn">
     {/if}
-      <i class="material-icons shopping-cart">shopping_cart</i>
-      <span class="hidden-on-mobile">{l s='Cart' d='Shop.Theme.Checkout'}</span>
-      <span class="cart-products-count">{$cart.products_count}</span>
+
+    <i class="material-icons header-block__icon">shopping_cart</i>
+    <span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
+    <span class="header-block__badge">{$cart.products_count}</span>
+
     {if $cart.products_count> 0}
       </a>
+    {else}
+      </span>
     {/if}
   </div>
 </div>

src/scss/abstract/variables/prestashop/_header.scss

@@ -4,3 +4,8 @@ $header-top-border-bottom: 1px solid var(--bs-gray-200);
 $header-bottom-border-bottom: $header-top-border-bottom;
 $header-color: var(--bs-gray-800);
 $header-top-color: $header-color;
+
+$header-block-spacing-x: 0.25rem;
+$header-block-spacing-y: 0.75rem;
+$header-block-spacing-lg-x: $btn-padding-x;
+$header-block-spacing-lg-y: $btn-padding-y;

src/scss/core/components/_mobile-menu.scss

@@ -95,19 +95,6 @@ $component-name: main-menu;
     margin-bottom: 0;
   }
 
-  &__toggler {
-    display: flex;
-    padding: 1rem;
-
-    @include media-breakpoint-down(md) {
-      padding: 0.75rem;
-    }
-
-    i {
-      color: var(--bs-gray-700);
-    }
-  }
-
   &__back-button .btn {
     display: flex;
     align-items: center;

src/scss/core/components/_search.scss

@@ -56,14 +56,6 @@ $component-name: search;
     }
   }
 
-  &__mobile__toggler {
-    color: var(--bs-gray-700);
-
-    @include media-breakpoint-down(md) {
-      padding: 0.5rem 0.375rem;
-    }
-  }
-
   &__container {
     width: calc(100% - 0.5rem);
   }

src/scss/core/layout/_header-bottom.scss

@@ -0,0 +1,9 @@
+$component-name: header-bottom;
+
+.#{$component-name} {
+  &__row {
+    @include media-breakpoint-up(md) {
+      min-height: 4rem;
+    }
+  }
+}

src/scss/core/layout/_header-top.scss

@@ -0,0 +1,42 @@
+$component-name: header-top;
+
+.#{$component-name} {
+  background-color: var(--header-top-bg);
+
+  a {
+    color: var(--header-top-color);
+  }
+
+  &__right {
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+  }
+
+  &__right,
+  &__left {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .form-select {
+    padding-right: 1.5rem;
+    background-color: var(--header-top-bg);
+    background-position: right 0.12rem center;
+    border: none;
+
+    option {
+      text-align: right;
+    }
+  }
+
+  &-desktop {
+    padding: 0.25rem 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    .container {
+      padding: 0;
+    }
+  }
+}