[FIX] web, website: fix initAutoMoreMenu on user navbar

The current code in 'initAutoMoreMenu' doesn't work properly
on navbar after the update on dropdown in [1]. Small tweaks
were added in this commit to fix that.

[1]: 84715436d87bb05b421bc9ccaacda67d07571690

task-2618929

X-original-commit: 29b9280c44534d2f210dbcea83e0049365949f48
Part-of: odoo/odoo#78959

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');
 

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);
             },