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

X-original-commit: c3524b1cdc63eae0d30d8f435e8bb9a541c88f06
Related: odoo/design-themes#396
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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,
 };

addons/website/static/src/scss/website.scss

@@ -1115,7 +1115,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;