Algolia - Mobile navigation/search

[kimberleybrown]

Hey everyone,

I've read the documentation regarding Algolia not supporting the sidebar, however our team recently re-enabled Algolia on our doc site for testing and we do not see the search box appearing in the mobile navigation dropdown. When I inspect the mobile navigation, I see the element <div id="docsearch"></div> but none of the content is displaying from it and the div doesn't actually appear. It's as if the Javascript from Algolia isn't being injected properly on mobile.

Is there any additional configuration settings or modifications that need to be made to the search-input partial to enable this? I see the search box on desktop just fine.

[LisaFC]

Aha, so what I think is happening here is what I discovered in #1250 when trying to add Algolia to the left nav search. If you also have the default top bar search, Algolia will only work in the first div it encounters, which will be the top bar search - hence it's working fine for you on desktop. Here's what I found:

One snag is that the Algolia code requires each searchbox div to have its own id - at the moment we reuse the searchbox code exactly between the two locations so that won't work without a bit of tweaking, you just end up with two divs with the same id and only get the search box for one of them.

Our current code just duplicates the div in both locations (regardless of search method). I can probably revisit this and see if we can do something without actually going mad with conditionals.

[kimberleybrown]

Thank you for the explanation @LisaFC

Any particular timeline for this issue? We are using the autocomplete version of Algolia which uses the pop-out modal and takes on a full-screen approach on responsive layouts.

I can look into a potential temporary fix for mobile, but I'm not sure how I'd approach expanding that into tablet.

[LisaFC]

Slightly hacky solution demoed here:
https://delicate-lamington-ca0cb8.netlify.app/docs/

Source: https://github.com/LisaFC/test-search

The main oddness is that I needed to put the footer script in twice (once for each div) but it does work! Also I could do something nicer in the layout with the special mobile version of the search prompt (you'll see it if you make the page mobile width).

[LisaFC]

Let me know if this works for you and I can do a proper/nicer PR. @jmichelgarcia I know you had similar issues.

[jmichelgarcia]

IIRC, I did a hack:

• Configured Docsy to only show one search box with sidebar_search_disable = true
• Used CSS to revert the rule that hides the top menu search bar when on mobile

[LisaFC]

Gotcha. So what I did is a bit more generalized in that it should work without having to change any of the current behaviour. There doesn't seem to be any way around having to put the script in twice (it clearly states in their docs that even if the selector matches multiple containers, it will only pick the first one), but maybe that's not too onerous...

[LisaFC]

@chalin @geriom @emckean does my rough solution look like it should work? If so I'll do a proper PR.