From 2a1aa808e939eeaa3caec6a1a82e19f023f1d010 Mon Sep 17 00:00:00 2001
From: Cocographique <nmi@odoo.com>
Date: Thu, 30 Jul 2020 20:45:58 +0000
Subject: [PATCH] [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

X-original-commit: d3d5983e0a76eb6500e0d3f78f128879b50390e0
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/portal/views/portal_templates.xml      |  33 +-
 .../static/tests/tours/reset_views.js         |   2 +-
 addons/website/models/theme_models.py         |   2 +-
 .../static/src/js/editor/snippets.options.js  |  30 +-
 .../static/src/scss/primary_variables.scss    |   2 +-
 addons/website/static/src/scss/website.scss   |  50 +--
 .../website/static/tests/tours/html_editor.js |   2 +-
 addons/website/views/snippets/snippets.xml    |  38 +-
 addons/website/views/website_templates.xml    | 371 +++++++++++++++---
 addons/website_sale/views/templates.xml       |  41 +-
 .../views/website_sale_wishlist_template.xml  |  41 +-
 11 files changed, 473 insertions(+), 139 deletions(-)

diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 72d8516c2be..f50045d0e88 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -6,28 +6,23 @@
             <attribute name="t-attf-class" add="#{'o_portal' if is_portal else ''}" separator=" "/>
         </xpath>
         <xpath expr="//div[@id='wrapwrap']/header/img" position="replace">
-            <nav class="navbar navbar-expand-md navbar-light bg-light">
-                <div id="top_menu_container" class="container">
+            <nav class="navbar navbar-expand navbar-light bg-light">
+                <div class="container">
                     <a href="/" class="navbar-brand logo">
                         <img t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
                     </a>
-                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top_menu_collapse">
-                        <span class="navbar-toggler-icon o_not_editable"/>
-                    </button>
-                    <div class="collapse navbar-collapse" id="top_menu_collapse">
-                        <ul class="nav navbar-nav ml-auto text-right" id="top_menu">
-                            <t t-call="portal.placeholder_user_sign_in">
-                                <t t-set="_item_class" t-value="'nav-item'"/>
-                                <t t-set="_link_class" t-value="'nav-link'"/>
-                            </t>
-                            <t t-call="portal.user_dropdown">
-                                <t t-set="_user_name" t-value="true"/>
-                                <t t-set="_item_class" t-value="'nav-item dropdown'"/>
-                                <t t-set="_link_class" t-value="'nav-link'"/>
-                                <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
-                            </t>
-                        </ul>
-                    </div>
+                    <ul id="top_menu" class="nav navbar-nav ml-auto">
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                        </t>
+                    </ul>
                 </div>
             </nav>
         </xpath>
diff --git a/addons/test_website/static/tests/tours/reset_views.js b/addons/test_website/static/tests/tours/reset_views.js
index 0c7aa9517ad..0a7ce49e4c4 100644
--- a/addons/test_website/static/tests/tours/reset_views.js
+++ b/addons/test_website/static/tests/tours/reset_views.js
@@ -87,7 +87,7 @@ tour.register('test_reset_page_view_complete_flow_part2', {
             content: "select oe_structure view",
             trigger: '#s2id_ace-view-list',  // use select2 version
             run: function () {
-                var viewId = $('#ace-view-list option:contains("oe_structure")').val();
+                var viewId = $('#ace-view-list option:contains("oe_structure_test_website_page")').val();
                 $('#ace-view-list').val(viewId).trigger('change');
             },
         },
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 3248b837519..ec0baef02ff 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -183,9 +183,9 @@ class Theme(models.AbstractModel):
         self.disable_view('website.option_ripple_effect')
 
         # Reinitialize header templates
+        self.enable_view('website.template_header_default')
         self.disable_view('website.template_header_hamburger')
         self.disable_view('website.template_header_vertical')
-        self.disable_view('website.option_header_hamburger_center_logo')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
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%;
diff --git a/addons/website/static/tests/tours/html_editor.js b/addons/website/static/tests/tours/html_editor.js
index 22742df39e1..e22ded23311 100644
--- a/addons/website/static/tests/tours/html_editor.js
+++ b/addons/website/static/tests/tours/html_editor.js
@@ -46,7 +46,7 @@ tour.register('html_editor_multiple_templates', {
             content: "select oe_structure specific view",
             trigger: 'div.ace_line .ace_xml:contains("somenewcontent")',
             run: function () {
-                var viewId = $('#ace-view-list option:contains("oe_structure")').val();
+                var viewId = $('#ace-view-list option:contains("oe_structure_test_ui")').val();
                 $('#ace-view-list').val(viewId).trigger('change');
             },
         },
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 96a3efa0f04..e63bc6807a1 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -563,8 +563,8 @@
 
         <we-select string="Template" data-variable="header-template" data-reload="/">
             <we-button title="Default"
-                       data-name="header_logo_menu_opt"
-                       data-customize-website-views=""
+                       data-name="header_default_opt"
+                       data-customize-website-views="website.template_header_default"
                        data-customize-website-variable="'default'"
                        data-img="/website/static/src/img/snippets_options/header_template_default.png"/>
             <we-button title="Hamburger menu"
@@ -579,29 +579,33 @@
                        data-img="/website/static/src/img/snippets_options/header_template_vertical.png"/>
         </we-select>
 
-        <we-title id="hamburger_opt_label">Hamburger (Mobile)</we-title>
-        <we-select string="⌙ Type" data-variable="hamburger-type" data-reload="/">
+        <!-- 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 string="⌙ Alignment"
+                   data-name="header_alignment_opt"
+                   data-variable="hamburger-position"
+                   data-reload="/">
+            <we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center" data-customize-website-variable="'center'">Center</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right" data-customize-website-variable="'right'">Right</we-button>
+        </we-select>
+
+        <!-- Generic Hamburger Options (mobile or not) -->
+        <we-select string="⌙ Hamburger Type"
+                   data-name="header_hamburger_type_opt"
+                   data-variable="hamburger-type"
+                   data-reload="/">
             <we-button data-customize-website-variable="'default'"
                        data-customize-website-views="">Default</we-button>
             <we-button data-name="off_canvas_menu_opt"
                        data-customize-website-variable="'off-canvas'"
-                       data-customize-website-views="website.option_header_off_canvas">Off-Canvas</we-button>
+                       data-customize-website-views="website.option_header_off_canvas, website.option_header_off_canvas_template_header_hamburger">Off-Canvas</we-button>
         </we-select>
-        <we-select string="⌙ Position" data-variable="hamburger-position" data-reload="/">
-            <we-button data-customize-website-variable="'right'">Right</we-button>
-            <we-button data-customize-website-variable="'left'">Left</we-button>
-            <we-button data-customize-website-variable="'center'">Center / Full</we-button>
-        </we-select>
-        <we-select string="⌙ Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
+        <we-select string=" ⌙ Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
             <we-button data-customize-website-views="">Text</we-button>
             <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
         </we-select>
-        <we-checkbox string="Center Main Logo"
-                     data-dependencies="header_hamburger_opt"
-                     data-apply-to=".navbar-brand"
-                     data-customize-website-views="website.option_header_hamburger_center_logo"
-                     data-select-class="mx-md-auto"
-                     data-no-preview="true"/>
 
         <we-select id="header_visibilities_list" string="Header Visibility">
             <we-button id="option_header_visibility_standard"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index c50700460c3..9715d0eb941 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -124,27 +124,6 @@
     <xpath expr="//header" position="attributes">
         <attribute name="data-name">Header</attribute>
     </xpath>
-    <xpath expr="//header/nav" position="attributes">
-        <!-- Background now controlled by css configuration, using color combinations -->
-        <attribute name="class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
-    </xpath>
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
-        <t t-call="website.placeholder_header_brand"/>
-    </xpath>
-    <xpath expr="//header//div[@id='top_menu_collapse']" position="attributes">
-        <attribute name="class" separator=" " add="flex-grow-0"/>
-    </xpath>
-    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
-        <attribute name="class" separator=" " add="o_menu_loading" remove="text-right ml-auto"/>
-    </xpath>
-    <xpath expr="//header//ul[@id='top_menu']/t[@t-call='portal.placeholder_user_sign_in']" position="before">
-        <t t-foreach="website.menu_id.child_id" t-as="submenu">
-            <t t-call="website.submenu">
-                <t t-set="item_class" t-value="'nav-item'"/>
-                <t t-set="link_class" t-value="'nav-link'"/>
-            </t>
-        </t>
-    </xpath>
 
     <xpath expr="//footer" position="attributes">
         <attribute name="data-name">Footer</attribute>
@@ -225,41 +204,340 @@
     </xpath>
 </template>
 
+<!-- Navbar -->
+<template id="navbar_toggler" name="Navbar Toggler">
+    <button type="button" t-attf-class="navbar-toggler #{_toggler_class}" data-toggle="collapse" data-target="#top_menu_collapse">
+        <span class="navbar-toggler-icon o_not_editable"/>
+    </button>
+</template>
+
+<!-- Navbar Nav -->
+<template id="navbar_nav" name="Navbar Nav">
+    <ul id="top_menu" t-attf-class="nav navbar-nav o_menu_loading #{_nav_class}">
+        <t t-raw="0"/>
+    </ul>
+</template>
+
 <!-- Header templates -->
-<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
-    <xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
-        <attribute name="class" remove="navbar-expand-md" separator=" "/>
-    </xpath>
-    <xpath expr="//header//button[hasclass('navbar-toggler')]" position="replace">
-        <div class="o_navbar_toggler_container">$0</div>
-    </xpath>
-    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
-        <attribute name="class" separator=" " remove="text-right"/>
+
+<!-- "Default" template -->
+<template id="template_header_default" inherit_id="website.layout" name="Template Header Default" active="True">
+    <xpath expr="//header//nav" position="replace">
+        <nav class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
+            <div id="top_menu_container" class="container justify-content-start justify-content-lg-between">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'mr-4'"/>
+                </t>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'ml-auto'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse order-last order-lg-0">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                    </t>
+                </div>
+                <!-- Button -->
+                <div class="oe_structure" id="oe_structure_header_default_1"/>
+            </div>
+        </nav>
     </xpath>
 </template>
 
+<template id="template_header_default_oe_structure_header_default_1" inherit_id="website.template_header_default" name="Template Header Default (oe_structure_header_default_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_default_1']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_default_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="#" class="btn btn-primary ml-4">Button</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_default_align_center" inherit_id="website.template_header_default" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-value="'mx-auto'"/>
+    </xpath>
+</template>
+
+<template id="template_header_default_align_right" inherit_id="website.template_header_default" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-value="'ml-auto'"/>
+    </xpath>
+</template>
+
+<!-- "Hamburger" template -->
+<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav class="navbar navbar-light o_colored_level o_cc">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'mr-auto'"/>
+                </t>
+                <ul class="nav navbar-nav navbar-expand">
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-value="'nav-item'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_icon" t-value="true"/>
+                        <t t-set="_item_class" t-value="'nav-item dropdown'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_dropdown_menu_class" t-value="'position-absolute dropdown-menu-right'"/>
+                    </t>
+                </ul>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'order-first mr-auto'"/>
+                </t>
+                <!-- Button -->
+                <div class="oe_structure" id="oe_structure_header_hamburger_1"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <div class="oe_structure" id="oe_structure_header_hamburger_2"/>
+                    <t t-call="website.navbar_nav">
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                    <div class="oe_structure" id="oe_structure_header_hamburger_3"/>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_oe_structure_header_hamburger_1" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_1']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_hamburger_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="#" class="btn btn-primary ml-4">Button</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_oe_structure_header_hamburger_2" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_2']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_hamburger_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_oe_structure_header_hamburger_3" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_3)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_3']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_hamburger_3">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <!-- Separator -->
+                        <div class="col-lg-12">
+                            <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                                <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                            </div>
+                        </div>
+                        <!-- Social -->
+                        <div class="col-lg-6 pb16">
+                            <div class="s_share text-left no_icon_color" data-name="Social Media">
+                                <h4 class="s_share_title d-none">Follow us</h4>
+                                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-1x fa-fw fa-facebook"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-1x fa-fw fa-twitter"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-1x fa-fw fa-linkedin"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-1x fa-fw fa-instagram"/>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- Contact -->
+                        <div class="col-lg-4 text-lg-right pb16">
+                            <i class="fa fa-1x fa-fw fa-envelope mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
+                        </div>
+                        <div class="col-lg-2 text-lg-right pb16">
+                            <i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:1 (650) 691-3277">1 (650) 691-3277</a></span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_align_center" inherit_id="website.template_header_hamburger" active="False">
+    <xpath expr="//t[@t-set='_toggler_class']" position="replace">
+        <t t-set="_toggler_class" t-value="'ml-4 mr-auto'"/>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_align_right" inherit_id="website.template_header_hamburger" active="False">
+    <xpath expr="//t[@t-set='_toggler_class']" position="replace">
+        <t t-set="_toggler_class" t-value="'ml-4'"/>
+    </xpath>
+</template>
+
+<!-- "Vertical" template -->
 <template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
-    <xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
-        <attribute name="class" add="flex-md-column" separator=" "/>
+    <xpath expr="//header//nav" position="replace">
+        <nav class="navbar navbar-expand-lg navbar-light flex-lg-column o_colored_level o_cc shadow-sm py-0">
+            <div id="top_menu_container" class="container align-items-center flex-row flex-wrap">
+                <!-- Left -->
+                <div class="o_header_centered_logo">
+                    <div class="oe_structure" id="oe_structure_header_vertical_1"/>
+                </div>
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'m-0'"/>
+                </t>
+                <!-- Right -->
+                <div class="o_header_centered_logo text-right">
+                    <div class="oe_structure" id="oe_structure_header_vertical_2"/>
+                </div>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'my-3'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse flex-wrap">
+                    <div class="oe_structure w-100" id="oe_structure_header_vertical_3"/>
+                    <!-- Nav -->
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'mx-auto mb-3 mb-lg-0'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="True"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-3'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_vertical_oe_structure_header_vertical_1" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_1']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_vertical_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_share no_icon_color" data-name="Social Media">
+                        <h6 class="s_share_title d-none">Follow us</h6>
+                        <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-facebook"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-twitter"/>
+                        </a>
+                        <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-linkedin"/>
+                        </a>
+                        <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-instagram"/>
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_vertical_oe_structure_header_vertical_2" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_2']" position="replace">
+        <div class="oe_structure" id="oe_structure_header_vertical_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <small><i class="fa fa-1x fa-fw fa-phone mr-2"/><a href="tel:1 (650) 691-3277">1 (650) 691-3277</a></small>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_vertical_oe_structure_header_vertical_3" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_3)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_3']" position="replace">
+        <div class="oe_structure w-100" id="oe_structure_header_vertical_3">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_hr w-100 text-left pt0 pb0" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
     </xpath>
 </template>
 
 <!-- Navbar Hamburger Options -->
-<template id="option_header_off_canvas" inherit_id="website.layout" name="Off-Canvas Header" active="False">
-    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
+<template id="option_header_off_canvas" inherit_id="website.navbar_nav" name="Off-Canvas Header" active="False">
+    <xpath expr="//ul[@id='top_menu']" position="attributes">
         <attribute name="class" separator=" " add="position-relative"/>
     </xpath>
-    <xpath expr="//header//ul[@id='top_menu']" position="before">
+    <xpath expr="//ul[@id='top_menu']" position="before">
         <div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
     </xpath>
-    <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="before">
+    <xpath expr="//ul[@id='top_menu']/t" position="before">
         <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0">
             <a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
                 <span class="fa-2x">&#215;</span>
             </a>
         </li>
     </xpath>
-    <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="after">
+    <xpath expr="//ul[@id='top_menu']/t" position="after">
         <li class="o_offcanvas_logo_container order-last navbar-toggler py-4 order-1 mt-auto text-center border-0">
             <a href="/" class="o_offcanvas_logo text-center">My Website</a>
         </li>
@@ -267,13 +545,18 @@
 </template>
 
 <template id="option_header_off_canvas_logo_show" inherit_id="website.option_header_off_canvas" name="Show Logo (Off-Canvas)">
-    <xpath expr="//header//a[hasclass('o_offcanvas_logo')]" position="replace">
+    <xpath expr="//a[hasclass('o_offcanvas_logo')]" position="replace">
         <a href="/" class="o_offcanvas_logo logo">
             <span t-field="website.logo" t-options="{'widget': 'image', 'style': 'max-width: 200px'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name" />
         </a>
     </xpath>
 </template>
 
+<template id="option_header_off_canvas_template_header_hamburger" inherit_id="website.template_header_hamburger" active="False" priority="32">
+    <xpath expr="//div[@id='oe_structure_header_hamburger_2']" position="replace"/>
+    <xpath expr="//div[@id='oe_structure_header_hamburger_3']" position="replace"/>
+</template>
+
 <!-- Header options -->
 <template id="option_layout_hide_header" inherit_id="website.layout" active="False">
     <xpath expr="//header" position="before">
@@ -281,12 +564,6 @@
     </xpath>
 </template>
 
-<template id="option_header_hamburger_center_logo" inherit_id="website.template_header_hamburger" name="Template Header Hamburger Center Logo" active="False">
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="attributes">
-        <attribute name="class" separator=" " add="mx-md-auto"/>
-    </xpath>
-</template>
-
 <template id="placeholder_header_brand" name="Placeholder Header Brand">
     <span id="o_fake_navbar_brand"/><!-- Need a fake element so that the menu is still placed correctly -->
 </template>
@@ -335,9 +612,9 @@
     </xpath>
 </template>
 
-<template id="header_navbar_pills_style" inherit_id="website.layout" name="Navbar Links Style" active="False">
-    <xpath expr="//ul[hasclass('navbar-nav')]" position="attributes">
-        <attribute name="class" add="nav-pills" separator=" "/>
+<template id="header_navbar_pills_style" inherit_id="website.navbar_nav" name="Navbar Links Style" active="False">
+    <xpath expr="//ul[@id='top_menu']" position="attributes">
+        <attribute name="t-attf-class" add="nav-pills" separator=" "/>
     </xpath>
 </template>
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 2ed5c9a5c23..e65a271950c 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -73,17 +73,6 @@
         </xpath>
     </template>
 
-    <template id="layout" inherit_id="website.layout">
-        <xpath expr="//header//ul[@id='top_menu']/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>
-    </template>
-
     <template id="header_cart_link" name="Header Cart Link">
         <t t-set="website_sale_order" t-value="website.sale_get_order()" />
         <t t-set="show_cart" t-value="true"/>
@@ -103,6 +92,36 @@
         </xpath>
     </template>
 
+    <template id="template_header_default" inherit_id="website.template_header_default">
+        <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="_item_class" t-value="'nav-item mx-lg-3'"/>
+                <t t-set="_link_class" t-value="'nav-link'"/>
+            </t>
+        </xpath>
+    </template>
+
+    <template id="template_header_hamburger" inherit_id="website.template_header_hamburger">
+        <xpath expr="//t[@t-foreach='website.menu_id.child_id']" position="after">
+            <t t-call="website_sale.header_cart_link">
+                <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>
+    </template>
+
+    <template id="template_header_vertical" inherit_id="website.template_header_vertical">
+        <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="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_link_class" t-value="'nav-link'"/>
+            </t>
+        </xpath>
+    </template>
+
     <!-- Products Search Bar input-group template -->
     <template id="website_sale_products_search_box" inherit_id="website.website_search_box" primary="True">
         <xpath expr="//input[@name='search']" position="attributes">
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 f7ccb131172..c4b97e8edd4 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -30,17 +30,6 @@
         </xpath>
     </template>
 
-    <template id="layout" inherit_id="website_sale.layout">
-        <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>
-        </xpath>
-    </template>
-
     <template id="header_wishlist_link" name="Header Wishlist Link">
         <t t-set="wishcount" t-value="len(request.env['product.wishlist'].current())"/>
         <t t-set="show_wishes" t-value="True"/>
@@ -62,6 +51,36 @@
         </xpath>
     </template>
 
+    <template id="template_header_default" inherit_id="website_sale.template_header_default">
+        <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="_item_class" t-value="'nav-item mr-lg-3'"/>
+                <t t-set="_link_class" t-value="'nav-link'"/>
+            </t>
+        </xpath>
+    </template>
+
+    <template id="template_header_hamburger" inherit_id="website_sale.template_header_hamburger">
+        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="after">
+            <t t-call="website_sale_wishlist.header_wishlist_link">
+                <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>
+    </template>
+
+    <template id="template_header_vertical" inherit_id="website_sale.template_header_vertical">
+        <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="_item_class" t-value="'nav-item ml-lg-3'"/>
+                <t t-set="_link_class" t-value="'nav-link'"/>
+            </t>
+        </xpath>
+    </template>
+
     <template id="product_wishlist" name="Wishlist Page">
         <t t-call="website.layout">
             <t t-set="additional_title">Shop Wishlist</t>