Skip to content

IBX-11964: Add native app switcher (login rail and back office side panel) - #1997

Open
tischsoic wants to merge 2 commits into
new-menufrom
IBX-11964-app-switcher
Open

IBX-11964: Add native app switcher (login rail and back office side panel)#1997
tischsoic wants to merge 2 commits into
new-menufrom
IBX-11964-app-switcher

Conversation

@tischsoic

@tischsoic tischsoic commented Aug 6, 2026

Copy link
Copy Markdown
Contributor
🎫 Issue IBX-11964

Related PRs:

Description:

Native app switcher replacing both the hardcoded login-page brand sidebar and (functionally) the vendored Qntm widget from ibexa/app-switcher, which is being discontinued.

One shared Twig partial (ui/component/app_switcher/app_switcher.html.twig) renders the app list in two contexts:

  • Login / account pages — always-open dark rail (--login modifier), new design: 64px rail, 32px brand logos, no right border, Cohesivo shown as the active app (white tile). Replaces the hardcoded ibexa-login__sidebar markup in account/base.html.twig; no JS involved (the login entry has no window.ibexa).
  • Back office — a grid-dots toggler as the left-most header element opens a white 64px side rail (--panel modifier) that pushes the content (never covers the main menu). The toggler's header column is permanently 64px wide and flush with the viewport edge, so the button does not move between states; when open it turns white and visually fuses with the rail below (single structure, incl. the 48×1 top divider). Cohesivo is the active app and links to the dashboard; other apps open in new tabs. Esc / outside click / toggler close the panel; focus returns to the toggler; aria-expanded/aria-controls wired; width transition uses $ibexa-admin-transition-* and respects prefers-reduced-motion.

Implementation notes:

  • The toggler uses the new app-switcher sprite icon added to the design system in IBX-11964: Add app-switcher icon design-system#127 — no matching glyph existed in the ids icon set (apps is a window shape, view-grid is 2×2).
  • Colors map to existing tokens: rail dark = $ibexa-color-black (exact match for the design's #0e1216), hover/active tile = $ibexa-color-light-400, divider = $ibexa-color-light.
  • ibexa_menu.en.xliff entries generated with jms:translation:extract.
  • Added gap: 16px to .ibexa-main-header — the three header columns had no minimum spacing, so the brand column could touch the search bar at some viewport widths.
  • The design reference is the shared app-switcher design as implemented in Quable PIM (HTML/CSS export); Figma frames 1146-38768 / 1135-69454 in the Design System file are the canonical source.

For QA:

  • /admin/login (logged out): dark rail with 6 brand links, Cohesivo highlighted (white tile). Links open in new tabs. Rail is aria-hidden (decorative).
  • Any BO page: grid-dots button at the very top-left (white dots on the dark header, does not move when toggled). Click → white rail slides open below it, pushing the main menu and content right by 64px; the menu stays fully visible. Cohesivo tile highlighted, clicking it goes to the dashboard (same tab); other tiles open external sites in new tabs. Close via the button, Esc (focus returns to the button), or clicking anywhere outside. State is not persisted across page loads (intentionally transient).
  • Pre-existing and unrelated: on a new-menu-based build combined with product-catalog 6.0, the console shows Cannot find module '@ibexa-admin-ui/.../design.system.provider' from the UDW bundle (module was added to admin-ui 6.0 by IBX-11413 and is not on new-menu yet).
  • The old Qntm switcher (top-right, from ibexa/app-switcher) is untouched by this PR — the package's removal is handled separately.

Documentation:

…anel)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@sonarqubecloud

sonarqubecloud Bot commented Aug 6, 2026

Copy link
Copy Markdown

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants