[FIX] web: allow any levels in navbar menus

In 14.0 the menu items in the navbar sections menu could have any level.
Since the webclient refactoring landed in 15.0 0573acae this feature has
been unintentionnally limited to two levels.
More sub menus would simply not be displayed.

**Before this commit**
- Have a menu item with the following path:
  `App/Menu/Group/Sub-group/Item`
- The `Sub-group` is displayed as an item. It is clickable but nothing happens.
- The `Item` is not displayed.

**After this commit**
Works properly as it should. See screenshots on the PR description.

closes odoo/odoo#121039

Signed-off-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>

addons/web/static/src/legacy/scss/navbar.scss

@@ -104,6 +104,14 @@
       @include border-top-radius(0);
     }
 
+    .dropdown-menu_group {
+      margin-top: 0;
+    }
+
+    .dropdown-item + .dropdown-header:not(.o_more_dropdown_section_group) {
+      margin-top: .3em;
+    }
+
     .o_dropdown_menu_group_entry.dropdown-item {
       padding-left: $o-dropdown-hpadding * 1.5;
 

addons/web/static/src/webclient/navbar/navbar.xml

@@ -97,6 +97,7 @@
             </t>
             <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
               <t t-set="items" t-value="section.childrenTree" />
+              <t t-set="decalage" t-value="20" />
             </t>
           </MenuDropdown>
         </t>
@@ -113,26 +114,24 @@
   </t>
 
   <t t-name="web.NavBar.SectionsMenu.Dropdown.MenuSlot" owl="1">
+    <t t-set="style" t-value="`padding-left: ${decalage}px;`" />
     <t t-foreach="items" t-as="item" t-key="item.id">
       <MenuItem
         t-if="!item.childrenTree.length"
         payload="item"
         href="getMenuItemHref(item)"
         class="dropdown-item"
+        t-att-class="{ o_dropdown_menu_group_entry: decalage gt 20 }"
+        t-att-style="style"
         t-esc="item.name" 
       />
 
       <t t-else="">
-        <div class="dropdown-menu_group dropdown-header" t-esc="item.name" />
-        <MenuItem
-          t-foreach="item.childrenTree"
-          t-as="subItem"
-          t-key="subItem.id"
-          class="o_dropdown_menu_group_entry dropdown-item"
-          payload="subItem"
-          href="getMenuItemHref(subItem)"
-          t-esc="subItem.name"
-        />
+        <div class="dropdown-menu_group dropdown-header" t-att-style="style" t-esc="item.name" />
+        <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
+          <t t-set="items" t-value="item.childrenTree" />
+          <t t-set="decalage" t-value="decalage + 12" />
+        </t>
       </t>
     </t>
   </t>
@@ -159,6 +158,7 @@
           />
           <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
             <t t-set="items" t-value="section.childrenTree" />
+            <t t-set="decalage" t-value="20" />
           </t>
         </t>
       </t>

addons/web/static/tests/webclient/navbar_tests.js

@@ -9,7 +9,14 @@ import { actionService } from "@web/webclient/actions/action_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { NavBar } from "@web/webclient/navbar/navbar";
 import { clearRegistryWithCleanup, makeTestEnv } from "../helpers/mock_env";
-import { click, getFixture, nextTick, patchWithCleanup, makeDeferred, mockTimeout } from "../helpers/utils";
+import {
+    click,
+    getFixture,
+    nextTick,
+    patchWithCleanup,
+    makeDeferred,
+    mockTimeout,
+} from "../helpers/utils";
 
 const { Component, mount, tags } = owl;
 const { xml } = tags;
@@ -81,6 +88,44 @@ QUnit.test("href attribute on apps menu items", async (assert) => {
     navbar.destroy();
 });
 
+QUnit.test("many sublevels in app menu items", async (assert) => {
+    baseConfig.serverData.menus = {
+        root: { id: "root", children: [1], name: "root", appID: "root" },
+        1: { id: 1, children: [2], name: "My app", appID: 1 },
+        2: { id: 2, children: [3], name: "My menu", appID: 1 },
+        3: { id: 3, children: [4], name: "My submenu 1", appID: 1 },
+        4: { id: 4, children: [5], name: "My submenu 2", appID: 1 },
+        5: { id: 5, children: [6], name: "My submenu 3", appID: 1 },
+        6: { id: 6, children: [7], name: "My submenu 4", appID: 1 },
+        7: { id: 7, children: [8], name: "My submenu 5", appID: 1 },
+        8: { id: 8, children: [9], name: "My submenu 6", appID: 1 },
+        9: { id: 9, children: [], name: "My submenu 7", appID: 1 },
+    };
+    const env = await makeTestEnv(baseConfig);
+    env.services.menu.setCurrentMenu(1);
+    const target = getFixture();
+    const navbar = await mount(NavBar, { env, target });
+    const firstSectionMenu = navbar.el.querySelector(".o_menu_sections .dropdown");
+    await click(firstSectionMenu, "button.dropdown-toggle");
+    const menuChildren = [...firstSectionMenu.querySelectorAll(".dropdown-menu > *")];
+    assert.deepEqual(
+        menuChildren.map((el) => ({
+            text: el.textContent,
+            paddingLeft: el.style.paddingLeft,
+            tagName: el.tagName,
+        })),
+        [
+            { text: "My submenu 1", paddingLeft: "20px", tagName: "DIV" },
+            { text: "My submenu 2", paddingLeft: "32px", tagName: "DIV" },
+            { text: "My submenu 3", paddingLeft: "44px", tagName: "DIV" },
+            { text: "My submenu 4", paddingLeft: "56px", tagName: "DIV" },
+            { text: "My submenu 5", paddingLeft: "68px", tagName: "DIV" },
+            { text: "My submenu 6", paddingLeft: "80px", tagName: "DIV" },
+            { text: "My submenu 7", paddingLeft: "92px", tagName: "A" },
+        ]
+    );
+});
+
 QUnit.test("data-menu-xmlid attribute on AppsMenu items", async (assert) => {
     baseConfig.serverData.menus = {
         root: { id: "root", children: [1, 2], name: "root", appID: "root" },
@@ -185,18 +230,18 @@ QUnit.test("navbar updates after adding a systray item", async (assert) => {
     MyItem1.template = xml`<li class="my-item-1">my item 1</li>`;
 
     clearRegistryWithCleanup(systrayRegistry);
-    systrayRegistry.add('addon.myitem1', { Component: MyItem1 });
+    systrayRegistry.add("addon.myitem1", { Component: MyItem1 });
 
     const env = await makeTestEnv(baseConfig);
     const target = getFixture();
 
     patchWithCleanup(NavBar.prototype, {
-         mounted() {
+        mounted() {
             class MyItem2 extends Component {}
             MyItem2.template = xml`<li class="my-item-2">my item 2</li>`;
-            systrayRegistry.add('addon.myitem2', {Component: MyItem2});
+            systrayRegistry.add("addon.myitem2", { Component: MyItem2 });
             this._super();
-        }
+        },
     });
 
     const navbar = await mount(NavBar, { env, target });