search

coreui / coreui-free-angular-admin-template

CoreUI Angular is free Angular 18 admin template based on Bootstrap 5
https://coreui.io/product/free-angular-admin-template/
MIT License
1.69k stars 1.19k forks source link

v2 replace perfect scrollbar with ngx-scrollbar #261

Closed Bykiev closed 1 week ago

Bykiev commented 5 months ago

Hi, I know v2 in not supported, but with angular 16 we can't use viewEngine libraries. That's why we need to replace it with ngx-scrollbar. I've only one issue: when the menu is collapsed, it's not possible to expand child menu items. I've tried to fix it with no luck. Can you please help to make it working?

<app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)">
    <ng-scrollbar>
        <app-sidebar-nav [navItems]="menuItems$ | async"></app-sidebar-nav>
    </ng-scrollbar>
    <app-sidebar-minimizer></app-sidebar-minimizer>
</app-sidebar>
xidedix commented 5 months ago

@Bykiev with Angular 16, make sure you've got installed:

For sidebar minimized, you'll have to disable the scrollbar. Try sth like:

<app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized (minimizedChange)="toggleMinimize($event)">
  <ng-scrollbar [disabled]="appSidebar.minimized">
    <app-sidebar-nav [navItems]="menuItems$ | async" />
  </ng-scrollbar>
  <app-sidebar-minimizer />
</app-sidebar>
Bykiev commented 5 months ago

Thank you, unfortunately it doesn't working as expected. With the disabled ng-scrollbar the native scrollbar appears, but still it's not possible to expand children items. With perfect scrollbar it was achieved by setting suppressScrollX: true

xidedix commented 5 months ago

@Bykiev you're right. In this case, for minimised sidebar, we'll have to remove ng-scrollbar completely. What about: 

<app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized (minimizedChange)="toggleMinimize($event)">
  <ng-scrollbar [disabled]="appSidebar.minimized" *ngIf="!appSidebar.minimized; else sidebarNav">
    <ng-container *ngTemplateOutlet="sidebarNav" />
  </ng-scrollbar>
  <ng-template #sidebarNav>
    <app-sidebar-nav [navItems]="navItems" />
  </ng-template>
  <app-sidebar-minimizer />
</app-sidebar>
Bykiev commented 5 months ago

Thank you, looks much better, but after minimization the scrollbar is not working. I'd like to make it working even the sidebar is minimized

github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

github-actions[bot] commented 2 weeks ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions