Add search bar to homepage <main> section

[apotecbec]

Hey! Is it possible to add a search bar on the homepage in the <main> content section? i.e., like the Google homepage. If so, can anyone help with how I would do that, please?

I don't want to "turn off" the search bar from the navbar, just to add an additional search bar underneath the header / in the <main> section of my homepage.

Thanks in advance!

[Badisi]

This is how I did it :

(document.getElementsByClassName('aa-DetachedSearchButton')[0] as HTMLButtonElement)?.click()

The idea is to query the actual search button in the top navbar and simulate a click on it 😉

[apotecbec]

Thanks @Badisi - most appreciated. I tried to add that line to my index.tsx file but it didn't work. Do you have a snippet of that code in context that you could share? Or could you direct me on how/where to add that line?

Thanks so much in advance for any help you can give!

[Badisi]

In my case, the additional search bar is just a fake div. When you click on it, I simulate a click on the real search button in the top navbar. So the code is mostly this:

const openSearchModal = () => (document.getElementsByClassName('aa-DetachedSearchButton')[0] as HTMLButtonElement)?.click();

<div className="fake-search-bar" onClick={ openSearchModal }></div>

I'm using the docusaurus-search-local plugin that's why I'm using aa-DetachedSearchButton to query the real search button. But if you use Algolia DocSearch I guess it should be DocSearch-Button. Either way you can inspect that search button and see what class name you should use.

[apotecbec]

Thank you so much @Badisi - I've got this working now. Most appreciated!