[IMP] website, *: add 'sidebar' header template

*: website_sale, website_sale_wishlist

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

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

8 files changed, 188 insertions, 3 deletions

diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index ec0baef02ff..0733d6f68a3 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -186,6 +186,7 @@ class Theme(models.AbstractModel):
         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.template_header_sidebar')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index f0463e8cc26..be6fa5fd575 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -260,12 +260,13 @@ $o-base-website-values-palette: (
     'navbar-font': null,
     'buttons-font': null,
 
-    'header-template': 'default', // 'default' / 'hamburger' / 'vertical'
+    'header-template': 'default', // 'default' / 'hamburger' / 'vertical' / 'sidebar'
     'header-font-size': null, // Default to BS (normal font-size)
     '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': 'left', // 'left' / 'center' / 'right'
+    'sidebar-width': 18.75rem, // 300px
 
     'footer-template': 'default',
     'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index a5763900af2..f99c95ea822 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -173,6 +173,13 @@ body.editor_enable.editor_has_snippets {
 }
 
 .editor_enable {
+    @if o-website-value('header-template') == 'sidebar' {
+        #wrapwrap > header {
+            @if o-website-value('hamburger-position') != 'right' {
+                left: $o-we-sidebar-width;
+            }
+        }
+    }
     @if o-website-value('hamburger-type') == 'off-canvas' {
         #top_menu_collapse {
             &.collapsing, &.show {
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 90a090df4f6..b818c72abd8 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -931,6 +931,62 @@ header {
     }
 }
 
+@if o-website-value('header-template') == 'sidebar' {
+    @include media-breakpoint-up(lg) {
+        #wrapwrap {
+            // Hack: padding is used by layout option (boxed, etc) so use
+            // border here to be able to combine the effect.
+            @if $-hamburger-right {
+                border-right: o-website-value('sidebar-width') solid transparent;
+            } @else {
+                border-left: o-website-value('sidebar-width') solid transparent;
+            }
+
+            > header {
+                @if $-hamburger-right {
+                    @include o-position-absolute(0, 0, 0, auto);
+                } @else {
+                    @include o-position-absolute(0, auto, 0, 0);
+                }
+                position: fixed;
+                z-index: $zindex-fixed;
+                display: flex;
+                width: o-website-value('sidebar-width');
+                transform: none !important;
+
+                .navbar {
+                    width: 100%;
+                    align-items: start;
+                    padding: $spacer;
+
+                    .navbar-brand {
+                        max-width: 100%;
+                        padding: 0 0 $spacer 0;
+                    }
+                    #top_menu_container {
+                        flex-direction: column;
+                        align-items: start;
+                        padding: 0;
+                    }
+                    .navbar-nav {
+                        flex-direction: column;
+                    }
+                    .nav-link,
+                    .dropdown-item {
+                        white-space: initial;
+                    }
+                    .dropdown-menu {
+                        position: relative;
+                    }
+                }
+            }
+        }
+        body.o_connected_user #wrapwrap > header {
+            top: $o-navbar-height;
+        }
+    }
+}
+
 // Mega menu
 .o_mega_menu {
     width: 100%;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index e63bc6807a1..374291310bd 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -577,8 +577,19 @@
                        data-customize-website-views="website.template_header_vertical"
                        data-customize-website-variable="'vertical'"
                        data-img="/website/static/src/img/snippets_options/header_template_vertical.png"/>
+            <we-button data-name="header_sidebar_opt"
+                       data-customize-website-views="website.template_header_sidebar, website.no_autohide_menu"
+                       data-customize-website-variable="'sidebar'">Sidebar</we-button>
         </we-select>
 
+        <!-- Header Sidebar Template - Options -->
+        <we-input string="⌙ Width"
+                  data-dependencies="header_sidebar_opt"
+                  data-customize-website-variable="null"
+                  data-variable="sidebar-width"
+                  data-unit="px"
+                  data-save-unit="rem"/>
+
         <!-- 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. -->
@@ -600,14 +611,14 @@
                        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, website.option_header_off_canvas_template_header_hamburger">Off-Canvas</we-button>
+                       data-customize-website-views="website.option_header_off_canvas, website.option_header_off_canvas_template_header_hamburger, website.option_header_off_canvas_template_header_sidebar">Off-Canvas</we-button>
         </we-select>
         <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-select id="header_visibilities_list" string="Header Visibility">
+        <we-select id="header_visibilities_list" string="Header Visibility" data-dependencies="!header_sidebar_opt">
             <we-button id="option_header_visibility_standard"
                        data-name="header_visibility_standard_opt"
                        data-select-class="o_header_standard"
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 9715d0eb941..89aab002200 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -522,6 +522,86 @@
     </xpath>
 </template>
 
+<template id="template_header_sidebar" inherit_id="website.layout" name="Template Header Sidebar" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav class="navbar navbar-expand-lg navbar-light o_colored_level o_cc 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-value="'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-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                    <div class="oe_structure" id="oe_structure_header_sidebar_1"/>
+                    <ul class="nav navbar-nav">
+                        <!-- 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="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropup mr-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_dropdown_menu_class" t-value="'position-absolute'"/>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </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" 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_share mt-3" data-name="Social Media">
+                        <h6 class="s_share_title my-3 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 rounded-circle shadow-sm"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-twitter rounded-circle shadow-sm"/>
+                        </a>
+                        <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-linkedin rounded-circle shadow-sm"/>
+                        </a>
+                        <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                            <i class="fa fa-1x fa-fw fa-instagram rounded-circle shadow-sm"/>
+                        </a>
+                    </div>
+                    <!-- Separator -->
+                    <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-top-color: var(--400);"/>
+                    </div>
+                    <!-- Contact -->
+                    <small><i class="fa fa-envelope fa-fw mr-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 mr-2"/><span class="o_force_ltr"><a href="tel:1 (650) 691-3277">1 (650) 691-3277</a></span></small>
+                    <!-- Separator -->
+                    <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-top-color: var(--400);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
 <!-- Navbar Hamburger Options -->
 <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">
@@ -557,6 +637,13 @@
     <xpath expr="//div[@id='oe_structure_header_hamburger_3']" position="replace"/>
 </template>
 
+
+<template id="option_header_off_canvas_template_header_sidebar" inherit_id="website.template_header_sidebar" active="False" priority="32">
+    <xpath expr="//div[@id='oe_structure_header_sidebar_1']" position="attributes">
+        <attribute name="class" add="d-none d-lg-block" separator=" "/>
+    </xpath>
+</template>
+
 <!-- Header options -->
 <template id="option_layout_hide_header" inherit_id="website.layout" active="False">
     <xpath expr="//header" position="before">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index e65a271950c..778baa754b5 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -122,6 +122,17 @@
         </xpath>
     </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>
+    </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 c4b97e8edd4..a8c79ba8f18 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -81,6 +81,17 @@
         </xpath>
     </template>
 
+    <template id="template_header_sidebar" inherit_id="website_sale.template_header_sidebar">
+        <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="product_wishlist" name="Wishlist Page">
         <t t-call="website.layout">
             <t t-set="additional_title">Shop Wishlist</t>