[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:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user