From cc4811ef01726424302df6bf0e162f1bcbf7a698 Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Thu, 4 May 2023 13:41:09 +0000 Subject: [PATCH] [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 --- addons/web/static/src/legacy/js/core/menu.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/addons/web/static/src/legacy/js/core/menu.js b/addons/web/static/src/legacy/js/core/menu.js index 8dde15aec47..f77de7d9fff 100644 --- a/addons/web/static/src/legacy/js/core/menu.js +++ b/addons/web/static/src/legacy/js/core/menu.js @@ -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(); }