docs(nxdev): move mobile search to top bar (#12785)

nx-dev/feature-search/src/lib/algolia-search.tsx

@@ -90,12 +90,12 @@ export function AlgoliaSearch({
           className="flex w-full items-center rounded-md bg-white py-1.5 px-2 text-sm leading-4 ring-1 ring-slate-300 transition dark:bg-slate-700 dark:ring-slate-900"
         >
           <MagnifyingGlassIcon className="h-4 w-4 flex-none" />
-          <span className="mx-3 text-slate-300 dark:text-slate-400 lg:inline-flex">
-            Search Documentation...
+          <span className="mx-3 text-xs text-slate-300 dark:text-slate-400 md:text-sm lg:inline-flex">
+            Search <span className="hidden md:inline">Documentation ...</span>
           </span>
           <span
             style={{ opacity: browserDetected ? '1' : '0' }}
-            className="ml-auto block flex-none rounded-md border border-slate-200 bg-slate-50 px-1 py-0.5 text-xs font-semibold text-slate-500 dark:border-slate-700 dark:bg-slate-800/60"
+            className="ml-auto hidden flex-none rounded-md border border-slate-200 bg-slate-50 px-1 py-0.5 text-xs font-semibold text-slate-500 dark:border-slate-700 dark:bg-slate-800/60 md:block"
           >
             <span className="sr-only">Press </span>
             <kbd className="font-sans">

nx-dev/ui-common/src/lib/documentation-header.tsx

@@ -150,6 +150,11 @@ export function DocumentationHeader({
               {sections.find((x) => x.current)?.name}
             </span>
           </button>
+
+          {/*SEARCH*/}
+          <div className="mx-4 w-full">
+            <AlgoliaSearch />
+          </div>
         </div>
         {/*LOGO*/}
         <div className="flex items-center">

nx-dev/ui-common/src/lib/sidebar.tsx

@@ -202,12 +202,8 @@ export function SidebarMobile({
             leaveTo="-translate-x-full"
           >
             <Dialog.Panel className="relative flex w-full flex-col overflow-y-auto bg-white p-4 dark:bg-slate-900">
-              {/*SEARCH*/}
-              <div className="mb-8 w-full">
-                <AlgoliaSearch />
-              </div>
               {/*SECTIONS*/}
-              <div className="mb-8 flex w-full shrink-0 items-center justify-between overflow-x-scroll">
+              <div className="mb-8 grid w-full shrink-0 grid-cols-3 items-center justify-between">
                 {sections.map((section) => (
                   <Link key={section.name} href={section.href} passHref>
                     <a
@@ -215,7 +211,7 @@ export function SidebarMobile({
                         section.current
                           ? 'text-blue-600 dark:text-sky-500'
                           : 'hover:text-slate-900 dark:hover:text-sky-400',
-                        'whitespace-nowrap p-4 text-sm font-medium'
+                        'whitespace-nowrap p-4 text-center text-sm font-medium'
                       )}
                       aria-current={section.current ? 'page' : undefined}
                     >