diff --git a/addons/web/static/src/legacy/js/core/menu.js b/addons/web/static/src/legacy/js/core/menu.js index 5c2a996e7f3..a03479ec2d9 100644 --- a/addons/web/static/src/legacy/js/core/menu.js +++ b/addons/web/static/src/legacy/js/core/menu.js @@ -28,7 +28,8 @@ export async function initAutoMoreMenu(el, options) { }, options || {}); const isUserNavbar = el.parentElement.classList.contains('o_main_navbar'); - const dropdownSubMenuClasses = ['show', 'border', 'position-static']; + const dropdownSubMenuClasses = ['show', 'border-0', 'position-static']; + const dropdownToggleClasses = ['h-auto', 'py-2', 'text-secondary']; var autoMarginLeftRegex = /\bm[lx]?(?:-(?:sm|md|lg|xl))?-auto\b/; var autoMarginRightRegex = /\bm[rx]?(?:-(?:sm|md|lg|xl))?-auto\b/; var extraItemsToggle = null; @@ -63,9 +64,13 @@ export async function initAutoMoreMenu(el, options) { } else { item.classList.remove('dropdown-item'); const dropdownSubMenu = item.querySelector('.dropdown-menu'); + const dropdownSubMenuButton = item.querySelector('.dropdown-toggle'); if (dropdownSubMenu) { dropdownSubMenu.classList.remove(...dropdownSubMenuClasses); } + if (dropdownSubMenuButton) { + dropdownSubMenuButton.classList.remove(...dropdownToggleClasses); + } } el.insertBefore(item, extraItemsToggle); }); @@ -127,10 +132,14 @@ export async function initAutoMoreMenu(el, options) { navLink.classList.toggle('active', el.classList.contains('active')); } else { const dropdownSubMenu = el.querySelector('.dropdown-menu'); - el.classList.add('dropdown-item'); + const dropdownSubMenuButton = el.querySelector('.dropdown-toggle'); + el.classList.add('dropdown-item', 'p-0'); if (dropdownSubMenu) { dropdownSubMenu.classList.add(...dropdownSubMenuClasses); } + if (dropdownSubMenuButton) { + dropdownSubMenuButton.classList.add(...dropdownToggleClasses); + } } dropdownMenu.appendChild(el); }); @@ -152,8 +161,8 @@ export async function initAutoMoreMenu(el, options) { } function _addExtraItemsButton(target) { - let dropdownMenu = document.createElement('ul'); - extraItemsToggle = document.createElement('li'); + let dropdownMenu = document.createElement('div'); + extraItemsToggle = dropdownMenu.cloneNode(); const extraItemsToggleIcon = document.createElement('i'); const extraItemsToggleLink = document.createElement('a'); diff --git a/addons/website/static/src/js/menu/navbar.js b/addons/website/static/src/js/menu/navbar.js index b7e6a87b5a7..c03e621d20c 100644 --- a/addons/website/static/src/js/menu/navbar.js +++ b/addons/website/static/src/js/menu/navbar.js @@ -40,13 +40,13 @@ var WebsiteNavbar = publicWidget.RootWidget.extend({ */ start: function () { var self = this; - initAutoMoreMenu(this.el.querySelector('ul.o_menu_sections'), { + initAutoMoreMenu(this.el.querySelector('.o_menu_sections'), { maxWidth: function () { // The navbar contains different elements in community and // enterprise, so we check for both of them here only return self.$el.width() - (self.$('.o_menu_systray').outerWidth(true) || 0) - - (self.$('ul#oe_applications').outerWidth(true) || 0) + - (self.$('#oe_applications').outerWidth(true) || 0) - (self.$('.o_menu_toggle').outerWidth(true) || 0) - (self.$('.o_menu_brand').outerWidth(true) || 0); },