Responsive dropdown

Author: LukyVj

docs/source/_assets/less/docsearch.less

@@ -1,7 +1,7 @@
 .algolia-autocomplete {
   width: 100%;
 
-  .ds-dataset-1 {
+  [class^="ds-dataset-"] {
     .algolia-docsearch-suggestion--text {
       .algolia-docsearch-suggestion--highlight {
         box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8)
@@ -12,4 +12,30 @@
       background: rgba(68, 168, 179, .1)
     }
   }
+}
+
+@media (max-width: 768px) {
+
+  .algolia-autocomplete.algolia-autocomplete-right {
+    .ds-dropdown-menu {
+      width: 100vw !important;
+      max-width: ~"calc(100vw - 32px) !important";
+      min-width: ~"calc(100vw - 32px) !important";
+    }
+
+    .algolia-docsearch-suggestion.algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+      display: none;
+
+      &:before {
+        display: none;
+      }
+    }
+    .algolia-docsearch-suggestion.algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
+      width: 100%;
+
+      &:before {
+        display: none;
+      }
+    }
+  }
 }

docs/source/_layouts/documentation.blade.php

@@ -5,7 +5,7 @@
 
 @section('body')
 <div class="min-h-screen">
-    <div class="border-b border-smoke flex-none px-8 py-6 w-14/5 md:w-full md:max-w-xs fixed border-smoke bg-smoke-light border-r-2 z-50">
+    <div class="hidden border-b border-smoke flex-none px-8 py-6 w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col fixed border-smoke bg-smoke-light border-r-2 z-50">
         <div class="mb-4">
             <div class="hidden md:flex md:justify-center">
                 <a href="/" class="flex justify-center">
@@ -23,6 +23,7 @@
             </div>
         </div>
     </div>
+
     <div id="sidebar" class="hidden z-40 fixed pin-y pin-l overflow-y-scroll scrolling-touch bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
         <div class="p-8 flex-1 overflow-y-scroll">
             <nav id="nav" class="text-base overflow-y-scroll">
@@ -177,6 +178,12 @@
                       <svg class="w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
                     </div>
                   </div>
+                  <div id="search-mobile" class="absolute pin-r pin-y px-4 flex items-center relative">
+                      <input type="text" id="searchbox-mobile" class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full opacity-75 ds-input">
+                      <div class="pointer-events-none absolute pin-y pin-l pl-8 flex items-center opacity-75">
+                        <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
+                      </div>
+                  </div>
             </div>
         </div>
         <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">

docs/source/_layouts/master.blade.php

@@ -28,11 +28,17 @@
         <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
         <script type="text/javascript">
             docsearch({
-              // appId: 'FMDGKF8GP7',
               apiKey: '3df93446658cd9c4e314d4c02a052188',
               indexName: 'tailwindcss',
-              inputSelector: '#searchbox',
-              debug: true // Set debug to true if you want to inspect the dropdown
+              inputSelector: '#searchbox'
+            });
+
+            // For mobile ( will be fixed soon, see : https://github.com/algolia/docsearch/issues/230 )
+            docsearch({
+              apiKey: '3df93446658cd9c4e314d4c02a052188',
+              indexName: 'tailwindcss',
+              inputSelector: '#searchbox-mobile',
+              debug: true
             });
         </script>
         <script>