[FIX] website: allow transparent menu to work with hamburger templates

For those templates, the transparent option was broken at some point:
we have to detect the hamburger is opened so that it is not transparent
anymore when opened.

Part of https://github.com/odoo/odoo/pull/59349
task-2327741

closes odoo/odoo#59458

Related: odoo/design-themes#395
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 26 insertions, 1 deletions

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index c30ad571d04..4d5cbfa1f4c 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -608,6 +608,31 @@ publicWidget.registry.hoverableDropdown = animations.Animation.extend({
     },
 });
 
+publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
+    selector: 'header#top',
+    events: {
+        'show.bs.collapse #top_menu_collapse': '_onCollapseShow',
+        'hidden.bs.collapse #top_menu_collapse': '_onCollapseHidden',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onCollapseShow() {
+        this.el.classList.add('o_top_menu_collapse_shown');
+    },
+    /**
+     * @private
+     */
+    _onCollapseHidden() {
+        this.el.classList.remove('o_top_menu_collapse_shown');
+    },
+});
+
 return {
     extraMenuUpdateCallbacks: extraMenuUpdateCallbacks,
 };
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index c885f09e136..c6036cb9564 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1110,7 +1110,7 @@ header {
 }
 
 #wrapwrap.o_header_overlay {
-    > header:not(.o_header_affixed) {
+    > header:not(.o_header_affixed):not(.o_top_menu_collapse_shown) {
         @include o-position-absolute(0, 0, auto, 0);
         z-index: 1000;