ABP 10.5 Angular Lepton Style 4 sidebar submenu issue

Summary

After upgrading an Angular application to ABP 10.5, sidebar parent menu items can become current and update the expanded-route state while their nested submenu remains hidden. The SaaS parent is a reproducible example: the host user can retrieve the tenant data, but the Tenants and Editions submenu entries do not become visible.

The application uses Lepton Style 4 and the corresponding lepton4 CSS bundle. The click and authorization flow are working; the failure occurs in the final CSS/layout state.

Environment

• ABP Framework packages: 10.5.0
• Angular: 21.2.x
• Theme package: @volo/abp.ng.theme.lepton version 10.5.0
• Lepton theme style: Style 4 (lepton4 bundle)
• Application layout: left/opened sidebar (lp-opened-sidebar)
• User context: authenticated host user

ABP Studio solution configuration

ABP Studio's Solution Configuration reports:

• Template: app
• Template type: Classic
• Created ABP Studio version: 0.8.1
• Current ABP Studio version: 3.0.6
• Tiered: Yes
• UI framework: Angular
• Theme: LeptonX (not sure why - we're using Lepton classic)
• Theme style: system
• Progressive Web App: No
• Database provider: EF
• Database management system: SQL Server
• Separate tenant schema: Yes
• Mobile framework: none
• Public website: No
• Optional modules: GDPR, TextTemplateManagement, LanguageManagement, AuditLogging, SaaS, and OpenIddictAdmin

There is an apparent metadata/runtime discrepancy: Solution Configuration identifies the theme as LeptonX, while the current runtime source uses the legacy Lepton Angular package (@volo/abp.ng.theme.lepton), provideThemeLepton(), the legacy Volo.Abp.LeptonTheme server modules, and Lepton Style 4 (lepton4.css). This should be considered when diagnosing the issue.

Reproduction

1. Sign in as a host user.
2. Open the SaaS sidebar menu.
3. Observe that the parent menu receives the current class.
4. Observe that the nested items remain invisible.

The route state contains the expected expanded SaaS entry:

expandedRoutes = Set(1) { 'Saas::Menu:Saas1' }

The route node contains the expected child entries (Tenants and Editions), and the API returns the expected tenant data.

Browser evidence

• The parent click handler executes.
• expandedRoutes is updated.
• The parent route receives current.
• The submenu contains its child route elements.
• The submenu's computed display remains none.
• The document body has abp-application-layout lp-opened-sidebar lp-body-fixed.
• The rendered submenu does not contain the d-block overflow-hidden class that the Lepton RoutesComponent uses for the sidebar placement.

The loaded Lepton Style 4 CSS contains the rule that hides nested sidebar lists:

.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi > ul ul {
  display: none;
}

This indicates a layout/CSS state mismatch: the route is marked current and expanded, but the template does not apply the class that makes the nested list visible for the active layout.

The console warning observed during diagnosis concerned Angular animation of overflow. It is not the cause of the hidden submenu.

Application-side configuration audit

The application-side configuration was checked for interference:

• Lepton menu placement is configured as Left.
• Lepton menu status is configured as AlwaysOpened.
• Lepton Style 4 is selected, and the lepton4 bundle is loaded.
• The standard Lepton provider is used.
• No custom replacement is registered for RoutesComponent, abp-routes, or the sidebar component.
• No application code sets the menu placement to Top or manually manages the Lepton body layout classes.
• Custom sidebar CSS does not hide nested menus. The only visibility override is the workaround below.

The body correctly reports the left-sidebar state, so the mismatch appears to be within Lepton's layout state/route component interaction rather than an application override.

Current workaround

The application keeps current submenus visible in the opened sidebar:

// ABP 10.5/Lepton can render a sidebar route as `current` while its layout
// state omits the template's `d-block` class. lepton4.css then hides every
// nested UL under `.lp-opened-sidebar`, leaving expanded submenus at display:none.
// Keep current sidebar submenus visible until the upstream layout/CSS mismatch
// is resolved.
.lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li.current > ul {
  display: block !important;
}

After applying this workaround, the SaaS submenu opens correctly.

Lepton package verification

The application uses the latest stable Lepton package currently available from the npm registry:

• @volo/abp.ng.theme.lepton: 10.5.0
• Lepton Style 4 is sourced from the package's lepton4.min.css.

The 10.6.0-rc.1 package was also inspected. Its lepton4.min.css is unchanged, and its compiled RoutesComponent retains the same isMenuPlacementTop() && !smallScreen() conditions. It does not appear to fix this issue. It is built for the ABP 10.6/Angular 22 package line and should be evaluated only as part of a coordinated upgrade.

Request to ABP

Please confirm whether this is a known regression or layout detection issue in the Angular Lepton Style 4 theme. Specifically:

1. Why can RoutesComponent render a sidebar route without d-block overflow-hidden while the document is in lp-opened-sidebar mode?
2. Should the component use the actual sidebar/body layout state instead of the menu-placement state when deciding submenu visibility?
3. Is an upstream fix planned for a subsequent 10.5 patch or the ABP 10.6 release?

The following references may be relevant, although neither is an exact match to this reproduction:

• ABP Support question 10671 — related Lepton parent/submenu behavior, but Blazor-specific.
• ABP GitHub issue 25709 — related Angular LeptonX navigation behavior.