Coveo: Add mobile support

Author: lamATnginx

assets/css/v2/style.css

@@ -410,7 +410,7 @@ ol li:last-child {
 .grid-container {
   display: grid;
   grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-rows: var(--header-height) 1fr auto;
+  grid-template-rows: auto 1fr auto;
   grid-template-areas:
     "sidebar header"
     "sidebar content"
@@ -533,6 +533,11 @@ ol li:last-child {
       height: 2.5rem;
     }
 
+    .header__search--mobile--search--button {
+      cursor: pointer;
+      display: none;
+    }
+
     .header__search {
       display: block;
       width: auto;
@@ -638,6 +643,31 @@ ol li:last-child {
   border-top: 1px solid oklch(var(--color-divider));
 }
 
+/* Coveo toggling */
+#search-standalone-header-panel:checked ~ .grid-container {
+  & :has([data-mode="mobile"]) {
+    .header__search[data-mode="mobile"] {
+      position: absolute;
+      top: 100%;
+      width: 100%;
+      padding-top: 0;
+
+      #search-standalone-header {
+        display: unset;
+
+        atomic-search-box {
+          width: calc(100% + 2rem);
+          margin-left: -1rem;
+        }
+      }
+    }
+
+    .header + * {
+      margin-top: 2rem;
+    }
+  }
+}
+
 /* sidebar toggling */
 #sidebar-panel:checked ~ .grid-container {
   grid-template-columns: 1fr;
@@ -899,8 +929,14 @@ ol li:last-child {
       }
     }
     .header-container {
+      .header__search--mobile--search--button {
+        display: block;
+      }
+
       .header__search {
-        display: none;
+        #search-standalone-header {
+          display: none;
+        }
       }
     }
   }

assets/js/coveo.js

@@ -103,3 +103,20 @@ async function atomicCoveo() {
 document.addEventListener('DOMContentLoaded', async () => {
   atomicCoveo();
 });
+
+window.addEventListener('resize', () => {
+  const MODES = [
+    // my really bad enum
+    'desktop',
+    'mobile',
+  ];
+  const search = document.getElementById('header__search');
+
+  if (search) {
+    if (window.innerWidth < 68 * 16) {
+      search.setAttribute('data-mode', MODES[1]);
+    } else {
+      search.setAttribute('data-mode', MODES[0]);
+    }
+  }
+});

layouts/_default/baseof.html

@@ -41,6 +41,7 @@
     {{ if or ( not hugo.IsServer ) ( not ( in .Site.Params.buildtype "package" ) ) }}
     {{ partial "universal-tag.html" . }}
     {{ end }}
+    <input type="checkbox" id="search-standalone-header-panel" class="search-standalone-header-panel" hidden/>
     <input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
     <div class="grid-container">
         <aside class="sidebar">

layouts/partials/header.html

@@ -10,7 +10,11 @@
             </label>
         </div>
         {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-        <div class="header__search">
+        <!-- Mobile button -->
+        <label class="header__search--mobile--search--button" id="header__search--mobile--search--button" for="search-standalone-header-panel">
+          {{ partial "lucide" (dict "context" . "icon" "search") }}
+        </label>
+        <div class="header__search" id="header__search" data-mode="mobile">
             <!-- Standalone search box. -->
             {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-header") }}
         </div>