lepton-x memu and sidebar #4577

3 Answer(s)

• 

  0

  muhammedaltug created one year ago

  Hello

  You can override hover state styles

  .lpx-nav-menu .lpx-menu-item-link:hover {
      color: var(--lpx-navbar-text-color);
  }
  .lpx-nav-menu .lpx-menu-item-link:hover .lpx-menu-item-icon {
      color: var(--lpx-navbar-text-color);
  }
  .lpx-nav-menu .lpx-menu-item-link:hover .dd-icon {
      opacity: .5;
      color: var(--lpx-navbar-text-color);
  }
  

  Please follow this document for customizing layout.

  Save Cancel
• 

  0

  akifakinci created one year ago

  I don't want hover. When I clicked in the left menu, it opened. (https://prnt.sc/yaNfaiKd2mr0)

  Another question ("how to change place html element in right sidebar.") Example language option should be in the header field

  Thanks.

  Save Cancel
• 

  0

  muhammedaltug created one year ago

  Hello,

  You need to replace the layout for both requests. To disable the side menu opening when hovering, you need to remove hover-on-disabled classes from elements and implement the changes you want.

  To move language selection to the header section, you need to customize the settings service. You can remove language options from the setting area with the following code

  import {
    Setting,
    SettingsService,
    SideMenuLayoutService,
  } from '@volosoft/ngx-lepton-x/layouts';
  import { ThemeService } from '@volosoft/ngx-lepton-x';
  import { map } from 'rxjs/internal/operators';
  import { combineLatest, Observable } from 'rxjs';
  
  @Injectable()
  class MySettingService implements SettingsService {
    settings$: Observable<Setting[]> = combineLatest([
      this.themeService.stylesAsSettingsGroup$,
      this.layoutService.layoutsAsSettingsGroup$,
    ]).pipe(map(parents => parents.filter(parent => parent.children.length > 0)));
  
    selectedSettings$ = combineLatest([
      this.themeService.selectedStyle$.pipe(
        map(style => ({
          icon: style.icon,
          id: this.themeService.id,
        }))
      ),
      this.layoutService.selectedLayout$.pipe(
        map(layout => ({
          icon: layout.icon,
          id: this.layoutService.id,
        }))
      ),
    ]);
  
    constructor(private themeService: ThemeService, private layoutService: SideMenuLayoutService) {}
  }
  
  

  In your app.module.ts

  import { LPX_SETTINGS_SERVICE } from '@volosoft/ngx-lepton-x/layouts';
  @NgModule({
      providers: [
          // ..other providers
          {
            provide: LPX_SETTINGS_SERVICE,
            useClass: MySettingService,
          },
      ]
  })
  

  You can use the following stream to get available languages.

      this.sessionService
        .getLanguage$()
        .pipe(
          switchMap((currentLang) =>
            this.configStateService
              .getDeep$('localization.languages')
              .pipe(filter<LanguageInfo[]>(Boolean))
          )
        )
        .subscribe((settings) => {
          // read language information
        });
  

  If you want to download the source code and examine lepton-x codes, please follow the documentation

  Save Cancel