Update styling

Expensify · Aug 18, 2023 · 0d8cb84 · 0d8cb84
1 parent 1738278
commit 0d8cb84
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss
@@ -28,6 +28,7 @@ $color-gray-label: $color-gray-label;
     display: block;
     top: 0;
     right: 0;
+    z-index: 2;
 }
 
 @media only screen and (max-width: $breakpoint-tablet) {
@@ -70,7 +71,7 @@ $color-gray-label: $color-gray-label;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.4);
-    z-index: 2;
+    z-index: 1;
 }
 
 /* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */
@@ -157,6 +158,13 @@ label.search-label {
     font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
     max-height: 80vh;
     overflow-y: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Hide the scrollbar */
+.gsc-control-cse::-webkit-scrollbar {
+    display: none;
 }
 
 .gs-title {

diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -75,16 +75,6 @@ function injectFooterCopywrite() {
     footer.innerHTML = `&copy;2008-${new Date().getFullYear()} Expensify, Inc.`;
 }
 
-function openSidebar() {
-    document.getElementById('sidebar-layer').style.display = 'block';
-
-    // Make body unscrollable
-    const yAxis = document.documentElement.style.getPropertyValue('y-axis');
-    const body = document.body;
-    body.style.position = 'fixed';
-    body.style.top = `-${yAxis}`;
-}
-
 function closeSidebar() {
     document.getElementById('sidebar-layer').style.display = 'none';
 
@@ -100,6 +90,31 @@ function closeSidebar() {
     window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
 }
 
+function closeSidebarOnClickOutside(event) {
+    const sidebarLayer = document.getElementById('sidebar-layer');
+
+    if (event.target !== sidebarLayer) {
+        return;
+    }
+    closeSidebar();
+};
+
+function openSidebar() {
+    document.getElementById('sidebar-layer').style.display = 'block';
+
+    // Make body unscrollable
+    const yAxis = document.documentElement.style.getPropertyValue('y-axis');
+    const body = document.body;
+    body.style.position = 'fixed';
+    body.style.top = `-${yAxis}`;
+
+    // Close the sidebar when clicking sidebar layer (outside the sidebar search)
+    const sidebarLayer = document.getElementById('sidebar-layer');
+    if (sidebarLayer) {
+        sidebarLayer.addEventListener('click', closeSidebarOnClickOutside);
+    }
+}
+
 // Function to adapt & fix cropped SVG viewBox from Google based on viewport (Mobile or Tablet-Desktop)
 function changeSVGViewBoxGoogle() {
     // Get all inline Google SVG elements on the page