cloudflare / cloudflare/kumo

[bug] Sidebar: No collapsible visibility on Mobile.

Open
#366 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.9k
Forks
177
Avg merge
1d 5h
Merged PRs (30d)
48

Description

OK
Image

BAD
Image

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.