[bug] Sidebar: No collapsible visibility on Mobile.
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 177
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 48
Description
OK
BAD
Steps to reproduce:
1. Use Sidebar.Provider with default collapsible behavior.
2. Render Sidebar with several Sidebar.Group collapsible blocks, each with Sidebar.GroupLabel + Sidebar.GroupContent + nav links (defaultOpen is fine).
3. Resize to width ≤ 767px.
4. Open the mobile sidebar.
Result: You won't be able to view the items inside collapsible groups.
Why is this?
`grid-template-rows` does not resolve to `1fr`, instead resolves to `0fr`. No space to display the items.
Doing the change to the class in the browser's developer tools fixes it.
Impact:
`emdash-cms/admin` uses this:
https://github.com/emdash-cms/emdash/issues/101
Suggested fix:
Treat the open mobile drawer like the expanded desktop sidebar: Either put the same group/sidebar + data-state="expanded" on its root, or stop tying collapsible group height to group-data-[state=expanded]/sidebar when you’re on the mobile sheet.
Do you think @ask-bonk could take this one up? 👀
Contributor guide
Assessment
This issue has not been assessed yet.