From b607744d8e86c8a2a9d8532c13d1d60325cc8f8a Mon Sep 17 00:00:00 2001
From: Cocographique <nmi@odoo.com>
Date: Fri, 21 Aug 2020 11:12:27 +0000
Subject: [PATCH] [IMP] website, *: add 'hamburger full' header template

*: website_sale, website_sale_wishlist

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

X-original-commit: 0b265a6564133b40e1b3090f736a0af24900188a
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 addons/website/models/theme_models.py         |  1 +
 .../src/js/content/snippets.animation.js      | 19 +++++
 addons/website/static/src/scss/website.scss   | 76 ++++++++++++++++--
 addons/website/views/snippets/snippets.xml    |  5 +-
 addons/website/views/website_templates.xml    | 79 ++++++++++++++++++-
 addons/website_sale/views/templates.xml       | 10 +++
 .../views/website_sale_wishlist_template.xml  | 10 +++
 7 files changed, 193 insertions(+), 7 deletions(-)

diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index a55ef2c9e4e..c1c9ccbdda3 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -193,6 +193,7 @@ class Theme(models.AbstractModel):
         self.disable_view('website.template_header_boxed')
         self.disable_view('website.template_header_centered_logo')
         self.disable_view('website.template_header_image')
+        self.disable_view('website.template_header_hamburger_full')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 7de8fbef029..a68e8555c1d 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -978,6 +978,25 @@ registry.FooterSlideout = publicWidget.Widget.extend({
     },
 });
 
