Bring search bar into view on desktop

This commit changes how the search bar is brought into view on desktop as
brought up in elixir-lang#1860: when using one of the keyboard shortcuts to focus
the input, the entire page jumps to the top making you lose your scroll
position.  On mobile, technically smaller screens, this is remedied by
causing the input to slide into view on scroll up, but I don't believe
this is a desirable solution for desktop.

The following changes are introduced:

  * Using one of the keyboard shortcuts will focus the search input
    causing it to stick to the top.
  * It will continue to stick to the top so long as it is focused
    allowing you to scroll with it open.
  * The slide-on-scroll effect has been changed to only fire on
    touch-enabled devices as opposed to just smaller screens.  This is
    allows us to make the hexdocs window very small and still use
    keyboard shortcuts--Useful on laptops.

Closes elixir-lang#1860

assets/css/layout.css

@@ -122,7 +122,7 @@ body.sidebar-closed .content {
   left: 0;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (hover: none) {
   .content,
   body.sidebar-opening .content {
     left: 0;

assets/css/search-bar.css

@@ -1,8 +1,21 @@
 .top-search {
+  position: relative;
+  top: 0;
+  z-index: 101;
   margin-top: 10px;
   background-color: var(--background);
 }
 
+@media only screen and (hover: hover) {
+  .top-search {
+    padding: 0.8rem 0;
+  }
+}
+
+.top-search.sticky {
+  position: sticky;
+}
+
 .search-settings {
   display: flex;
   column-gap: 12px;

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,12 @@ export function setSearchInputValue (value) {
  */
 export function focusSearchInput () {
   const searchInput = qs(SEARCH_INPUT_SELECTOR)
+
+  if (!isTouchDevice()) {
+    const topSearch = qs(TOP_SEARCH_SELECTOR)
+    topSearch.classList.add('sticky')
+  }
+
   searchInput.focus()
 }
 
@@ -136,15 +143,18 @@ function clearSearch () {
 function hideAutocomplete () {
   document.body.classList.remove('search-focused')
   hideAutocompleteList()
+  qs(TOP_SEARCH_SELECTOR).classList.remove('sticky')
 }
 
 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
 
 window.addEventListener('scroll', function () {
+  if (!isTouchDevice()) { return }
+
   const currentScroll = window.scrollY
 
   // Add 'fixed' class when not at the top