From 74e7da56946c8b9d4e684a96a02bce82982a5757 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Tue, 25 May 2021 14:36:55 +0200
Subject: [PATCH] [FIX] odoo_theme: hide searchbar on scroll in mobile

---
 extensions/odoo_theme/static/js/menu.js | 21 ++++++++++++++-------
 extensions/odoo_theme/static/style.scss | 14 +++++++++++++-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js
index 6e437dd58..2f4d3aef7 100644
--- a/extensions/odoo_theme/static/js/menu.js
+++ b/extensions/odoo_theme/static/js/menu.js
@@ -47,14 +47,21 @@
         }
     };
 
+     document.addEventListener('scroll', () => {
+         // Allow to hide the searchbar when the page is scrolled in mobile.
+         _flagHeaderWithScrollPosition();
+     });
+
     /**
-     * Mobile: Toggle open/close sidebar on click of nav button (&& on swipe left to right?).
-     *
-     *
-     * `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
-     * the `show` (Bootstrap) class.
-     * Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
-     * Sidebar receives the `o-mobile-show` class.
+     * Add/Remove the class `o_header_scrolled` on the header according to the scroll position.
      */
+     const _flagHeaderWithScrollPosition = () => {
+         const header = document.querySelector('.o_main_header');
+         if (this.scrollY > 0) {
+             header.classList.add('o_header_scrolled');
+         } else {
+             header.classList.remove('o_header_scrolled');
+         }
+     };
 
 })();
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 5587584ab..12973d20e 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -73,15 +73,27 @@ header.o_main_header{
     }
     .o_search_wrapper {
         display: flex;
+        opacity: 1;
+        @include transition(opacity .3s);
+
         @include media-breakpoint-down(lg) {
             display: block;
             position: absolute;
             width: 100%;
             padding: 0 10px;
-            top: calc(100% + 30px);
+            top: calc(100% + 15px);
        }
     }
 
+    &.o_header_scrolled {
+        .o_search_wrapper {
+            @include media-breakpoint-down(lg) {
+                opacity: 0;
+            }
+        }
+    }
+
+
     .highlight-link {
         margin-bottom: 0;
         padding: 0 1rem;