Skip to content

Commit

Permalink
fix: made search bar visible on mobile (#1597)
Browse files Browse the repository at this point in the history
Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
  • Loading branch information
manavsiddharthgupta and akshatnema authored May 3, 2023
1 parent 4e9fd70 commit e7183ce
Showing 1 changed file with 34 additions and 13 deletions.
47 changes: 34 additions & 13 deletions components/navigation/DocsMobileMenu.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,52 @@
import ClickableLogo from '../ClickableLogo'
import DocsNav from './DocsNav'
import ClickableLogo from '../ClickableLogo';
import DocsNav from './DocsNav';
import { SearchButton, DOCS_INDEX_NAME } from '../AlgoliaSearch';
import IconLoupe from '../icons/Loupe';

export default function DocsMobileMenu({
post,
navigation,
onClickClose = () => { },
onClickClose = () => {},
}) {
return (
<div className="z-60 lg:hidden">
<div className="fixed inset-0 flex z-40">
<div className="fixed inset-0">
<div className="absolute inset-0 bg-gray-600 opacity-75" onClick={onClickClose}></div>
<div
className="absolute inset-0 bg-gray-600 opacity-75"
onClick={onClickClose}
></div>
</div>

<div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
<div className="absolute top-0 right-0 -mr-14 p-1">
<button onClick={onClickClose} className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg className="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
<button
onClick={onClickClose}
className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
aria-label="Close sidebar"
>
<svg
className="h-6 w-6 text-white"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="flex-1 h-0 pt-5 overflow-y-auto">
<div className='pl-2.5'>
<div className="pl-2.5">
<ClickableLogo logoClassName="h-8 w-auto ml-3" />
</div>

<div className='w-full my-4 px-2'>
<SearchButton
<div className="w-full mt-10 mb-4 px-2">
<SearchButton
className="flex w-full items-center text-left text-sm space-x-3 px-3 py-1.5 bg-white hover:bg-secondary-100 border-gray-300 hover:border-secondary-500 border text-gray-700 hover:text-secondary-500 shadow-sm transition-all duration-500 ease-in-out rounded-md"
indexName={DOCS_INDEX_NAME}
>
Expand All @@ -40,8 +57,12 @@ export default function DocsMobileMenu({

<nav className="mt-5 px-2 mb-4">
<ul>
{Object.values(navigation).map(navItem => (
<DocsNav item={navItem} active={post.slug} onClick={onClickClose} />
{Object.values(navigation).map((navItem) => (
<DocsNav
item={navItem}
active={post.slug}
onClick={onClickClose}
/>
))}
</ul>
</nav>
Expand All @@ -52,5 +73,5 @@ export default function DocsMobileMenu({
</div>
</div>
</div>
)
);
}

0 comments on commit e7183ce

Please sign in to comment.