[site] Search fix

Author: jamesgpearce

site/js/common/search.ts

@@ -113,7 +113,13 @@ export const searchLoad = (isHome = false) => {
       nav.prepend(search);
       const showResults = () =>
         (input.value ? addClass : delClass)(results, 'show');
-      input.addEventListener('focus', showResults);
+      input.addEventListener('focus', () => {
+        // The search box sits beside the menu here, so close the menu.
+        if (matchMedia('(min-width: 38rem)').matches) {
+          (doc.getElementById('menustate') as HTMLInputElement).checked = false;
+        }
+        showResults();
+      });
       input.addEventListener('input', () => {
         showResults();
         populateResults();

site/less/header.less

@@ -201,6 +201,14 @@ body:not(.home) > header {
     > nav > ul {
       display: none;
     }
+    // Keep the search results on the screen, now the search is at the right.
+    > nav > #search > ol {
+      right: 0;
+    }
+    // The menu and the search results would overlap, so only show one.
+    > #menustate:checked ~ nav > #search > ol {
+      display: none;
+    }
     > #menustate:checked ~ nav > ul {
       .dropdown();
       display: block;
@@ -226,9 +234,13 @@ body:not(.home) > header {
         width: 100%;
         max-width: unset;
       }
+      > ol.show {
+        display: block;
+      }
     }
     > ul {
       position: static;
+      z-index: auto;
       width: auto;
       padding: 0;
       border: 0;

site/less/theme.less

@@ -42,6 +42,8 @@ body {
     z-index: 1;
   }
   > header {
+    // Above the footer, so that the menu and search results can overlap it.
+    z-index: 2;
     border-bottom: 1px solid @borderColor;
     box-shadow: @shadow;
   }