From b7a4538c51aacca666920bdd9496ee575ab12e7a Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Thu, 6 Apr 2023 09:44:08 +0000
Subject: [PATCH] [FIX] website: avoid having to scroll to access sub-menu
 after rotation

When a sub-menu needs to be opened in the navbar, it sometimes gets
nested within the navbar itself, making a vertical scrollbar appear
instead of floating outside the navbar, above the top of the page.
This happens if the navbar was opened in small screen sizes using the
hamburger icon, then, after a rotation, the navbar is turned into its
fully expanded version.

This commit hides the hamburger menu if the collapse toggler becomes
`display: none`.

Steps to reproduce:
- Add a sub-menu nested under the "Home" menu.
- Open the developer tools, enable mobile view.
- Select "Surface Pro 7" (Vertical 912x1368 - use "Rotate" if needed).
- Open the menu with the hamburger icon.
- Click on the "Rotate" button.
- Open the sub-menu by clicking on "Home".

=> The menu was displayed within the navbar causing a vertical scrollbar
to appear.

task-3247552

closes odoo/odoo#124046

X-original-commit: 02603d6e9f98488369ff61d31aa7f47e1bd21e6e
Signed-off-by: Colin Louis (loco) <loco@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 .../src/js/content/snippets.animation.js      | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 2316f1138a1..ea84cd953d0 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1146,6 +1146,42 @@ registry.FooterSlideout = publicWidget.Widget.extend({
     },
 });
 
+registry.TopMenuCollapse = publicWidget.Widget.extend({
+    selector: "header #top_menu_collapse",
+
+    /**
+     * @override
+     */
+    async start() {
+        this.throttledResize = throttleForAnimation(() => this._onResize());
+        window.addEventListener("resize", this.throttledResize);
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        window.removeEventListener("resize", this.throttledResize);
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onResize() {
+        if (this.el.classList.contains("show")) {
+            const togglerEl = this.el.closest("nav").querySelector(".navbar-toggler");
+            if (getComputedStyle(togglerEl).display === "none") {
+                this.$el.collapse("hide");
+            }
+        }
+    },
+});
+
 registry.HeaderHamburgerFull = publicWidget.Widget.extend({
     selector: 'header:has(.o_header_hamburger_full_toggler):not(:has(.o_offcanvas_menu_toggler))',
     events: {