Lepton theme v5.3.3 - Is it possible to customize Mobile Navbar Component ? #5392

8 Answer(s)

• 

  0

  masum.ulu created 9 months ago

  Support Team Angular Developer

  Hi Sergie,

  Yes you can change NavbarComponent with eThemeLeptonComponents.NavItems key from @volo/abp.ng.theme.lepton library.

  For detail please check Component replacement document

  Save Cancel
• 

  0

  Sergei.Gorlovetsky created 9 months ago

  Hi Masum,

  Thank you for your response.

  This is my source code: Replace Component: Custom Navbar content: You can see that the navbar looks like not affected by the above code.

  Do I need to create nav follow any template ? Or please point out what I am wrong here.

  Best Regards, Sergei

  Save Cancel
• 

  0

  masum.ulu created 9 months ago

  Support Team Angular Developer

  Hi again,

  Sorry I misunderstand your question, my reply was about Theme Lepton not LeptonX also it was Navbar not MobileNavbar

  If you want to change mobile navbar on LeptonX, you can follow the below codes

  import { ReplaceableComponentsService } from '@abp/ng.core';
  import { eThemeLeptonXComponents } from '@abp/ng.theme.lepton-x';
  
  
  export class AppComponent {
    constructor(replaceableComponents: ReplaceableComponentsService) {
      replaceableComponents.add({
        key: eThemeLeptonXComponents.MobileNavbar, //This is the key for mobile navbar
        component: CustomNavbarMobileComponent,
      });
    }
  }
  

  Save Cancel
• 

  0

  Sergei.Gorlovetsky created 9 months ago

  Hi,

  Sorry, my mistake, you are right. I double check then find out that we are using LeptonX theme instead. "@volosoft/abp.ng.theme.lepton-x": "^1.0.0-rc.3",

  I made the modification in AppComponent as:

  Custom NavBar content:

  UI in mobile mode:

  I would like to customize the Mobile NavBar in order to remove the Home button. The html in the Custom NavBar component is just draft. Is it invalid to be applied or we have any other issues here ? Could you please take a look ? Thank you very much.

  Sergei

  Save Cancel
• 

  0

  masum.ulu created 9 months ago

  Support Team Angular Developer

  Hi again,

  You can customize mobile menu items via

  NavbarService from @volo/ngx-lepton-x.core

  • This service provides menu items on left part

  Also

  MobileNavbarService from @volosoft/ngx-lepton-x

  • This service provides settings and userProfileActions items

  In that way you don't need to replace component completely, just patch the items by key.

  Save Cancel
• 

  0

  Sergei.Gorlovetsky created 9 months ago

  Hi Masum,

  Could you please provide some samples or documentation ? Thank you very much.

  Save Cancel
• 

  0

  masum.ulu created 9 months ago

  Support Team Angular Developer

  Hi again serge,

  Your project version is really old can you please create new project with the newer versions and try to replace again ? I've replace mobile toolbar also you can check: https://support.abp.io/QA/Questions/4781/Mobile-Navbar similar problem and it fixed

  Save Cancel
• 

  0

  Sergei.Gorlovetsky created 9 months ago

  Hi Masum, We are in the middle of the upgrade to the latest. Thanks you for the suggestion! Best, Sergei

  Save Cancel

  1