EasyCorp / EasyCorp/EasyAdminBundle
Closing the mobile sidebar requires clicking the dimming overlay; no clean outside-click close without the backdrop
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:
- 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.
- 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 themodal-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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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