[Angular] Menu Placement in leptonX comercial #3546

3 Answer(s)

• 

  0

  muhammedaltug created 2 years ago

  Hello,

  The top menu layout will available in the next versions.

  You can change the default theme with the following code:

  //app.module.ts
  import { NgModule } from '@angular/core';
  import { lightTheme, LPX_THEME_STYLES_DEFAULTS, LPX_THEMES } from '@volosoft/ngx-lepton-x';
  
  
  
  function setLpxThemes() {
    const themes = LPX_THEME_STYLES_DEFAULTS.map(style =>
      Object.assign({}, style, {
        defaultTheme: style.styleName === lightTheme.styleName,
      })
    );
    return themes;
  }
  
  @NgModule({
    imports: [ /* imports */],
    declarations: [/*declarations*/],
    providers: [
      // ...other providers
      {
        provide: LPX_THEMES,
        useFactory: setLpxThemes
      },
    ],
    bootstrap: [/*bootstrap comp*/],
  })
  export class AppModule {}
  
  

  Save Cancel
• 

  0

  FPT_TuyenDN1 created 2 years ago

  Hello,

  The top menu layout will available in the next versions.

  You can change the default theme with the following code:

  //app.module.ts 
  import { NgModule } from '@angular/core'; 
  import { lightTheme, LPX_THEME_STYLES_DEFAULTS, LPX_THEMES } from '@volosoft/ngx-lepton-x'; 
   
   
   
  function setLpxThemes() { 
    const themes = LPX_THEME_STYLES_DEFAULTS.map(style => 
      Object.assign({}, style, { 
        defaultTheme: style.styleName === lightTheme.styleName, 
      }) 
    ); 
    return themes; 
  } 
   
  @NgModule({ 
    imports: [ /* imports */], 
    declarations: [/*declarations*/], 
    providers: [ 
      // ...other providers 
      { 
        provide: LPX_THEMES, 
        useFactory: setLpxThemes 
      }, 
    ], 
    bootstrap: [/*bootstrap comp*/], 
  }) 
  export class AppModule {} 
   
  

  thank you, it's worked. I also want to set default auto collapse menu like this How I do that?

  Save Cancel
• 

  0

  muhammedaltug created 2 years ago

  Hello,

  Can you add the following provider to your AppModule?

  //app.module.ts
  import { APP_INITIALIZER, Injector, NgModule } from '@angular/core';
  import { LayoutService } from '@volo/ngx-lepton-x.core';
  
  function setCollapsedSidemenu(injector: Injector) {
    return () => {
      const layoutService = injector.get(LayoutService);
  
      layoutService.addClass('hover-trigger');
    };
  }
  
  @NgModule({
    imports: [ /* imports */],
    declarations: [/*declarations*/],
    providers: [
      // ...other providers
      {
        provide: APP_INITIALIZER,
        multi: true,
        useFactory: setCollapsedSidemenu,
        deps: [Injector],
      },
    ],
    bootstrap: [/*bootstrap comp*/],
  })
  export class AppModule {}
  
  

  Save Cancel