Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: made search bar visible on mobile #1597

Merged
merged 4 commits into from
May 3, 2023
Merged

fix: made search bar visible on mobile #1597

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca2e3d9
fix: made search bar visible on mobile
manavsiddharthgupta Apr 20, 2023
4b78c2e
Merge branch 'master' into manavsidd/searchbar-visibility
manavsiddharthgupta Apr 21, 2023
1523e51
Merge branch 'master' into manavsidd/searchbar-visibility
akshatnema May 2, 2023
7996dc9
Merge branch 'master' into manavsidd/searchbar-visibility
akshatnema May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 34 additions & 13 deletions components/navigation/DocsMobileMenu.js
View file
Open in desktop
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>
)
);
}