Bug: Menu item loses selection or is not marked active when using useHash or baseHref #9050

ldias created 13 days ago

Affected theme

LeptonX (Angular)

Description

When using Angular with useHash: true or a custom baseHref (e.g. /app/), the menu selection in LeptonX does not behave correctly:

The active menu item is not marked as selected after navigation.
In some cases, the previously selected item loses its active state when expanding another submenu without navigating.
The issue does not occur when using default Angular routing (useHash: false and <base href="/">).

Expected behavior

Menu items should be correctly marked as selected even when useHash or a custom baseHref is used.
When navigating (via router or programmatically), the corresponding menu item should be highlighted.
When opening a submenu without navigating, the previously selected item should not lose its selection.

Actual behavior

With useHash: true, location.pathname always returns /, causing selected logic to fail.
With <base href="/app/">, location.pathname returns /app, which also breaks comparisons.
In LeptonX, the code uses location.pathname directly to determine the selected menu item, which does not account for useHash or baseHref.

Code reference

Inside the LeptonX Angular handling logic (routes.service.ts), there is a piece of code like:

this.router.events.pipe(
  filter(e => e instanceof NavigationEnd),
  map(() => location.pathname) //problematic
)

This does not work reliably with useHash or custom base paths.

maliming created 10 days ago

Support Team Fullstack Developer

Our angular team will check it asap.

Thanks.

sumeyye.kurtulus created 9 days ago

Support Team Angular Expert

Hello, and thank you for bringing this to our attention. This issue has been identified and will be addressed in the upcoming release.

In the meantime, you can work around the problem by overriding the relevant service as follows:

// custom-route.service.ts
...
import { RoutesService } from '@volo/ngx-lepton-x.core';
...

@Injectable({
  providedIn: 'root',
})
export class CustomRouteService extends RoutesService {
  location = inject(Location);
  constructor() {
    super();
  }

  override currentNavigation: Signal<string> = toSignal(
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(
        () => this.router.url
        // You can also use this if you prefer using `useHash: true` option
        // () => this.location.path(true)
      )
    ),
    // { initialValue: this.location.path(true) }
    { initialValue: this.router.url }
  );
}

@NgModule({
  providers: [
    { provide: RoutesService, useClass: CustomRouteService },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}