Skip to content

Add a Sidebar Twig component#7729

Open
javiereguiluz wants to merge 2 commits into
EasyCorp:5.xfrom
javiereguiluz:sidebar_component
Open

Add a Sidebar Twig component#7729
javiereguiluz wants to merge 2 commits into
EasyCorp:5.xfrom
javiereguiluz:sidebar_component

Conversation

@javiereguiluz

Copy link
Copy Markdown
Collaborator

This adds a new <twig:ea:Sidebar> component to render the whole sidebar (logo, main menu, etc.) The component itself is not that interesting to end users because you'll rarely need it, but it makes other changes with impact for end users:

The internals of the current sidebar were legacy (old Bootstrap-era CSS/JS from the first EasyAdmin versions). Now it's a set of composable Twig components, inspired by shadcn/ui's Sidebar but deliberately simpler:

  • (feature) Added the ea:Sidebar component family: Sidebar, Sidebar:Header, Sidebar:Content, Sidebar:Group, Sidebar:Item, Sidebar:Submenu and Sidebar:Footer (all anonymous components).
  • (feature) Added a sidebar_footer block + ea:Sidebar:Footer component: contents always anchored to the bottom of the screen (menu items scroll underneath it), meant for important messages and notices.
  • (feature) New SubMenuItem::keepOpen() config method: renders a submenu always expanded, no matter the current URL, and makes it non-collapsible.
  • (improvement) menu.html.twig now chunks the flat menu item list into groups (sections become group labels) and renders everything through the new components; layout.html.twig keeps all its overridable blocks (sidebar, header, main_menu_wrapper, …) working.
  • (performance) Submenu accordion is now CSS-driven (grid-template-rows animation) instead of the old imperative style.maxHeight JavaScript.
  • (design) Expanded submenus display a thin vertical guide line and keep supporting icons in sub-items.
  • (design) In compact (icon rail) mode: hovering an item shows a pure-CSS tooltip (dark in light mode, light in dark mode); hovering an item with a submenu shows a flyout panel with the parent label as its title. Items with hidden badges display a small dot on the icon.
  • (design) The resizer handler now shows a directional cursor (left arrow to collapse, right arrow to expand; swapped in RTL).
  • (design) Icons and badges align with the first line of the label, also in multi-line menu items (align items: first baseline).
  • (accessibility) Items with submenus render a non-clickable <button> (with aria-expanded) instead of a fake link.
  • (accessibility) Compact tooltips and flyouts also open with keyboard focus (:focus-within); all animations respect prefers-reduced-motion.
  • (accessibility) The active menu item announces aria-current="page" and is scrolled into view on page load when it's outside the viewport.

@javiereguiluz javiereguiluz added this to the 5.x milestone Jul 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant