Bring search bar into view on desktop

assets/css/layout.css

@@ -122,7 +122,28 @@ body.sidebar-closed .content {
   left: 0;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (hover: hover) and (max-width: 768px) {
+  body.sidebar-opening .content {
+    left: 0;
+    width: 100%;
+  }
+
+  body.sidebar-closed .sidebar-button {
+    position: absolute;
+    top: 14px;
+  }
+
+  body.sidebar-closed .sidebar-button.fixed {
+    position: fixed;
+    padding: 16px 12px 18px 19px;
+  }
+
+  body.sidebar-closed .sidebar-button.fixed-top {
+    position: fixed;
+  }
+}
+
+@media screen and (hover: none) {
   .content,
   body.sidebar-opening .content {
     left: 0;
@@ -137,6 +158,7 @@ body.sidebar-closed .content {
 
   body.sidebar-closed .sidebar-button {
     position: absolute;
+    top: 14px;
   }
 
   .sm-fixed {

assets/css/search-bar.css

@@ -1,6 +1,22 @@
 .top-search {
+  position: relative;
+  top: 0;
+  z-index: 101;
   margin-top: 10px;
   background-color: var(--background);
+  padding: 0.8rem 0;
+}
+
+@media (max-width: 480px) or ((min-width: 481px) and (max-width: 768px)) {
+  .top-search {
+    padding: 0.8rem 1.8rem 0.8rem 3rem;
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+
+.top-search.sticky {
+  position: sticky;
 }
 
 .search-settings {
@@ -114,13 +130,7 @@
   color: var(--iconAction);
 }
 
-@media (max-width: 480px) or ((min-width: 481px) and (max-width: 768px)) {
-  .search-bar {
-    margin-left: 0px;
-  }
-}
-
-@media (max-width: 768px) {
+@media (hover: none) {
   .top-search {
     margin-top: 0;
     position: absolute;

assets/js/helpers.js

@@ -161,10 +161,21 @@ export function getProjectNameAndVersion () {
 }
 
 /**
- * Return `true` if the client's OS is MacOS
+ * Return `true` if the client's OS is MacOS.
  *
  * @return {Boolean}
  */
 export function isMacOS () {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
 }
+
+/**
+ * Return `true` if the client's device is touch-enabled.
+ *
+ * @return {Boolean}
+ */
+export function isTouchDevice () {
+  return (('ontouchstart' in window) ||
+    (navigator.maxTouchPoints > 0) ||
+    (navigator.msMaxTouchPoints > 0))
+}

assets/js/search-bar.js

@@ -7,10 +7,11 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { isMacOS, qs } from './helpers'
+import { isMacOS, isTouchDevice, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
 const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
+const TOP_SEARCH_SELECTOR = '.top-search'
 
 /**
  * Initializes the sidebar search box.
@@ -34,6 +35,16 @@ export function setSearchInputValue (value) {
  */
 export function focusSearchInput () {
   const searchInput = qs(SEARCH_INPUT_SELECTOR)
+
+  if (!isTouchDevice()) {
+    qs(TOP_SEARCH_SELECTOR).classList.add('sticky')
+    if (window.scrollY === 0) {
+      qs('.sidebar-button').classList.add('fixed-top')
+    } else {
+      qs('.sidebar-button').classList.add('fixed')
+    }
+  }
+
   searchInput.focus()
 }
 
@@ -139,38 +150,47 @@ function hideAutocomplete () {
 }
 
 let lastScrollTop = window.scrollY
-const topSearch = document.querySelector('.top-search')
+const topSearch = document.querySelector(TOP_SEARCH_SELECTOR)
 const sidebarMenu = document.getElementById('sidebar-menu')
 const backgroundLayer = document.querySelector('.background-layer')
 const scrollThreshold = 70 // Set a threshold for scroll, adjust as needed
+const searchInput = qs(SEARCH_INPUT_SELECTOR)
+const sidebarButton = qs('.sidebar-button')
 
 window.addEventListener('scroll', function () {
   const currentScroll = window.scrollY
 
-  // Add 'fixed' class when not at the top
-  if (currentScroll > scrollThreshold * 2) {
-    topSearch.classList.add('sm-fixed')
-    sidebarMenu.classList.add('sm-fixed')
-    backgroundLayer.classList.add('sm-fixed')
-  }
+  if (isTouchDevice()) {
+    // Add 'fixed' class when not at the top
+    if (currentScroll > scrollThreshold * 2) {
+      topSearch.classList.add('sm-fixed')
+      sidebarMenu.classList.add('sm-fixed')
+      backgroundLayer.classList.add('sm-fixed')
+    }
 
-  if (currentScroll === 0) {
-    // Remove 'fixed' class when at the top
-    topSearch.classList.remove('sm-fixed')
-    sidebarMenu.classList.remove('sm-fixed')
-    backgroundLayer.classList.remove('sm-fixed')
-  }
+    if (currentScroll === 0) {
+      // Remove 'fixed' class when at the top
+      topSearch.classList.remove('sm-fixed')
+      sidebarMenu.classList.remove('sm-fixed')
+      backgroundLayer.classList.remove('sm-fixed')
+    }
 
-  if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
-    // Scrolling down and past the threshold
-    topSearch.classList.add('sm-hidden')
-    sidebarMenu.classList.add('sm-hidden')
-    backgroundLayer.classList.add('sm-hidden')
-  } else {
-    // Scrolling up or at the top of the page
-    topSearch.classList.remove('sm-hidden')
-    sidebarMenu.classList.remove('sm-hidden')
-    backgroundLayer.classList.remove('sm-hidden')
+    if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
+      // Scrolling down and past the threshold
+      topSearch.classList.add('sm-hidden')
+      sidebarMenu.classList.add('sm-hidden')
+      backgroundLayer.classList.add('sm-hidden')
+    } else {
+      // Scrolling up or at the top of the page
+      topSearch.classList.remove('sm-hidden')
+      sidebarMenu.classList.remove('sm-hidden')
+      backgroundLayer.classList.remove('sm-hidden')
+    }
+  } else if (currentScroll !== lastScrollTop) {
+    topSearch.classList.remove('sticky')
+    sidebarButton.classList.remove('fixed')
+    sidebarButton.classList.remove('fixed-top')
+    searchInput.blur()
   }
 
   lastScrollTop = currentScroll <= 0 ? 0 : currentScroll

lib/ex_doc/formatter/html/templates/sidebar_template.eex

@@ -91,5 +91,4 @@
             <span class="sr-only">Settings</span>
           </button>
         </div>
-
       </div>