[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>
This commit is contained in:
Benoit Socias
2023-06-07 12:02:17 +02:00
parent be7bcdaf7e
commit b7a4538c51
@@ -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: {