[FIX] web: fix autoMoreMenu with no-hamburger option

On small viewports, and with the "Same as desktop" option enabled on
header, The "autohide menu" adaptation is disabled and overflowing
menu items are visible.

The goal of this commit is to fix this behaviour by keeping the
"autohide" feature enabled on expanded navbar.

task-3261909

closes odoo/odoo#120430

X-original-commit: 4703ae9446a1e36b70aac13e38e8c57de38fb781
Signed-off-by: loco-odoo <loco@odoo.com>
This commit is contained in:
xO-Tx
2023-05-08 11:43:15 +02:00
parent 918a6a524b
commit cc4811ef01
+12 -2
View File
@@ -1,5 +1,7 @@
/** @odoo-module **/
const BREAKPOINT_SIZES = {sm: '575', md: '767', lg: '991', xl: '1199', xxl: '1399'};
/**
* Creates an automatic 'more' dropdown-menu for a set of navbar items.
*
@@ -19,10 +21,18 @@ export async function initAutoMoreMenu(el, options) {
if (!el) {
return;
}
const navbar = el.closest('.navbar');
// Get breakpoint related information from the navbar to correctly handle
// the "auto-hide" on mobile menu.
const [breakpoint = 'md'] = navbar ? Object.keys(BREAKPOINT_SIZES)
.filter(suffix => navbar.classList.contains(`navbar-expand-${suffix}`)) : [];
const isNoHamburgerMenu = !!navbar && navbar.classList.contains('navbar-expand');
options = Object.assign({
unfoldable: 'none',
maxWidth: false,
minSize: '767',
// We cannot use `--breakpoint-xx` properties to get values with BS5.
minSize: BREAKPOINT_SIZES[breakpoint],
images: [],
loadingStyleClasses: [],
}, options || {});
@@ -94,7 +104,7 @@ export async function initAutoMoreMenu(el, options) {
// Ignore invisible/toggleable top menu element & small viewports.
if (!el.getClientRects().length || el.closest('.show')
|| window.matchMedia(`(max-width: ${options.minSize}px)`).matches) {
|| (window.matchMedia(`(max-width: ${options.minSize}px)`).matches && !isNoHamburgerMenu)) {
return _endAutoMoreMenu();
}