[FIX] website, web: fix dropdown hidden in mobile menu

Steps to reproduce the bug:
- Modify the website's menu to include only two items: a link to a page
and a dropdown menu.
- Switch to mobile preview.
- Open the "Hamburger" menu.
- Click on the dropdown toggle.
- Bug: The dropdown menu is hidden and requires scrolling the navbar to
see it.

Since commit [1], dynamic positioning of dropdowns within a navbar has
been enabled (before that, Bootstrap disabled it) but this change
introduced this bug.

To fix this, we disable dynamic positioning of the dropdowns when they
are inside a "Hamburger" menu.

[1]: https://github.com/odoo/odoo/commit/8689241f86e2d4ddb4e4510951f92b80e115b914

opw-3493512

closes odoo/odoo#137165

X-original-commit: 55bc21c9503bf3b319d94e10d73bf672385b455c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>

addons/web/static/src/legacy/js/libs/bootstrap.js

@@ -153,10 +153,11 @@ ScrollSpy.prototype._activate = function (target) {
  * Bootstrap disables dynamic dropdown positioning when it is in a navbar. Here
  * we make this patch to activate this dynamic navbar's dropdown positioning
  * which is useful to avoid that the elements of the website sub-menus overflow
- * the page.
+ * the page. Note that when the menu is "hamburger" type, we leave dynamic
+ * positioning disabled.
  */
 Dropdown.prototype._detectNavbar = function () {
-    return false;
+    return this._element.closest(".navbar-collapse.show");
 };
 
 /* Bootstrap modal scrollbar compensation on non-body */

addons/website/static/src/js/content/menu.js

@@ -652,6 +652,51 @@ publicWidget.registry.HeaderMainCollapse = publicWidget.Widget.extend({
     },
 });
 
+publicWidget.registry.navbarDropdown = animations.Animation.extend({
+    selector: "header .navbar",
+    disabledInEditableMode: false,
+    events: {
+        "shown.bs.collapse": "_onCollapseShown",
+        "hidden.bs.collapse": "_onCollapseHidden",
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Updates the Dropdowns to trigger the "_detectNavbar" function from the
+     * Bootstrap Dropdown class. This allows the dropdowns to adapt based on
+     * whether they are located within a hamburger menu. If they are not inside
+     * an "hamburger" style menu, automatic dropdown positioning is enabled
+     * using popper.js.
+     *
+     * @private
+     */
+    _updateDropdowns() {
+        for (const toggleEl of this.el.querySelectorAll(".nav .dropdown-toggle")) {
+            Dropdown.getOrCreateInstance(toggleEl).update();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onCollapseShown() {
+        this._updateDropdowns();
+    },
+    /**
+     * @private
+     */
+    _onCollapseHidden() {
+        this._updateDropdowns();
+    },
+});
+
 export default {
     extraMenuUpdateCallbacks: extraMenuUpdateCallbacks,
 };