Open Closed

abp - sidebar menu #8886


User avatar
0
leeneshk created

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


9 Answer(s)
  • User Avatar
    0
    sumeyye.kurtulus created
    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.

  • User Avatar
    0
    leeneshk created

    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

  • User Avatar
    0
    sumeyye.kurtulus created
    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

  • User Avatar
    0
    leeneshk created

    Hello, thank you for your response,

    So I think we misunderstanding each other,

    1. I want to hide this sidebar if user is not authenticated:
      image.png

    2. 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

  • User Avatar
    0
    sumeyye.kurtulus created
    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.

  • User Avatar
    0
    leeneshk created

    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?

  • User Avatar
    0
    sumeyye.kurtulus created
    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

  • User Avatar
    0
    leeneshk created

    Thank you very much, I am going to give this a try and let you know, thank you for your time

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    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.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 13, 2025, 04:08