From a3ab30906b9da4792ac1865a7f3fa6fce92a6ab8 Mon Sep 17 00:00:00 2001
From: Hugo Locurcio <hugo.locurcio@hugo.pro>
Date: Thu, 23 Jan 2020 04:53:24 +0100
Subject: [PATCH] Make the search bar fixed, hide the logo when scrolling down

This closes #2778.
---
 _static/css/custom.css | 28 ++++++++++++++++++++++++++++
 _static/js/custom.js   | 37 +++++++++++++++++++++++++++++++++++++
 conf.py                |  4 ++++
 3 files changed, 69 insertions(+)
 create mode 100644 _static/js/custom.js

diff --git a/_static/css/custom.css b/_static/css/custom.css
index 2f33910a6..de094a8e8 100644
--- a/_static/css/custom.css
+++ b/_static/css/custom.css
@@ -422,6 +422,26 @@ code,
     background-color: var(--navbar-background-color);
 }
 
+@media only screen and (min-width: 768px) {
+    .wy-side-nav-search {
+        /* Keep the search field visible when scrolling down */
+        position: fixed;
+    }
+
+    /* Simulate a drop shadow that only affects the bottom edge */
+    /* This is used to indicate the search bar is fixed */
+    .wy-side-nav-search::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -8px;
+        width: 300px;
+        height: 8px;
+        pointer-events: none;
+        background: linear-gradient(hsla(0, 0%, 0%, 0.2), transparent);
+    }
+}
+
 .wy-side-nav-search > a:hover,
 .wy-side-nav-search .wy-dropdown > a:hover {
     background-color: var(--navbar-background-color-hover);
@@ -494,6 +514,14 @@ code,
     width: 308px;
 }
 
+@media only screen and (min-width: 768px) {
+    .wy-menu-vertical {
+        /* Account for the fixed logo and search form */
+        /* (prevents the navbar from being hidden behind it) */
+        margin-top: 330px;
+    }
+}
+
 .wy-menu-vertical a {
     color: var(--navbar-level-1-color);
 }
diff --git a/_static/js/custom.js b/_static/js/custom.js
new file mode 100644
index 000000000..eb37e9f64
--- /dev/null
+++ b/_static/js/custom.js
@@ -0,0 +1,37 @@
+// The number of pixels the user must scroll by before the logo is hidden.
+const scrollTopPixels = 40;
+
+// Hide the navigation bar logo when scrolling down on desktop platforms.
+// The logo is quite tall, so this helps make the rest of the navigation bar
+// more readable.
+function registerOnScrollEvent(mediaQuery) {
+  // The navigation bar that contains the logo.
+  const $navbar = $('.wy-side-scroll');
+
+  // The anchor that contains the logo. This element will be hidden
+  // (instead of hiding just the logo), otherwise, a small clickable area
+  // would remain visible.
+  const $logo = $('.wy-side-nav-search > a');
+
+  if (mediaQuery.matches) {
+    // We're on desktop; register the scroll event.
+    $navbar.scroll(function() {
+      if ($(this).scrollTop() >= scrollTopPixels) {
+        $logo.hide();
+      } else {
+        $logo.show();
+      }
+    });
+  } else {
+    // We're on mobile; unregister the scroll event so the logo isn't hidden
+    // when scrolling.
+    $logo.show();
+    $navbar.unbind('scroll');
+  }
+}
+
+$(document).ready(() => {
+  const mediaQuery = window.matchMedia('only screen and (min-width: 768px)');
+  registerOnScrollEvent(mediaQuery);
+  mediaQuery.addListener(registerOnScrollEvent);
+});
diff --git a/conf.py b/conf.py
index 1ed1da538..585084115 100644
--- a/conf.py
+++ b/conf.py
@@ -99,6 +99,10 @@ html_css_files = [
     'css/custom.css',
 ]
 
+html_js_files = [
+    'js/custom.js',
+]
+
 # Output file base name for HTML help builder
 htmlhelp_basename = 'GodotEnginedoc'