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: #3371 visibility issue with algolia search icon in navbar #3400

Closed
wants to merge 4 commits into from
Closed

fix: #3371 visibility issue with algolia search icon in navbar #3400

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
117e2a2
fix visibily issue #3371 with algolia search icon in navbar
jyotishpro Nov 16, 2024
28fed46
Fixes algolia search button
jyotishpro Nov 16, 2024
2cadadf
fixes #3371 algolia search button for mobile
jyotishpro Nov 16, 2024
102b8df
Merge branch 'master' into fix/algolia-search-icon-visibility
asyncapi-bot Dec 10, 2024
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
35 changes: 29 additions & 6 deletions components/navigation/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
const { i18n } = useTranslation();


/**
* Retrieves unique language options based on the current path and i18nPaths configuration.
*
Expand Down Expand Up @@ -145,6 +146,23 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
setOpen(null);
}, [asPath]);

const loupeSvg = encodeURIComponent(`
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="#9CA3AF"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="m19 19-3.5-3.5" />
<circle cx="11" cy="11" r="6" />
</svg>
`);

return (
<div className={`bg-white ${className} z-50`}>
<div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-10'>
Expand All @@ -160,7 +178,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps

<div className='-my-2 -mr-2 flex flex-row items-center justify-center lg:hidden' data-testid='Navbar-search'>
<SearchButton
className='flex items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
className='flex items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
aria-label='Open Search'
>
<IconLoupe />
Expand Down Expand Up @@ -219,11 +237,17 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
))}

<div className='justify-content flex flex-row items-center'>

<SearchButton
className='mr-2 flex items-center space-x-2 rounded-md p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
aria-label='Open Search'
>
<IconLoupe />
className="mr-2 p-3 flex items-center space-x-2 rounded-md text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none"
aria-label="Open Search"
style={{
backgroundImage: `url("data:image/svg+xml;charset=utf-8,${loupeSvg}")`,
backgroundSize: '1.5rem',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center left',
}}
>
jyotishpro marked this conversation as resolved.
Show resolved Hide resolved
</SearchButton>

{/* // Language Picker Component */}
Expand All @@ -235,7 +259,6 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
className=''
selected={i18n.language ? i18n.language.toUpperCase() : 'EN'}
/>

<GithubButton
text='Star on GitHub'
href='https://github.com/asyncapi/spec'
Expand Down
Loading