Bug: Lepton X Top Menu in Blazor Server not working when only using one language and style #8737

• ABP Framework version: v9.0.4, LeptonX 4.0.5
• UI Type: Blazor Server
• Database System: EF Core (PostgreSQL)
• Tiered (for MVC) or Auth Server Separated (for Angular): no
• Exception message and full stack trace:

Error: Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'querySelector') TypeError: Cannot read properties of null (reading 'querySelector') at new t (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:38651) at Function.create (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:38718) at t.initCaret (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:44470) at new t (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:41658) at Function.create (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:41705) at e.createSettingGroupWithMenu (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:91570) at e [as constructor] (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:72119) at new e (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:74385) at Function.create (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:74497) at t.createSettingGroups (https://localhost:44363/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/js/lepton-x.bundle.min.js:2:77280) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenuLayout.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

• Steps to reproduce the issue:

1. Create new solution with blazor server
2. Remove every language except one (like en)
3. Remove all styles in the service configuration of the AppNameBlazorModule except one. Like this

(Configure<LeptonXThemeOptions>(options =>
{
    options.Styles.Clear();

    options.Styles.Add("light",
        new LeptonXThemeStyle(
        LocalizableString.Create<CareHomeResource>("Theme:Light"),
        "bi bi-sun-fill"));
    options.DefaultStyle = "light";
});

4. Start application and get the exception.

From what i can see in the execption stack trace this must be an javascript issue of the lepton-x.bundle.min.js file when configuring the settings group. since the group for language or appearance wont be rented when not multiple languages or styles are added there is some null exception somewhere inn the js script where it expects these groups to be there.

For me the solution would be that the js does not fail and skips the non existent groups.

Note: Posted a similar error about the public site here: https://abp.io/qa/questions/8330/3a171a60-86d5-73d3-97fd-81e0f530b81a

Please fix this soon.