add docsearch input to mobile nav

Author: gwleuverink

resources/css/docsearch.css

@@ -36,6 +36,10 @@
     @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none sm:flex;
 }
 
+.DocSearch-Button-Placeholder {
+    @apply inline!;
+}
+
 .DocSearch-Button-Key {
     background: none;
     box-shadow: none;

resources/js/app.js

@@ -119,6 +119,15 @@ docsearch({
     apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
     indexName: 'nativephp',
     insights: true,
-    container: '#docsearch',
+    container: '#docsearch-desktop',
+    debug: false,
+})
+
+docsearch({
+    appId: 'ZNII9QZ8WI',
+    apiKey: '9be495a1aaf367b47c873d30a8e7ccf5',
+    indexName: 'nativephp',
+    insights: true,
+    container: '#docsearch-mobile',
     debug: false,
 })

resources/views/components/navbar/mobile-menu.blade.php

@@ -218,9 +218,21 @@ class="flex items-center justify-between py-3 opacity-50 transition duration-200
             </nav>
 
             <div
-                class="mb-2 flex w-full items-center justify-between gap-2 pb-2"
+                class="mt-6 mb-2 flex w-full items-center justify-between gap-2 pb-2"
             >
-                <div>Theme:</div>
+
+                {{-- Doc search --}}
+                <div class="transition-all duration-200 ease-in-out will-change-transform">
+                    <div
+                        id="docsearch-mobile"
+                        x-on:click="
+                            window.scrollTo({ top: 0, behavior: 'instant' })
+                            showMobileMenu = false
+                        "
+                        aria-label="Search documentation"
+                    ></div>
+                </div>
+
                 <div
                     class="flex h-10 items-center gap-0.5 rounded-full bg-gray-100 p-1 text-sm ring-1 ring-black/5 dark:bg-black/20 dark:ring-white/10"
                     role="radiogroup"

resources/views/components/navigation-bar.blade.php

@@ -183,12 +183,9 @@ class="opacity-60 transition duration-200 hover:opacity-100"
                 {{-- Doc search --}}
                 <div
                     class="-mr-0.5 transition-all duration-200 ease-in-out will-change-transform"
-                    :class="{
-                    'pr-0.5': showMobileMenu,
-                }"
                 >
                     <div
-                        id="docsearch"
+                        id="docsearch-desktop"
                         x-on:click="if (window.innerWidth < 640) window.scrollTo({ top: 0, behavior: 'instant' })"
                         aria-label="Search documentation"
                     ></div>