[IMP] website: make hamburger menu scrollable in small devices

Currently, in small devices, hamburger menu of the cloned navbar
is not scrollable due to fixed position.

This commit improves the behavior and makes the affixed navbar
scrollable, enabling user to navigate through all the available
menus.

task-1938637

closes odoo/odoo#32359

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/content/menu.js

@@ -34,6 +34,12 @@ publicWidget.registry.affixMenu = publicWidget.Widget.extend({
             $source.attr('data-target', targetIDSelector + '_clone');
             $target.attr('id', targetIDSelector.substr(1) + '_clone');
         });
+        // While scrolling through navbar menus, body should not be scrolled with it
+        this.$headerClone.find('div.navbar-collapse').on('show.bs.collapse', function () {
+            $(document.body).addClass('overflow-hidden');
+        }).on('hide.bs.collapse', function () {
+            $(document.body).removeClass('overflow-hidden');
+        });
 
         // Window Handlers
         $(window).on('resize.affixMenu scroll.affixMenu', _.throttle(this._onWindowUpdate.bind(this), 200));

addons/website/static/src/scss/website.scss

@@ -1050,6 +1050,12 @@ table.table_desc tr td {
     background: $light;
     margin-top: -999px;
     transition: margin-top 500ms ease 0s;
+    @include media-breakpoint-down(sm) {
+        .navbar-collapse {
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+    }
     &.affixed {
         margin-top: 0px !important; // the default margin-top is adapted in JS
     }