[FIX] website: make anchor links work in mobile menu

A anchor menu in the mobile collapse related to an element in the
current page doesn't work correctly:
- The collapse-menu doesn't close
- If the menu is large enough, on mobile, you actually don't even see
  the page scrolling behind it so it looks like the click did nothing.

This is probably because of the switch from BS4 to BS5.
In later version, it's even worse, as we are using bootstrap Offcanvas
instead of collapse, creating another bug:
- The page doesn't scroll at all

This will be fixed in the forward port.

This commit simply manually closes the collapse before starting  our own
smooth scrolling.
It also targets the desktop offcanvas menu (when hamburger layout is
selected).

opw-3604963

closes odoo#146132

Signed-off-by: Quentin Smetz (qsm) <[email protected]>

addons/website/static/src/js/content/snippets.animation.js

@@ -1023,6 +1023,20 @@ registry.anchorSlide = publicWidget.Widget.extend({
         if (!$anchor.length || !scrollValue) {
             return;
         }
+
+        const collapseMenuEl = this.el.closest('#top_menu_collapse');
+        if (collapseMenuEl && collapseMenuEl.classList.contains('show')) {
+            // Special case for anchors in collapse: clicking on those scrolls
+            // the page but doesn't close the menu. Two issues:
+            // 1. There is a visual glitch: the menu is jumping during the
+            //    scroll
+            // 2. The menu can actually cover the whole screen in mobile if the
+            //    menu are long enough. Then it behaves as if the click did
+            //    nothing since the page scrolled behind the menu but you didn't
+            //    see it and the menu remains open.
+            $(collapseMenuEl).collapse("hide");
+        }
+
         ev.preventDefault();
         this._scrollTo($anchor, scrollValue);
     },