chore(docs): hide searchbar when appropriate (#11795)

Author: ndom91

docs/components/DocSearch/searchInput.tsx

@@ -19,46 +19,46 @@ export function CustomSearchBox(props: UseSearchBoxProps) {
   }
 
   return (
-    <div>
-      <form
-        action=""
-        role="search"
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
+    <form
+      action=""
+      role="search"
+      noValidate
+      onSubmit={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
 
-          if (inputRef.current) {
-            inputRef.current.blur()
-          }
-        }}
-        onReset={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
+        if (inputRef.current) {
+          inputRef.current.blur()
+        }
+      }}
+      onReset={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
 
-          setQuery("")
+        setQuery("")
 
-          if (inputRef.current) {
-            inputRef.current.focus()
-          }
+        if (inputRef.current) {
+          inputRef.current.focus()
+        }
+      }}
+      className="relative"
+    >
+      <input
+        ref={inputRef}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        placeholder="Search..."
+        spellCheck={false}
+        maxLength={512}
+        type="search"
+        value={inputValue}
+        onChange={(event) => {
+          setQuery(event.currentTarget.value)
         }}
-        className="relative max-md:ml-6"
-      >
-        <input
-          ref={inputRef}
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          placeholder="Search..."
-          spellCheck={false}
-          maxLength={512}
-          type="search"
-          value={inputValue}
-          onChange={(event) => {
-            setQuery(event.currentTarget.value)
-          }}
-          className="w-full max-w-48 appearance-none rounded-lg bg-black/[.05] px-3 py-1.5 pr-2 text-base leading-tight transition-colors placeholder:text-gray-500 focus:!bg-transparent md:text-sm dark:bg-gray-50/10 dark:placeholder:text-gray-400"
-        />
+        className="w-48 appearance-none rounded-lg bg-black/[.05] px-3 py-1.5 pr-2 text-base leading-tight transition-colors placeholder:text-gray-500 focus:!bg-transparent md:text-sm dark:bg-gray-50/10 dark:placeholder:text-gray-400 [aside_&]:w-full"
+      />
+      <div>
         {inputValue.length ? (
           <button
             type="reset"
@@ -98,8 +98,8 @@ export function CustomSearchBox(props: UseSearchBoxProps) {
             CTRL K
           </kbd>
         )}
-        <span hidden={!isSearchStalled}>Searching…</span>
-      </form>
-    </div>
+      </div>
+      <span hidden={!isSearchStalled}>Searching…</span>
+    </form>
   )
 }

docs/components/DocSearch/wrapper.tsx

@@ -48,7 +48,7 @@ export default function () {
   }, [])
 
   return (
-    <div className="relative">
+    <div className="relative [aside_&]:w-full max-md:[nav_&]:hidden">
       <InstantSearch
         indexName="next-auth"
         // @ts-expect-error
@@ -58,7 +58,7 @@ export default function () {
         <NoResultsBoundary>
           <Hits
             hitComponent={Hit}
-            className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 p-2 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
+            className="fixed left-2 top-28 z-50 mt-[50px] max-h-[calc(100dvh_-_120px)] w-[calc(100vw_-_16px)] overflow-y-auto rounded-md bg-neutral-100 shadow-lg md:absolute md:left-auto md:right-0 md:top-12 md:mt-auto md:w-96 dark:bg-neutral-800 [&>ol]:flex [&>ol]:flex-col [&>ol]:divide-y [&>ol]:divide-neutral-400/30 [&>ol]:dark:divide-neutral-900/50"
           />
         </NoResultsBoundary>
       </InstantSearch>

docs/package.json

@@ -37,8 +37,8 @@
     "framer-motion": "^11.2.6",
     "next": "14.2.3",
     "next-sitemap": "^4.2.3",
-    "nextra": "3.0.0-alpha.24",
-    "nextra-theme-docs": "3.0.0-alpha.24",
+    "nextra": "3.0.0-alpha.36",
+    "nextra-theme-docs": "3.0.0-alpha.36",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-instantsearch": "^7.7.2",