miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Benjamin Cabanes 2022-10-24 10:56:47 -04:00 committed by GitHub
parent 8fcc2b4a58
commit a9257caf3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
nx-dev/feature-search/src/lib/algolia-search.tsx
View File

@ -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" 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" /> <MagnifyingGlassIcon className="h-4 w-4 flex-none" />
<span className="mx-3 text-slate-300 dark:text-slate-400 lg:inline-flex"> <span className="mx-3 text-xs text-slate-300 dark:text-slate-400 md:text-sm lg:inline-flex">
Search Documentation... Search <span className="hidden md:inline">Documentation ...</span>
</span> </span>
<span <span
style={{ opacity: browserDetected ? '1' : '0' }} 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> <span className="sr-only">Press </span>
<kbd className="font-sans"> <kbd className="font-sans">

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

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

8
nx-dev/ui-common/src/lib/sidebar.tsx
View File

@ -202,12 +202,8 @@ export function SidebarMobile({
leaveTo="-translate-x-full" leaveTo="-translate-x-full"
> >
<Dialog.Panel className="relative flex w-full flex-col overflow-y-auto bg-white p-4 dark:bg-slate-900"> <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*/} {/*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) => ( {sections.map((section) => (
<Link key={section.name} href={section.href} passHref> <Link key={section.name} href={section.href} passHref>
<a <a
@ -215,7 +211,7 @@ export function SidebarMobile({
section.current section.current
? 'text-blue-600 dark:text-sky-500' ? 'text-blue-600 dark:text-sky-500'
: 'hover:text-slate-900 dark:hover:text-sky-400', : '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} aria-current={section.current ? 'page' : undefined}
> >