No, there will be no new item added since I suggested a patch for the parent route. If you can provide how you have implemented the solution, I can assist you further.
Hello, the new route will not be recognized by the navigation configuration if you did not add it to the routes. Because of this, the navigation bar item is not highlighted.
I can suggest you to patch the navigation item according to the navigated details page manually for the time being as explained here: https://abp.io/docs/latest/framework/ui/angular/modifying-the-menu#how-to-patch-or-remove-a-navigation-element
This will require further configuration based on your requirements, but here is a small workaround example:
import { RoutesService } from '@abp/ng.core';
import { Component, inject } from '@angular/core';
@Component({
selector: 'app-root',
template: `
...
`,
})
export class AppComponent {
private routesService = inject(RoutesService);
constructor() {
this.routesService.patch('::Menu:Dashboard', {
path: '/dashboard/test',
});
}
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardTestComponent } from '../dashboard-test/dashboard-test.component';
const routes: Routes = [
{
path: '',
component: DashboardComponent,
children: [{ path: 'test', component: DashboardTestComponent }],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class DashboardRoutingModule {}
You're very welcome! I'm happy to assist and look forward to hearing how it goes. Please don't hesitate to reach out if you need any further support.
Yes, exactly. It depends on how you want to implement the override. You can use the component replacement along with the NavbarComponent which may be shorter and easier.
You can also give a path reference in your tsconfig.json as in the screenshot.
Thank you for your clarification. You can use eThemeLeptonXComponents.Navbar key instead of Toolbar and Settings. If you override this component, you can also add your footer to the sidebar.
Can you perhaps just give me a direction to look for the sidebar or to customize this? I do not want to lose the sidebar which is pre-configured
If you do not want to override the whole navbar and create from scratch, you can check the NavbarComponent inside @volo/ngx-lepton-x.core package.
You can integrate the source code to your project by using this command abp add-package @volo/ngx-lepton-x.core --with-source-code.
Hello again, thank you for providing details. This is another problem which is going to be solved in the next release. You can use this style config to overcome this issue for the time being:
.lpx-header-bottom {
overflow: inherit !important;
}
I am refunding your ticket. Thank you for your cooperation.
You cannot technically move the footer to the sidebar for the time being. However, I can suggest you to add your custom footer to the Settings component key.
This approach would serve the hide/show requirement of the sidebar as in here. If you think that this does not cover your case, I can assist further.
if (!this.authService.isAuthenticated) {
this.replaceableComponents.add({
component: YourNewToolbarComponent,
key: eThemeLeptonXComponents.Toolbar,
});
this.replaceableComponents.add({
component: YourNewSettingsComponent,
key: eThemeLeptonXComponents.Settings,
});
}
Hello again, I am refunding your ticket. Thank you for your cooperation.
Hello,
You can use component replacement to achieve these points. You can find a reference in the documentation. I can also provide a sample implementation for the keys that you have been looking for:
import { AuthService, ReplaceableComponentsService } from '@abp/ng.core';
import { Component, inject } from '@angular/core';
import { eThemeLeptonXComponents } from '@volosoft/abp.ng.theme.lepton-x';
import { YourNewFooterComponent } from './your-new-footer/your-new-footer.component';
import { YourNewToolbarComponent } from './your-new-toolbar/your-new-toolbar.component';
import { YourNewSettingsComponent } from './your-new-settings/your-new-settings.component';
@Component({
selector: 'app-root',
template: `
...
`,
})
export class AppComponent {
private replaceableComponents = inject(ReplaceableComponentsService);
private authService = inject(AuthService);
constructor() {
this.replaceableComponents.add({
component: YourNewFooterComponent,
key: eThemeLeptonXComponents.Footer,
});
if (!this.authService.isAuthenticated) {
this.replaceableComponents.add({
component: YourNewToolbarComponent,
key: eThemeLeptonXComponents.Toolbar,
});
this.replaceableComponents.add({
component: YourNewSettingsComponent,
key: eThemeLeptonXComponents.Settings,
});
}
}
}
You can let us know if you need further assistance.
Thank you for your patience and for providing more details on your scenario — let’s wrap this up!
The antiforgery token mismatch issue you’re experiencing after logging out and trying to log back in from multiple tabs is expected behavior, tied to how browsers and the OpenID Connect flow handle session and cookie isolation.
Here’s why it happens:
Unfortunately, this behavior is inherent to browser security and not something ABP itself controls. You can also refer this documentation as my colleague mentioned before: https://learn.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-8.0#multiple-browser-tabs-and-the-synchronizer-token-pattern
I hope this clarifies the situation and provides some insight into why this behavior occurs.