+registry.HeaderHamburgerFull = publicWidget.Widget.extend({
+    selector: 'header:has(.o_header_hamburger_full_toggler):not(:has(.o_offcanvas_menu_toggler))',
+    events: {
+        'click .o_header_hamburger_full_toggler': '_onToggleClick',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onToggleClick() {
+        document.body.classList.add('overflow-hidden');
+        setTimeout(() => $(window).trigger('scroll'), 100);
+    },
+});
+
 return {
     Widget: publicWidget.Widget,
     Animation: Animation,
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index b901ecabb97..0d5fb8a161d 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -823,17 +823,28 @@ header {
 
 @if $-off-canvas-hamburger {
     #top_menu_collapse {
-        flex-direction: if($-hamburger-left, row, row-reverse);
 
         &.collapsing, &.show {
             @include o-position-absolute(0, 0, 0, 0);
             position: fixed;
-            display: flex;
-            align-items: stretch;
             z-index: $zindex-sticky;
             transition: none;
             transform: none;
 
+            &, & > .o_header_collapsed_content_wrapper {
+                // TODO improve: ugly code to reset a potential wrapper
+                display: flex !important;
+                flex-flow: if($-hamburger-left, row, row-reverse) nowrap !important;
+                align-items: stretch !important;
+                justify-content: flex-start !important;
+            }
+            > .o_header_collapsed_content_wrapper {
+                // TODO improve: ugly code to reset a potential wrapper
+                max-width: none !important;
+                padding: 0 !important;
+                margin: 0 !important;
+            }
+
             .o_offcanvas_menu_backdrop {
                 @include o-position-absolute(0, 0, 0, 0);
                 opacity: .2;
@@ -843,12 +854,13 @@ header {
             #top_menu {
                 flex: 0 0 auto !important;
                 overflow: auto;
-                flex-wrap: nowrap;
+                flex-flow: column nowrap !important;
                 @if $-hamburger-center {
                     width: 100%;
                     max-width: none;
                 } @else {
                     max-width: 560px;
+                    text-align: left !important;
                 }
                 min-width: 250px;
                 margin: 0 !important;
@@ -871,6 +883,13 @@ header {
                 .nav-item, .dropdown-menu {
                     text-align: inherit;
                 }
+                .nav-item, .nav-link {
+                    margin: 0 !important;
+                }
+
+                .navbar-toggler {
+                    display: block !important;
+                }
 
                 // Open all dropdowns
                 .dropdown-toggle {
@@ -895,7 +914,7 @@ header {
 
             .o_connected_user header:not(.o_header_is_scrolled) &,
             .o_connected_user header.o_header_affixed & {
-                padding-top: $o-navbar-height;
+                padding-top: $o-navbar-height !important;
             }
         }
         &.collapsing #top_menu {
@@ -997,6 +1016,53 @@ header {
             width: 50%;
         }
     }
+} @else if o-website-value('header-template') == 'hamburger-full' {
+    @if not $-off-canvas-hamburger {
+        @include media-breakpoint-up(md) {
+            #wrapwrap {
+                $o-hamburger-full-navbar-height: $o-theme-navbar-logo-height + ($navbar-padding-y * 2);
+                > header {
+                    .navbar-collapse {
+                        > .container {
+                            height: calc(100vh - #{$o-navbar-height} - #{$o-hamburger-full-navbar-height});
+                            transition: height .3s ease;
+                        }
+                        .nav-link {
+                            padding-right: $nav-link-padding-x;
+                            padding-left: $nav-link-padding-x;
+                        }
+                        .dropdown-menu {
+                            position: absolute;
+                        }
+                    }
+                    &:not(.o_header_affixed) {
+                        position: sticky;
+                        top: 0;
+                        right: 0;
+                        bottom: auto;
+                        left: 0;
+                        z-index: $zindex-fixed;
+                    }
+                    &.o_header_affixed {
+                        transform: none !important;
+                    }
+                }
+                > main {
+                    > :first-child:not(#wrap), #wrap > :first-child {
+                        &::before {
+                            content: "";
+                            display: block;
+                            width: 100%;
+                            margin-top: $o-hamburger-full-navbar-height;
+                        }
+                    }
+                }
+            }
+            #oe_main_menu_navbar ~ #wrapwrap > header {
+                top: $o-navbar-height;
+            }
+        }
+    }
 }
 
 // Mega menu
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index f09a8ec82e2..ed7d7b6ad1e 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -602,6 +602,9 @@
             <we-button data-name="header_image_opt"
                        data-customize-website-views="website.template_header_image"
                        data-customize-website-variable="'image'">Image</we-button>
+            <we-button data-name="header_hamburger_full_opt"
+                       data-customize-website-views="website.template_header_hamburger_full"
+                       data-customize-website-variable="'hamburger-full'">Hamburger Full</we-button>
         </we-select>
 
         <!-- Header Sidebar Template - Options -->
@@ -633,7 +636,7 @@
                        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, website.option_header_off_canvas_template_header_sidebar">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, website.option_header_off_canvas_template_header_hamburger_full">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>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index f3d02bcd1b3..8e6b9e2e4bc 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -1004,6 +1004,80 @@
     </xpath>
 </template>
 
+<template id="template_header_hamburger_full" inherit_id="website.layout" name="Template Header Hambuger Full" 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"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'o_header_hamburger_full_toggler ml-auto'"/>
+                </t>
+            </div>
+            <!-- Navbar Collapse -->
+            <div id="top_menu_collapse" class="collapse navbar-collapse">
+                <div class="o_header_collapsed_content_wrapper container d-flex flex-column align-items-lg-center justify-content-lg-center">
+                    <!-- Menu -->
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'navbar-expand flex-column flex-lg-row text-center'"/>
+                        <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'"/>
+                            <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'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold ml-lg-3'"/>
+                        </t>
+                    </t>
+                    <!-- Social Icons -->
+                    <div class="oe_structure w-100" id="oe_structure_header_hamburger_full_1"/>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_full_oe_structure_header_hamburger_full_1" inherit_id="website.template_header_hamburger_full" name="Template Header Hamburger Full (oe_structure_header_hamburger_full_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_full_1']" position="replace">
+        <div class="oe_structure w-100" id="oe_structure_header_hamburger_full_1">
+            <div class="s_hr pt32 pb32" data-name="Separator">
+                <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--400);"/>
+            </div>
+            <div class="s_share text-center" 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 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/github" class="s_share_github" target="_blank">
+                    <i class="fa fa-1x fa-fw fa-github rounded-circle shadow-sm"/>
+                </a>
+                <a href="/website/social/youtube" class="s_share_youtube" target="_blank">
+                    <i class="fa fa-1x fa-fw fa-youtube 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>
+        </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">
@@ -1039,13 +1113,16 @@
     <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>
 
+<template id="option_header_off_canvas_template_header_hamburger_full" inherit_id="website.template_header_hamburger_full" active="False" priority="32">
+    <xpath expr="//div[@id='oe_structure_header_hamburger_full_1']" position="replace"/>
+</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 db464258b04..2b4ad2164ed 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -193,6 +193,16 @@
         </xpath>
     </template>
 
+    <template id="template_header_hamburger_full" inherit_id="website.template_header_hamburger_full">
+        <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 73f82f90ccc..25f2558a203 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -152,6 +152,16 @@
         </xpath>
     </template>
 
+    <template id="template_header_hamburger_full" inherit_id="website_sale.template_header_hamburger_full">
+        <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-2'"/>
+                <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>