EasyCorp / EasyCorp/EasyAdminBundle

Closing the mobile sidebar requires clicking the dimming overlay; no clean outside-click close without the backdrop

Open
#7,807 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
4.3k
Forks
1.1k
Avg merge
8d 2h
Merged PRs (30d)
11

Description

Description

On mobile, opening the sidebar (hamburger) adds a modal-backdrop element (see et() in the bundle's app.js). The ONLY way to close the sidebar by an outside click is to click that backdrop — which also dims/blurs the page behind it.

Use cases this does not cover:

  1. A project that does not want the dimming/blur overlay still has no clean way to get "click anywhere outside the sidebar → close", because removing/restyling the backdrop also breaks the close-on-outside-click behaviour.
  2. The backdrop has no label/role/A11y attributes; relying on it as a close control is fragile.

Expected

  • Provide a way to close the open mobile sidebar on any click outside .sidebar-wrapper (and outside #navigation-toggler), independent of the modal-backdrop.
  • Make the outside-click-close a configurable/documented behaviour (e.g. a small JS/data attribute), so projects can keep or drop the backdrop separately from the close behaviour.

Workaround we use today (not viable upstream)

We had to remove the backdrop with a MutationObserver in our own JS and re-implement the outside-click-close by listening to document clicks:

document.addEventListener('click', function(e) {
    if (!document.body.classList.contains('ea-mobile-sidebar-visible')) return;
    if (e.target.closest('.sidebar-wrapper')) return;
    if (e.target.closest('#navigation-toggler')) return;
    document.body.classList.remove('ea-mobile-sidebar-visible');
});

This is exactly what the bundle's et() does via the backdrop's onclick — it should live in the bundle, not in app code.

Environment

EasyAdmin v5.5.1 (@media (max-width:991px) responsive header / mobile sidebar).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the mobile-sidebar code in the bundled app.js, especially et() and its modal-backdrop click handler, then trace how the sidebar visibility class is toggled. Add a configurable outside-click behavior that excludes .sidebar-wrapper and #navigation-toggler while remaining independent of the backdrop. Done means projects can keep or remove the dimming overlay without losing outside-click closing.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.