[IMP] website, *: review existing navbar templates and templates system

*: portal, website_sale, website_sale_wishlist

Portal-without-website header is now more basic, without the need of
a collapsed element. It is then entirely replaced when website is
installed with header templates, t-calling all the main parts.

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: qsm-odoo <qsm@odoo.com>

3 files changed, 51 insertions, 31 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index b94b0310e35..68efd1500e4 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1767,14 +1767,6 @@ options.registry.collapse = options.Class.extend({
 });
 
 options.registry.Header = options.Class.extend({
-    /**
-     * @override
-     */
-    async updateUI() {
-        await this._super(...arguments);
-        const isHamburger = this.$('.navbar-toggler').is(':visible');
-        this.$el.find('#hamburger_opt_label').toggleClass('d-none', isHamburger);
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -1793,6 +1785,28 @@ options.registry.Header = options.Class.extend({
         }
         return this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    async _renderOriginalXML($xml) {
+        const uiFragment = await this._super(...arguments);
+
+        const widgets = this._requestUserValueWidgets('header_alignment_opt', 'header_hamburger_type_opt');
+        for (const widget of widgets) {
+            const titleEl = widget.el.querySelector('we-title');
+            const spanEl1 = document.createElement('span');
+            spanEl1.textContent = " (+ ";
+            titleEl.appendChild(spanEl1);
+            const iconEl = document.createElement('i');
+            iconEl.classList.add('fa', 'fa-mobile');
+            titleEl.appendChild(iconEl);
+            const spanEl2 = document.createElement('span');
+            spanEl2.textContent = ")";
+            titleEl.appendChild(spanEl2);
+        }
+
+        return uiFragment;
+    },
 });
 
 const VisibilityPageOptionUpdate = options.Class.extend({
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 4bbe05ecbf4..f0463e8cc26 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -265,7 +265,7 @@ $o-base-website-values-palette: (
     'header-links-style': 'default', // 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom'
     'logo-height': null, // Default to navbar height (see portal)
     'hamburger-type': 'default', // 'default' / 'off-canvas'
-    'hamburger-position': 'right', // 'right' / 'left' / 'center'
+    'hamburger-position': 'left', // 'left' / 'center' / 'right'
 
     'footer-template': 'default',
     'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 47a1c249963..90a090df4f6 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -700,13 +700,16 @@ $-transition-duration: 200ms;
             }
         }
         @if o-website-value('header-template') == 'vertical' {
-            @include media-breakpoint-up(md) {
+            .o_header_centered_logo {
+                display: none;
+            }
+            @include media-breakpoint-up(lg) {
                 .navbar-brand {
-                    font-size: 0px;
+                    font-size: 0;
                     opacity: 0;
 
                     img {
-                        height: 0px;
+                        height: 0;
                     }
                 }
             }
@@ -779,34 +782,20 @@ header {
 
     &:not(.o_header_is_scrolled) {
         $-is-hamburger: o-website-value('header-template') == 'hamburger';
-        $-is-vertical: o-website-value('header-template') == 'vertical';
         @include media-breakpoint-up(md) {
-            @if $-is-hamburger or $-is-vertical {
+            @if $-is-hamburger {
                 #top_menu_container {
                     padding-top: $spacer * 0.5;
                     padding-bottom: $spacer * 0.5;
                 }
             }
-            @if $-is-vertical {
-                .navbar-brand {
-                    margin-bottom: $spacer;
-                }
-            }
         }
     }
 
-    .navbar {
-        flex-direction: if($-hamburger-left, row-reverse, row);
-    }
     #top_menu_container {
         flex-direction: inherit;
     }
-    @if $-hamburger-right {
-        .navbar-brand {
-            margin-right: 0;
-            margin-left: $navbar-padding-x;
-        }
-    } @else if $-hamburger-center {
+    @if $-hamburger-center {
         .collapsing, .show {
             #top_menu {
                 @if not $-off-canvas-hamburger {
@@ -848,6 +837,7 @@ header {
             }
 
             #top_menu {
+                flex: 0 0 auto !important;
                 overflow: auto;
                 flex-wrap: nowrap;
                 @if $-hamburger-center {
@@ -856,6 +846,8 @@ header {
                 } @else {
                     max-width: 560px;
                 }
+                min-width: 250px;
+                margin: 0 !important;
                 background-color: o-color('menu');
                 transition: transform $-transition-duration cubic-bezier(.694, .0482, .335, 1);
 
@@ -903,11 +895,11 @@ header {
             }
         }
         &.collapsing #top_menu {
-            @if o-website-value('hamburger-position') == 'center' {
+            @if $-hamburger-center {
                 transform: translateY(-100%);
-            } @else if o-website-value('hamburger-position') == 'left' {
+            } @else if $-hamburger-left {
                 transform: translateX(-100%);
-            } @else if o-website-value('hamburger-position') == 'right' {
+            } @else if $-hamburger-right {
                 transform: translateX(100%);
             }
         }
@@ -925,6 +917,20 @@ header {
     }
 }
 
+@if o-website-value('header-template') == 'vertical' {
+    header .o_header_centered_logo {
+        order: -1;
+        width: 50%;
+        margin-top: $spacer;
+
+        @include media-breakpoint-up(lg) {
+            order: inherit;
+            width: 40%;
+            margin-bottom: $spacer;
+        }
+    }
+}
+
 // Mega menu
 .o_mega_menu {
     width: 100%;