From f87cee6d589694b56caef84beb90259db6cf96b0 Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Fri, 31 Mar 2023 13:48:58 +0200
Subject: [PATCH] [IMP] website, *: adapt `sidebar` header

*: website_sale, website_sale_wishlist

This commit improves the layout of the sidebar header.

task-3060986

Part-of: odoo/odoo#119650
---
 .../header_template_sidebar.svg               |  37 +---
 addons/website/static/src/scss/website.scss   |  12 +-
 addons/website/views/snippets/snippets.xml    |   6 +-
 addons/website/views/website_templates.xml    | 183 +++++++++---------
 addons/website_sale/views/templates.xml       |  15 +-
 .../views/website_sale_wishlist_template.xml  |   5 +-
 6 files changed, 107 insertions(+), 151 deletions(-)

diff --git a/addons/website/static/src/img/snippets_options/header_template_sidebar.svg b/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
index f1b7a20214a..5bfea9112b4 100644
--- a/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
+++ b/addons/website/static/src/img/snippets_options/header_template_sidebar.svg
@@ -1,36 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="234" height="60" viewBox="0 0 234 60">
-  <defs>
-    <linearGradient id="linearGradient-1" x1="0%" x2="100%" y1="18.506%" y2="81.494%">
-      <stop offset="0%" stop-color="#00A09D"/>
-      <stop offset="100%" stop-color="#00E2FF"/>
-    </linearGradient>
-    <rect id="path-26" width="63" height="50" x="0" y="5"/>
-  </defs>
-  <g fill="none" fill-rule="evenodd" class="header_template_sidebar">
-    <g class="side_bg_side">
-      <use fill="#000" fill-opacity=".14" xlink:href="#path-26"/>
-      <use fill="url(#linearGradient-1)" fill-opacity=".3" xlink:href="#path-26"/>
-    </g>
-    <g fill="#FFF" fill-rule="nonzero" class="group" transform="translate(10 9)">
-      <path d="M7.676 13v-2.115H3.533V4.41H.88V13h6.797zm4.409.146c.953 0 1.749-.178 2.387-.536a3.613 3.613 0 0 0 1.465-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.387-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.782.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.543 1.465.635.308 1.437.462 2.406.462zm-.088-1.986c-.555 0-.993-.19-1.316-.568-.322-.38-.483-1.002-.483-1.87 0-.874.162-1.501.486-1.88.325-.38.754-.569 1.29-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556zm9.266 1.986c.828 0 1.544-.096 2.148-.29.603-.193 1.298-.557 2.083-1.092V8.102h-4.102v1.787h1.776v.808a4.59 4.59 0 0 1-.926.44 2.78 2.78 0 0 1-.85.129c-.625 0-1.112-.2-1.462-.598-.35-.398-.524-1.063-.524-1.992 0-.875.173-1.515.518-1.92.346-.403.81-.606 1.392-.606.39 0 .712.086.964.258.252.172.43.42.536.744l2.56-.457c-.156-.554-.39-1.012-.7-1.374a2.765 2.765 0 0 0-1.172-.8c-.47-.171-1.18-.257-2.13-.257-.984 0-1.767.138-2.349.416a3.757 3.757 0 0 0-1.7 1.579c-.386.693-.58 1.509-.58 2.446 0 .89.177 1.68.531 2.367a3.569 3.569 0 0 0 1.494 1.553c.643.348 1.474.521 2.493.521zm9.214 0c.953 0 1.749-.178 2.388-.536a3.613 3.613 0 0 0 1.464-1.5c.338-.642.507-1.465.507-2.47 0-1.382-.386-2.457-1.16-3.225-.773-.768-1.875-1.151-3.305-1.151-1.394 0-2.482.39-3.263 1.172-.781.78-1.172 1.873-1.172 3.275 0 1.004.197 1.84.592 2.508.394.668.909 1.156 1.544 1.465.634.308 1.436.462 2.405.462zm-.088-1.986c-.555 0-.993-.19-1.315-.568-.323-.38-.484-1.002-.484-1.87 0-.874.162-1.501.487-1.88.324-.38.753-.569 1.289-.569.558 0 1 .187 1.327.56.326.373.489.964.489 1.772 0 .961-.156 1.627-.469 1.999-.312.37-.754.556-1.324.556z" class="logo"/>
-    </g>
-    <g fill="#FFF" class="group" opacity=".804" transform="translate(10 34)">
-      <g class="link">
-        <rect width="23" height="3" class="rectangle" rx="1"/>
-      </g>
-      <g class="link" transform="translate(0 6)">
-        <rect width="37" height="3" class="rectangle" rx="1"/>
-      </g>
-      <g class="link" transform="translate(0 12)">
-        <rect width="30" height="3" class="rectangle" rx="1"/>
-      </g>
-      <g class="link" transform="translate(0 18)">
-        <rect width="26" height="3" class="rectangle" rx="1"/>
-      </g>
-    </g>
-    <rect width="1" height="51" x="62" y="5" fill="#FFF" class="bar_side" opacity=".5"/>
-    <g fill="#FFF" class="page_content" opacity=".4" transform="translate(63 5)">
-      <rect width="171" height="50" class="rectangle_side"/>
-    </g>
-  </g>
-</svg>
+<svg width="234" height="60" viewBox="0 0 234 60" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".5" d="M0 5h234v50H0z"/><path fill="url(#header_preview_sidebar__a)" d="M0 5h68v50H0z"/><path d="M18.082 20.708v-1.865h-3.708v-5.714H12v7.58l6.082-.001Zm3.945.13c.852 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.889-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.291.33.437.85.437 1.564 0 .848-.14 1.436-.42 1.763-.279.327-.674.491-1.184.491Zm8.291 1.753c.741 0 1.381-.085 1.921-.256.54-.17 1.162-.492 1.864-.964v-3.232h-3.67v1.577h1.589v.714c-.26.16-.539.29-.828.388a2.52 2.52 0 0 1-.76.113c-.56 0-.996-.176-1.309-.527-.312-.352-.469-.938-.469-1.758 0-.772.155-1.336.464-1.693.31-.357.724-.535 1.245-.535.35 0 .637.076.863.227.225.152.385.37.48.657l2.29-.403c-.14-.49-.348-.894-.626-1.213a2.476 2.476 0 0 0-1.049-.705c-.42-.152-1.056-.228-1.905-.228-.881 0-1.582.122-2.103.367-.64.293-1.173.78-1.52 1.393-.346.612-.519 1.332-.519 2.159 0 .786.158 1.482.474 2.089a3.17 3.17 0 0 0 1.337 1.37c.575.306 1.319.46 2.231.46Zm8.244 0c.853 0 1.565-.158 2.136-.473a3.21 3.21 0 0 0 1.31-1.324c.303-.567.454-1.293.454-2.179 0-1.22-.346-2.169-1.038-2.846-.692-.677-1.677-1.016-2.957-1.016-1.247 0-2.22.345-2.92 1.034-.699.69-1.048 1.653-1.048 2.89 0 .886.176 1.624.53 2.213.352.59.813 1.02 1.38 1.292.569.273 1.286.409 2.153.409Zm-.079-1.753c-.496 0-.888-.167-1.177-.501-.288-.335-.432-.884-.432-1.65 0-.772.145-1.325.435-1.66.29-.333.674-.5 1.153-.5.5 0 .896.164 1.188.493.292.33.437.85.437 1.564 0 .848-.14 1.436-.419 1.763-.28.327-.675.491-1.185.491Z" fill="#fff"/><rect x="12" y="28" width="24" height="4" rx="1" fill="#fff"/><rect x="12" y="34" width="15" height="4" rx="1" fill="#fff"/><rect x="12" y="40" width="23" height="4" rx="1" fill="#fff"/><rect x="12" y="46" width="9" height="4" rx="1" fill="#fff"/><defs><linearGradient id="header_preview_sidebar__a" x1="0" y1="5" x2="69.083" y2="6.544" gradientUnits="userSpaceOnUse"><stop stop-color="#357C83"/><stop offset="1" stop-color="#01A09D"/></linearGradient></defs></svg>
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 95d149206ec..df24554f89f 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1121,18 +1121,10 @@ header {
             @if o-website-value('layout') != 'full' {
                 $padding-size: calc(#{$grid-gutter-width} * 2 + #{$padding-size});
             }
-            @if $-hamburger-right {
-                padding-right: $padding-size;
-            } @else {
-                padding-left: $padding-size;
-            }
+            padding-left: $padding-size;
 
             > header {
-                @if $-hamburger-right {
-                    @include o-position-absolute(0, 0, 0, auto);
-                } @else {
-                    @include o-position-absolute(0, auto, 0, 0);
-                }
+                inset: 0 auto 0 0;
                 position: fixed;
                 z-index: $zindex-fixed;
                 display: flex;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 3b1f87f10ee..de754551552 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -995,15 +995,15 @@
             <!-- Generic alignment option controling all the template at once. -->
             <!-- Currently needed to be this way as the SCSS variable controls -->
             <!-- the mobile alignement which is the same for all templates. -->
-            <we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment" data-dependencies="header_default_opt, header_hamburger_opt, header_boxed_opt, header_stretch_opt, header_search_opt, header_sales_one_opt, header_sales_two_opt, header_sales_four_opt">
+            <we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment" data-dependencies="header_default_opt, header_hamburger_opt, header_boxed_opt, header_stretch_opt, header_search_opt, header_sales_one_opt, header_sales_two_opt, header_sales_four_opt, header_sidebar_opt">
                 <we-button data-customize-website-views=""
                            data-customize-website-variable="'left'"
                            data-icon="fa-align-left"/>
-                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_boxed_align_center, website.template_header_stretch_align_center, website.template_header_search_align_center, website.template_header_sales_one_align_center, website.template_header_sales_two_align_center, website.template_header_sales_four_align_center"
+                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_boxed_align_center, website.template_header_stretch_align_center, website.template_header_search_align_center, website.template_header_sales_one_align_center, website.template_header_sales_two_align_center, website.template_header_sales_four_align_center, website.template_header_sidebar_align_center"
                            data-customize-website-variable="'center'"
                            data-icon="fa-align-center"
                            data-dependencies="!header_hamburger_opt"/>
-                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_boxed_align_right, website.template_header_stretch_align_right, website.template_header_search_align_right, website.template_header_sales_one_align_right, website.template_header_sales_two_align_right, website.template_header_sales_four_align_right"
+                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_boxed_align_right, website.template_header_stretch_align_right, website.template_header_search_align_right, website.template_header_sales_one_align_right, website.template_header_sales_two_align_right, website.template_header_sales_four_align_right, website.template_header_sidebar_align_right"
                            data-customize-website-variable="'right'"
                            data-icon="fa-align-right"/>
             </we-select>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 286b7181245..8ecfb11a782 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1255,114 +1255,113 @@
     </xpath>
 </template>
 
+<!-- "Sidebar" template -->
 <template id="template_header_sidebar" inherit_id="website.layout" name="Template Header Sidebar" active="False">
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="o_header_sidebar" separator=" "/>
     </xpath>
     <xpath expr="//header//nav" position="replace">
         <t t-call="website.navbar">
-            <t t-set="_navbar_classes" t-valuef="shadow pb-3"/>
-            <div id="top_menu_container" class="container h-100">
-                <!-- Brand -->
-                <t t-call="website.placeholder_header_brand"/>
-                <!-- Navbar Toggler -->
-                <t t-call="website.navbar_toggler"/>
-                <!-- Navbar Collapse -->
-                <div id="top_menu_collapse" class="collapse navbar-collapse flex-column align-self-stretch align-items-stretch">
-                    <t t-call="website.navbar_nav">
-                        <t t-set="_nav_class" t-valuef="mb-auto"/>
-                        <!-- Menu -->
-                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
-                            <t t-call="website.submenu">
-                                <t t-set="item_class" t-valuef="nav-item"/>
-                                <t t-set="link_class" t-valuef="nav-link"/>
+            <t t-set="_navbar_classes" t-valuef="d-none d-lg-block shadow"/>
+
+            <div id="top_menu_container" class="navbar-nav d-flex flex-column justify-content-between h-100 w-100">
+               <div class="d-flex flex-column w-100 h-100">
+                    <div class="d-flex pb-3">
+                        <!-- Brand -->
+                        <t t-call="website.placeholder_header_brand"/>
+                    </div>
+                    <div class="d-flex flex-column justify-content-between h-100 w-100">
+                        <ul class="navbar-nav p-0">
+                            <!-- Search bar -->
+                            <t t-call="website.placeholder_header_search_box">
+                                <t t-set="_classes" t-valuef="mb-3"/>
+                                <t t-set="_input_classes" t-valuef="rounded-start-pill ps-3 text-bg-light"/>
+                                <t t-set="_submit_classes" t-valuef="rounded-end-pill pe-3 bg-o-color-3"/>
+                                <t t-set="limit" t-valuef="0"/>
                             </t>
-                        </t>
-                        <!-- Language Selector -->
-                        <li class="nav-item ms-lg-1">
+                            <!-- Navbar -->
+                            <li>
+                                <t t-call="website.navbar_nav">
+                                    <t t-set="_no_autohide_menu_mobile" t-valuef="True"/>
+
+                                    <!-- Menu -->
+                                    <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                                        <t t-call="website.submenu">
+                                            <t t-set="item_class" t-valuef="nav-item"/>
+                                            <t t-set="link_class" t-valuef="nav-link"/>
+                                        </t>
+                                    </t>
+                                </t>
+                            </li>
+                            <!-- Text element -->
+                            <t t-call="website.placeholder_header_text_element">
+                                <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast"/>
+                                <t t-set="_link_class" t-valuef="nav-link d-block p-1"/>
+                                <t t-set="_txt_elt_content" t-valuef="phone_mail"/>
+                            </t>
+                            <!-- Social -->
+                            <t t-call="website.header_social_links_no_color">
+                                <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast"/>
+                            </t>
+                        </ul>
+                        <ul class="navbar-nav flex-column gap-2 mt-3 w-100">
+                            <!-- Sign In -->
+                            <t t-call="portal.placeholder_user_sign_in">
+                                <t t-set="_link_class" t-valuef="btn btn-outline-secondary w-100"/>
+                            </t>
+                            <!-- User Dropdown -->
+                            <t t-call="portal.user_dropdown">
+                                <t t-set="_icon" t-value="true"/>
+                                <t t-set="_user_name" t-value="true"/>
+                                <t t-set="_user_name_class" t-valuef="me-auto small"/>
+                                <t t-set="_link_class" t-valuef="btn-outline-secondary d-flex align-items-center border-0 px-2"/>
+                                <t t-set="_icon_class" t-valuef="me-2"/>
+                                <t t-set="_item_class" t-valuef="dropdown dropup"/>
+                                <t t-set="_dropdown_menu_class" t-valuef="w-100"/>
+                            </t>
+                            <!-- Language Selector -->
                             <t t-call="website.placeholder_header_language_selector">
+                                <t t-set="_btn_class" t-valuef="btn-outline-secondary d-flex align-items-center w-100 px-2"/>
+                                <t t-set="_txt_class" t-valuef="me-auto small"/>
+                                <t t-set="_flag_class" t-valuef="me-2"/>
                                 <t t-set="_div_classes" t-valuef="dropup"/>
-                                <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-lg-left"/>
+                                <t t-set="_dropdown_menu_class" t-valuef="w-100"/>
                             </t>
-                        </li>
-                        <!-- Call To Action -->
-                        <li class="nav-item mt-3">
-                            <t t-call="website.placeholder_header_call_to_action"/>
-                        </li>
-                        <li class="nav-item d-lg-none">
-                            <ul class="nav navbar-nav">
-                                <!-- Sign In -->
-                                <t t-call="portal.placeholder_user_sign_in">
-                                    <t t-set="_item_class" t-valuef="nav-item"/>
-                                    <t t-set="_link_class" t-valuef="nav-link"/>
-                                </t>
-                                <!-- User Dropdown -->
-                                <t t-call="portal.user_dropdown">
-                                    <t t-set="_icon" t-value="true"/>
-                                    <t t-set="_user_name" t-value="true"/>
-                                    <t t-set="_item_class" t-valuef="nav-item dropdown me-auto"/>
-                                    <t t-set="_link_class" t-valuef="nav-link"/>
-                                </t>
-                            </ul>
-                        </li>
-                    </t>
-                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_sidebar_1"/>
-                    <ul class="nav navbar-nav d-none d-lg-block">
-                        <!-- Sign In -->
-                        <t t-call="portal.placeholder_user_sign_in">
-                            <t t-set="_item_class" t-valuef="nav-item"/>
-                            <t t-set="_link_class" t-valuef="nav-link"/>
-                        </t>
-                        <!-- User Dropdown -->
-                        <t t-call="portal.user_dropdown">
-                            <t t-set="_icon" t-value="true"/>
-                            <t t-set="_user_name" t-value="true"/>
-                            <t t-set="_item_class" t-valuef="nav-item dropup me-auto"/>
-                            <t t-set="_link_class" t-valuef="nav-link"/>
-                            <t t-set="_dropdown_menu_class" t-valuef="position-absolute"/>
-                        </t>
-                    </ul>
+                            <!-- Call To Action -->
+                            <t t-call="website.header_call_to_action_sidebar"/>
+                        </ul>
+                    </div>
                 </div>
             </div>
         </t>
+        <t t-call="website.template_header_mobile">
+            <t t-set="_txt_elt_content" t-valuef="phone_mail"/>
+            <t t-set="_side" t-valuef="offcanvas-start"/>
+        </t>
     </xpath>
 </template>
 
-<template id="template_header_sidebar_oe_structure_header_sidebar_1" inherit_id="website.template_header_sidebar" name="Template Header Sidebar (oe_structure_header_sidebar_1)">
-    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_sidebar_1']" position="replace">
-        <div class="oe_structure oe_structure_solo" id="oe_structure_header_sidebar_1">
-            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
-                <div class="container">
-                    <!-- Social -->
-                    <div class="s_social_media mt-3 o_not_editable" data-snippet="s_social_media" data-name="Social Media" contenteditable="false">
-                        <h5 class="s_social_media_title d-none" contenteditable="true">Follow us</h5>
-                        <a href="/website/social/facebook" class="s_social_media_facebook" target="_blank">
-                            <i class="fa fa-facebook rounded-circle shadow-sm o_editable_media"/>
-                        </a>
-                        <a href="/website/social/twitter" class="s_social_media_twitter" target="_blank">
-                            <i class="fa fa-twitter rounded-circle shadow-sm o_editable_media"/>
-                        </a>
-                        <a href="/website/social/linkedin" class="s_social_media_linkedin" target="_blank">
-                            <i class="fa fa-linkedin rounded-circle shadow-sm o_editable_media"/>
-                        </a>
-                        <a href="/website/social/instagram" class="s_social_media_instagram" target="_blank">
-                            <i class="fa fa-instagram rounded-circle shadow-sm o_editable_media"/>
-                        </a>
-                    </div>
-                    <!-- Separator -->
-                    <div class="s_hr text-start pt16 pb16" data-name="Separator">
-                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
-                    </div>
-                    <!-- Contact -->
-                    <small><i class="fa fa-envelope fa-fw me-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></small><br/>
-                    <small><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr"><a href="tel:+1(650)555-0111">+1 (650) 555-0111</a></span></small>
-                    <!-- Separator -->
-                    <div class="s_hr text-start pt16 pb16" data-name="Separator">
-                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
-                    </div>
-                </div>
-            </section>
-        </div>
+<template id="template_header_sidebar_align_center" inherit_id="website.template_header_sidebar" active="False">
+    <xpath expr="//t[@t-call='website.navbar_nav']" position="inside">
+        <t t-set="_nav_class" t-valuef="text-center"/>
+    </xpath>
+    <xpath expr="//t[@t-call='website.placeholder_header_text_element']" position="inside">
+        <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast text-center"/>
+    </xpath>
+    <xpath expr="//t[@t-call='website.header_social_links_no_color']" position="inside">
+        <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast text-center"/>
+    </xpath>
+</template>
+
+<template id="template_header_sidebar_align_right" inherit_id="website.template_header_sidebar" active="False">
+    <xpath expr="//t[@t-call='website.navbar_nav']" position="inside">
+        <t t-set="_nav_class" t-valuef="text-end"/>
+    </xpath>
+    <xpath expr="//t[@t-call='website.placeholder_header_text_element']" position="inside">
+        <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast text-end"/>
+    </xpath>
+    <xpath expr="//t[@t-call='website.header_social_links_no_color']" position="inside">
+        <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast text-end"/>
     </xpath>
 </template>
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 92ea420acf9..f327cf25ce2 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -139,13 +139,14 @@
     </template>
 
     <template id="template_header_sidebar" inherit_id="website.template_header_sidebar">
-        <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
-            <t t-call="website_sale.header_cart_link">
-                <t t-set="_icon" t-value="True"/>
-                <t t-set="_text" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item'"/>
-                <t t-set="_link_class" t-value="'nav-link'"/>
-            </t>
+        <xpath expr="//t[@t-call='website.placeholder_header_brand']" position="after">
+            <div class="d-flex ms-auto mb-0">
+                <t t-call="website_sale.header_cart_link">
+                    <t t-set="_icon" t-value="True"/>
+                    <t t-set="_link_class" t-value="'o_navlink_background_hover btn position-relative p-1 rounded-circle text-reset'"/>
+                    <t t-set="_badge_class" t-value="'position-absolute top-0 end-0 rounded-pill mt-n1 me-n1'"/>
+                </t>
+            </div>
         </xpath>
     </template>
 
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 2949b636997..e0d13e3f299 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -166,9 +166,8 @@
         <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
             <t t-call="website_sale_wishlist.header_wishlist_link">
                 <t t-set="_icon" t-value="True"/>
-                <t t-set="_text" t-value="True"/>
-                <t t-set="_item_class" t-value="'nav-item'"/>
-                <t t-set="_link_class" t-value="'nav-link'"/>
+                <t t-set="_link_class" t-value="'o_navlink_background_hover btn position-relative p-1 rounded-circle text-reset'"/>
+                <t t-set="_badge_class" t-value="'position-absolute top-0 end-0 mt-n1 me-n1 rounded-pill'"/>
             </t>
         </xpath>
     </template>