abp - sidebar menu #8886 | Support

leeneshk created 16 days ago

Hello, I hope you are doing well

I need some assistance or direction on a few things in regards to the LeptonX theme.

I would like to hide the side-bar when a user is not authenticated, and only once they log in, the side-bar displays.
I would also like to add our footer to the side-bar instead of using the <abp-footer> tag.

Is this possible on LeptonX Commercial?

We are currently using the commercial ABP Angular project.

Thank you

sumeyye.kurtulus created 16 days ago

Support Team Angular Expert

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.

leeneshk created 16 days ago

Hello there,

Thank you for the above, I have used the replaceableComponent for the footer, but I want to move the footer to the <abp-sidebar>

Also I want to hide the <abp-sidebar> if a user is not authenticated, and then display it when a user logs in successfully

sumeyye.kurtulus created 16 days ago

Support Team Angular Expert

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,
    });
}

Screen Shot 2025-02-28 at 16.37.05 PM.png

leeneshk created 13 days ago

Hello, thank you for your response,

So I think we misunderstanding each other,

I want to hide this sidebar if user is not authenticated:
I want to inject my footerComponent into the above 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

sumeyye.kurtulus created 13 days ago

Support Team Angular Expert

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.

leeneshk created 13 days ago

Thank you for the clarification, so if I understand your comment correctly, I can add the above components to my project and I should be able to replicate what I would like to do?

sumeyye.kurtulus created 13 days ago

Support Team Angular Expert

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. Screen Shot 2025-03-03 at 16.20.25 PM.png