[FIX] website: prevent using multiple content menus with the same DOM id

Steps to reproduce (17.0+):

- Go to an event website page > go to “Site” > “This Page”.

- The menu item used to edit the page content menu “Edit Event Menu” is
duplicated.

After the event page refactoring in [1], a second template using the
same content menu ID was added to customize the UI for mobile.
And since the “Edit Menu” items generation is based on detecting current
sub menus from the DOM using the same ID (`data-content_menu_id`), we
get a new menu item in the nav bar for every menu template using it.

The goal of this commit is to fix this behavior by simply ignoring the
duplicated menu IDs (The same menu record will be edited anyway).

Remark: the behavior fixed by this commit was detected in 17.0, but we
target 16.0 to prevent any potential issue linked to duplicated menus in
the DOM, also, the duplicated data attribute will be removed in master
(one ID is enough for the content menu to be detected and edited.)

[1]: https://github.com/odoo/odoo/commit/9f2442d09b62fcb3f687ec39928ea0e3ac49557e

task-3645985

closes odoo/odoo#150568

X-original-commit: e8ebb33269cbb8d049ca3e4749c486b6d137e044
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

addons/website/static/src/services/website_service.js

@@ -120,10 +120,20 @@ export const websiteService = {
                     currentMetadata = {};
                 } else {
                     const { mainObject, seoObject, isPublished, canOptimizeSeo, canPublish, editableInBackend, translatable, viewXmlid } = dataset;
-                    const contentMenus = [...document.querySelectorAll('[data-content_menu_id]')].map(menu => [
-                        menu.dataset.menu_name,
-                        menu.dataset.content_menu_id,
-                    ]);
+                    // We ignore multiple menus with the same `content_menu_id`
+                    // in the DOM, since it's possible to have different
+                    // templates for the same content menu (E.g. used for a
+                    // different desktop / mobile UI).
+                    const contentMenus = [
+                        ...new Map(
+                            [...document.querySelectorAll("[data-content_menu_id]")].map(
+                                (menuEl) => [
+                                    menuEl.dataset.content_menu_id,
+                                    [menuEl.dataset.menu_name, menuEl.dataset.content_menu_id],
+                                ]
+                            )
+                        ).values(),
+                    ];
                     currentMetadata = {
                         path: document.location.href,
                         mainObject: unslugHtmlDataObject(mainObject),