[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>

1 files changed, 25 insertions, 0 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,
 };