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
Run npm create hyas@latest -- --template doks.
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.
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)
https://github.com/user-attachments/assets/51491728-542f-4af9-a633-7c659debfe30
Actual result
Hamburger menu does not open sidebar when flexsearch is disabled.
Screen recording of sidebar not opening with flexsearch disabled (bad)
https://github.com/user-attachments/assets/b47ed341-f790-4e01-9359-3e5303693741
Environment
(I assume the issue template should ask for `npm ls` instead of `npm run info` here?)
```
hyas-project@0.0.0 /home/joe/code/doks-issue-repro/hyas-project
├── @hyas/doks-core@1.6.1
├── @hyas/images@3.2.0
├── @hyas/inline-svg@1.1.0
├── @hyas/seo@2.3.0
├── @tabler/icons@3.12.0
├── gethyas@2.4.2
├── prettier@3.3.3
└── vite@5.4.1
```
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.
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:
Clearly document that bootstrapJavascript must be set to true if flexsearch is disabled on the DocSearch recipe.
Description
Clicking the hamburger menu to open the sidebar on a small screen when
flexSearch = falsehas 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
npm create hyas@latest -- --template doks.npm run devon phone (or in responsive design mode in browser devtools).flexSearch = falseinconfig/_default/params.tomland reload.Expected result
Hamburger menu should open sidebar regardless of whether flexsearch is enabled.
Screen recording of sidebar opening with flexsearch enabled (good)
https://github.com/user-attachments/assets/51491728-542f-4af9-a633-7c659debfe30Actual result
Hamburger menu does not open sidebar when flexsearch is disabled.
Screen recording of sidebar not opening with flexsearch disabled (bad)
https://github.com/user-attachments/assets/b47ed341-f790-4e01-9359-3e5303693741Environment
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 = falseby 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.
bootstrapJavaScript = trueby 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:bootstrapJavascriptmust be set totrueif flexsearch is disabled on the DocSearch recipe.