Open Closed

lepton-x memu and sidebar #4577


User avatar
0
akifakinci created

Hi. how can i disable it. Hover effect in left menu. ticket 2 ) how to change place html element in right sidebar. language option should be in the header field.

  • ABP Framework version: 7.0.1
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

3 Answer(s)
  • User Avatar
    0
    muhammedaltug created

    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.

  • User Avatar
    0
    akifakinci created

    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.

  • User Avatar
    0
    muhammedaltug created

    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

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19