[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>

1 files changed, 6 insertions, 0 deletions

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 913740098b6..3034c2e5e70 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/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));