refactor(default-layout): scrollbar cleanups

Author: xidedix

src/app/layout/default-layout/default-layout.component.html

@@ -13,9 +13,10 @@
     </c-sidebar-brand>
   </c-sidebar-header>
 
-  <ng-scrollbar #scrollbar="ngScrollbar" (updated)="onScrollbarUpdate(scrollbar.state)" class="overflow" pointerEventsMethod="scrollbar" visibility="hover">
-    <c-sidebar-nav #overflow [navItems]="navItems" dropdownMode="close" compact />
+  <ng-scrollbar pointerEventsMethod="scrollbar" visibility="hover">
+    <c-sidebar-nav [navItems]="navItems" dropdownMode="close" compact />
   </ng-scrollbar>
+
   @if (!sidebar1.narrow) {
     <c-sidebar-footer cSidebarToggle="sidebar1" class="border-top d-none d-lg-flex" toggle="unfoldable" style="cursor: pointer;">
       <button cSidebarToggler aria-label="Toggle sidebar fold"></button>

src/app/layout/default-layout/default-layout.component.scss

@@ -1,11 +1,20 @@
-:host {
+:host::ng-deep {
   .ng-scrollbar {
     --scrollbar-padding: 1px;
     --scrollbar-size: 5px;
-    --scrollbar-thumb-color: var(--cui-gray-500, #999);
-    --scrollbar-thumb-hover-color: var(--cui-gray-400, #999);
+    --scrollbar-thumb-color: var(--cui-gray-500, #aab3c5);
+    --scrollbar-thumb-hover-color: var(--cui-gray-400, #cfd4de);
     --scrollbar-hover-size: calc(var(--scrollbar-size) * 1.5);
+    --scrollbar-border-radius: 5px;
   }
+
+  .ng-scroll-content {
+    display: flex;
+  }
+
+  //.sidebar-nav {
+  //  scrollbar-color: var(--cui-gray-500, #444) transparent;
+  //}
 }
 
 // ng-scrollbar css variables

src/app/layout/default-layout/default-layout.component.ts

@@ -33,26 +33,20 @@ function isOverflown(element: HTMLElement) {
     SidebarComponent,
     SidebarHeaderComponent,
     SidebarBrandComponent,
-    RouterLink,
-    IconDirective,
-    NgScrollbar,
     SidebarNavComponent,
     SidebarFooterComponent,
     SidebarToggleDirective,
     SidebarTogglerDirective,
-    DefaultHeaderComponent,
-    ShadowOnScrollDirective,
     ContainerComponent,
+    DefaultFooterComponent,
+    DefaultHeaderComponent,
+    IconDirective,
+    NgScrollbar,
     RouterOutlet,
-        DefaultFooterComponent
+    RouterLink,
+    ShadowOnScrollDirective
   ]
 })
 export class DefaultLayoutComponent {
-  public navItems = navItems;
-
-  onScrollbarUpdate($event: any) {
-    // if ($event.verticalUsed) {
-    // console.log('verticalUsed', $event.verticalUsed);
-    // }
-  }
+  public navItems = [...navItems];
 }