From 48ae46cb22d8c5e396bf50df8d2691d1cf1afe62 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Thu, 15 Sep 2022 07:41:08 +0000
Subject: [PATCH] [FIX] website: fix language switcher in off-canvas menu

Since this commit [1], the header language switcher has been moved out
of the header navbar. This created a bug, when the off-canvas option of
the navbar is activated, the language switcher is no longer accessible
on mobile.

As this commit is in stable version, the fix is only in Javascript. It
puts the language switcher back in the navbar when the off-canvas menu
is opened.

A specific case with the "hamburger full" header template, where there
is the same bug with the "call to action" button, is also fixed by this
commit.

This commit also fixes display issues in the off-canvas menu.

[1]: https://github.com/odoo/odoo/commit/2a000e33c5a44ddf0a777b43d8266cc413d8e4e2

opw-2964824

closes odoo/odoo#105504

X-original-commit: b89dbb2e18c4ccebcd72e87758b5d3363ed875b3
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/website/static/src/js/content/menu.js |  1 +
 addons/website/static/src/scss/website.scss  | 11 +++
 addons/website/views/website_templates.xml   | 87 ++++++++++----------
 3 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index b2fdce0da73..88653d0263b 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -635,6 +635,7 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
 
 publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
     selector: 'header#top',
+    disabledInEditableMode: false,
     events: {
         'show.bs.collapse #top_menu_collapse': '_onCollapseShow',
         'hidden.bs.collapse #top_menu_collapse': '_onCollapseHidden',
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 069d53b7655..65c6dc4d50b 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -973,6 +973,12 @@ header {
                 } @else {
                     max-width: 560px;
                     text-align: left !important;
+                    // Prevent #top_menu from overflowing the page below the
+                    // maximum width. (e.g. if contains an inline language
+                    // switcher with many elements.)
+                    @media (max-width: 560px) {
+                        max-width: 100%;
+                    }
                 }
                 min-width: 250px;
                 margin: 0 !important;
@@ -1023,6 +1029,11 @@ header {
                     padding-left: .5em;
                     padding-right: .5em;
                 }
+                .js_language_selector .dropdown-toggle {
+                    // Hide the language switcher button because it does not
+                    // make sense to show it if the dropdown is always open.
+                    display: none;
+                }
             }
         }
         &.collapsing #top_menu {
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 2e548280c0a..8b3a99961e7 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -298,11 +298,10 @@
                             <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                         </t>
-                    </t>
-
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="my-auto ms-lg-2"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item my-auto ms-lg-2"/>
+                        </t>
                     </t>
                 </div>
                 <!-- Call To Action -->
@@ -389,10 +388,10 @@
                             <t t-set="_link_class" t-valuef="nav-link"/>
                             <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-start"/>
                         </t>
-                    </t>
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="d-block d-sm-none"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item d-block d-sm-none"/>
+                        </t>
                     </t>
                     <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_3"/>
                 </div>
@@ -529,11 +528,11 @@
                                 <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-3"/>
                                 <t t-set="_link_class" t-valuef="nav-link fw-bold"/>
                             </t>
-                        </t>
-                        <!-- Language Selector -->
-                        <t t-call="website.placeholder_header_language_selector">
-                            <t t-set="_div_classes" t-valuef="d-block d-lg-none mb-2"/>
-                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
+                            <!-- Language Selector -->
+                            <t t-call="website.placeholder_header_language_selector">
+                                <t t-set="_div_classes" t-valuef="nav-item d-block d-lg-none mb-2"/>
+                                <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
+                            </t>
                         </t>
                         <!-- Call To Action -->
                         <t t-call="website.placeholder_header_call_to_action">
@@ -760,11 +759,11 @@
                                 <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
-                    </t>
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="mb-4 mb-lg-0 align-self-lg-center ms-lg-auto"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="float-lg-end"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item mb-4 mb-lg-0 align-self-lg-center ms-lg-auto"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="float-lg-end"/>
+                        </t>
                     </t>
                 </div>
             </div>
@@ -844,10 +843,10 @@
                             <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
-                    </t>
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="my-auto ms-lg-2 align-self-lg-center"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item my-auto ms-lg-2 align-self-lg-center"/>
+                        </t>
                     </t>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
@@ -944,15 +943,19 @@
                                 <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item d-block d-sm-none mb-2"/>
+                            <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
+                        </t>
+                        <!-- Call To Action (mobile) -->
+                        <t t-call="website.placeholder_header_call_to_action">
+                            <t t-set="_div_classes" t-valuef="nav-item d-block d-lg-none"/>
+                        </t>
                     </t>
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="d-block d-sm-none mb-2"/>
-                        <t t-set="_dropdown_menu_class" t-valuef="dropdown-menu-end position-static float-none"/>
-                    </t>
-                    <!-- Call To Action -->
+                    <!-- Call To Action (desktop) -->
                     <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="ms-lg-3"/>
+                        <t t-set="_div_classes" t-valuef="ms-3 d-none d-lg-block"/>
                     </t>
                 </div>
             </t>
@@ -1023,10 +1026,10 @@
                                 <t t-set="link_class" t-valuef="nav-link"/>
                             </t>
                         </t>
-                    </t>
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="ms-lg-1 mb-2 mb-lg-0 align-self-lg-center"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item ms-lg-1 mb-2 mb-lg-0 align-self-lg-center"/>
+                        </t>
                     </t>
                 </div>
             </div>
@@ -1071,10 +1074,10 @@
                             <t t-set="_item_class" t-valuef="nav-item dropdown ms-lg-auto"/>
                             <t t-set="_link_class" t-valuef="nav-link"/>
                         </t>
-                    </t>
-                    <!-- Language Selector -->
-                    <t t-call="website.placeholder_header_language_selector">
-                        <t t-set="_div_classes" t-valuef="ms-lg-2"/>
+                        <!-- Language Selector -->
+                        <t t-call="website.placeholder_header_language_selector">
+                            <t t-set="_div_classes" t-valuef="nav-item ms-lg-2 align-self-lg-center"/>
+                        </t>
                     </t>
                     <!-- Call To Action -->
                     <t t-call="website.placeholder_header_call_to_action">
@@ -1140,10 +1143,10 @@
                             <t t-set="_item_class" t-valuef="nav-item dropdown"/>
                             <t t-set="_link_class" t-valuef="nav-link fw-bold ms-lg-3"/>
                         </t>
-                    </t>
-                    <!-- Call To Action -->
-                    <t t-call="website.placeholder_header_call_to_action">
-                        <t t-set="_div_classes" t-valuef="mx-auto mt-4"/>
+                        <!-- Call To Action -->
+                        <t t-call="website.placeholder_header_call_to_action">
+                            <t t-set="_div_classes" t-valuef="nav-item mt-3 mt-lg-0 ms-lg-3"/>
+                        </t>
                     </t>
                     <!-- Social Icons -->
                     <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_hamburger_full_1"/>