Closed apotecbec closed 1 year ago
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 😉
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!
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.
Thank you so much @Badisi - I've got this working now. Most appreciated!
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!