Skip to content

fix(admin): show nav items in mobile sidebar drawer#490

Open
all3f0r1 wants to merge 1 commit intoemdash-cms:mainfrom
all3f0r1:fix/mobile-sidebar-nav-454
Open

fix(admin): show nav items in mobile sidebar drawer#490
all3f0r1 wants to merge 1 commit intoemdash-cms:mainfrom
all3f0r1:fix/mobile-sidebar-nav-454

Conversation

@all3f0r1
Copy link
Copy Markdown
Contributor

What does this PR do?

Fixes the mobile sidebar not displaying navigation pages within sections (Content, Manage, Admin, Plugins). The section headers were visible but all pages inside them were hidden.

Root cause: Kumo's Sidebar component renders the mobile sidebar inside a Sheet/Dialog. The inner div[data-sidebar="sidebar"] gets data-mobile="true" but no data-state attribute. Kumo's SidebarGroupContent uses grid-rows-[0fr] as default (hidden) and only shows content via group-data-[state=expanded]/sidebar:grid-rows-[1fr]. Without data-state="expanded" on mobile, the selector never matches and all collapsible group content stays invisible.

Fix: Adds a CSS override targeting .emdash-sidebar[data-mobile="true"] [data-sidebar="group-content"] to force grid-template-rows: 1fr in the mobile drawer.

Closes #454

Type of change

  • Bug fix
  • Feature (requires approved Discussion)
  • Refactor (no behavior change)
  • Documentation
  • Performance improvement
  • Tests
  • Chore (dependencies, CI, tooling)

Checklist

  • I have read CONTRIBUTING.md
  • pnpm typecheck passes
  • pnpm --silent lint:json | jq '.diagnostics | length' returns 0
  • pnpm test passes (or targeted tests for my change)
  • pnpm format has been run
  • I have added/updated tests for my changes (if applicable)
  • I have added a changeset (if this PR changes a published package)
  • New features link to an approved Discussion: https://github.com/emdash-cms/emdash/discussions/...

AI-generated code disclosure

  • This PR includes AI-generated code

Screenshots / test output

This is a CSS-only fix targeting the mobile sidebar drawer. The change is a single grid-template-rows: 1fr !important override scoped to [data-mobile="true"], matching the existing pattern used for collapsed sidebar icon mode.

Kumo's mobile sidebar renders inside a Sheet without a data-state
attribute, so the GroupContent grid-rows selector
(group-data-[state=expanded]) never matches and all section items
stay at grid-rows-[0fr] (hidden). Adds a CSS override targeting
[data-mobile="true"] to force group content open in the mobile drawer.

Closes emdash-cms#454

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 12, 2026

🦋 Changeset detected

Latest commit: 0863a33

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages
Name Type
@emdash-cms/admin Patch
emdash Patch
@emdash-cms/cloudflare Patch
@emdash-cms/plugin-ai-moderation Patch
@emdash-cms/plugin-atproto Patch
@emdash-cms/plugin-audit-log Patch
@emdash-cms/plugin-color Patch
@emdash-cms/plugin-embeds Patch
@emdash-cms/plugin-forms Patch
@emdash-cms/plugin-webhook-notifier Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 12, 2026

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@490

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@490

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@490

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@490

emdash

npm i https://pkg.pr.new/emdash@490

create-emdash

npm i https://pkg.pr.new/create-emdash@490

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@490

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@490

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@490

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@490

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@490

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@490

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@490

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@490

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@490

commit: 0863a33

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Side Menu in Mobile layout mode. Does not display pages in section

1 participant