[IMP] website, *: toggle mega menu options when toggling the dropdown

*: web_editor

As the mega menu templates are now displayed as an option of the mega
menu snippet, opening the mega menu dropdown in edit mode will display
the options.

Part of https://github.com/odoo/odoo/pull/71143
task-2502208

Part-of: odoo/odoo#71143

addons/web_editor/static/src/js/editor/snippets.editor.js

@@ -549,6 +549,7 @@ var SnippetEditor = Widget.extend({
         // Show/hide overlay in preview mode or not
         this.$el.toggleClass('oe_active', show);
         this.cover();
+        this.toggleOverlayVisibility(show);
     },
     /**
      * Updates the UI of the editor (+ parent) options and call onFocus/onBlur
@@ -1525,6 +1526,16 @@ var SnippetsMenu = Widget.extend({
     activateCustomTab: function (content) {
         this._updateRightPanelContent({content: content, tab: this.tabs.CUSTOM});
     },
+    /**
+     * Public method to activate a snippet.
+     *
+     * @see this._activateSnippet
+     * @param {jQuery} $snippet
+     * @returns {Promise}
+     */
+    activateSnippet: async function ($snippet) {
+        return this._activateSnippet($snippet);
+    },
 
     //--------------------------------------------------------------------------
     // Private

addons/website/static/src/js/editor/wysiwyg.js

@@ -96,10 +96,7 @@ Wysiwyg.include({
             // Then toggle the clicked one
             toggleDropdown($toggle)
                 .then(dispose)
-                .then($el => {
-                    var isShown = $el.parent().hasClass('show');
-                    this.snippetsMenu.toggleMegaMenuSnippets(isShown);
-                });
+                .then(() => this._toggleMegaMenu($toggle[0]));
         });
 
         // Ensure :blank oe_structure elements are in fact empty as ':blank'
@@ -110,12 +107,7 @@ Wysiwyg.include({
             }
         }
 
-        return this._super.apply(this, arguments).then(() => {
-            // Showing Mega Menu snippets if one dropdown is already opened
-            if (this.$('.o_mega_menu').hasClass('show')) {
-                this.snippetsMenu.toggleMegaMenuSnippets(true);
-            }
-        });
+        return this._super.apply(this, arguments);
     },
     /**
      * @override
@@ -233,32 +225,34 @@ Wysiwyg.include({
             .dropdown({});
         return toggleDropdown($megaMenuToggles, false);
     },
+    /**
+     * Toggles the mega menu.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _toggleMegaMenu: function (toggleEl) {
+        const megaMenuEl = toggleEl.parentElement.querySelector('.o_mega_menu');
+        if (!megaMenuEl || !megaMenuEl.classList.contains('show')) {
+            return this.snippetsMenu.activateSnippet(false);
+        }
+        return this.snippetsMenu.activateSnippet($(megaMenuEl));
+    },
 });
 
 snippetsEditor.SnippetsMenu.include({
     /**
-     * @private
-     * @param {boolean} show
+     * @override
      */
-    toggleMegaMenuSnippets: function (show) {
-        setTimeout(() => this._activateSnippet(false));
-        this._showMegaMenuSnippets = show;
-        this._filterSnippets();
+    init: function () {
+        this._super(...arguments);
+        this._notActivableElementsSelector += ', .o_mega_menu_toggle';
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * @override
-     */
-    _filterSnippets(search) {
-        this._super(...arguments);
-        if (!this._showMegaMenuSnippets) {
-            this.el.querySelector('#snippet_mega_menu').classList.add('d-none');
-        }
-    },
     /**
      * @override
      */