bug: mobile sidebar is broken with flexSearch = false

[jo3-l]

Description

Clicking the hamburger menu to open the sidebar on a small screen when flexSearch = false has no effect: the sidebar remains hidden. For context, we encountered this issue when switching to DocSearch following the recipe on the Doks documentation. I identified the root cause below.

Steps to reproduce

1. Run npm create hyas@latest -- --template doks.
2. Open the resulting website from npm run dev on phone (or in responsive design mode in browser devtools).
   • Observe that the hamburger menu opens the sidebar correctly.
3. Disable flexsearch by setting flexSearch = false in config/_default/params.toml and reload.
   • Observe hamburger menu no longer opens sidebar--that is, clicking the hamburger menu has no effect.

Expected result

Hamburger menu should open sidebar regardless of whether flexsearch is enabled.

Screen recording of sidebar opening with flexsearch enabled (good)

flexsearch-enabled.mp4

Actual result

Hamburger menu does not open sidebar when flexsearch is disabled.

Screen recording of sidebar not opening with flexsearch disabled (bad)

flexsearch-disabled.mp4

Environment

(I assume the issue template should ask for npm ls instead of npm run info here?)

[email protected] /home/joe/code/doks-issue-repro/hyas-project
├── @hyas/[email protected]
├── @hyas/[email protected]
├── @hyas/[email protected]
├── @hyas/[email protected]
├── @tabler/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Root cause and additional commentary

Bootstrap's JavaScript components are responsible for opening the sidebar offcanvas when the hamburger menu button is clicked. Hence, when Bootstrap's JavaScript components are not included in the build, it is expected that the button click has no effect.

However, bootstrapJavascript = false by default (!), so it is somewhat surprising that the sidebar works at all when flexsearch is enabled. It turns out that the flexsearch search modal imports bootstrap and so enabling flexsearch transitively includes Bootstrap into the final build. When flexsearch is disabled, though, nothing imports Bootstrap thereby breaking the sidebar.

There are several ways to fix this issue.

1. Set bootstrapJavaScript = true by default, so that the sidebar works regardless of whether flexsearch is loaded. This solution is my preference; it seems accidental that the sidebar even works as is. But if you would prefer not to do this, there is the alternate option of:
2. Clearly document that bootstrapJavascript must be set to true if flexsearch is disabled on the DocSearch recipe.