@ojiepermana/angular 21.1.19 → 21.1.22

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -11,6 +11,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { ScrollAreaComponent } from '@ojiepermana/angular/component';
 import { merge } from 'rxjs';
 
 /** Default registry key used when no id is specified. */
@@ -843,14 +844,13 @@ class SidebarComponent {
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "headerSlotClasses" }] : /* istanbul ignore next */ []));
     navClasses = computed(() => {
-        const base = [
-            'flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10',
-        ];
+        const base = ['min-h-full'];
         if (this.isCompact()) {
             base.push('px-2', '[&_.ui-nav-text]:mx-auto', '[&_.ui-nav-text]:w-10', '[&_.ui-nav-text]:justify-center', '[&_.ui-nav-text]:px-0');
         }
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
+    scrollViewportClasses = computed(() => 'overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10', ...(ngDevMode ? [{ debugName: "scrollViewportClasses" }] : /* istanbul ignore next */ []));
     footerClasses = computed(() => {
         const base = ['h-12 border-t border-brand'];
         if (this.isCompact()) {
@@ -980,11 +980,13 @@ class SidebarComponent {
           }
         </div>
       }
-      <nav [class]="navClasses()">
-        @for (item of resolvedItems(); track item.id) {
-          <ui-nav-item [item]="item" [compact]="isCompact()" />
-        }
-      </nav>
+      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
+        <nav [class]="navClasses()">
+          @for (item of resolvedItems(); track item.id) {
+            <ui-nav-item [item]="item" [compact]="isCompact()" />
+          }
+        </nav>
+      </ui-scroll-area>
       <div [class]="footerClasses()">
         <div [class]="footerSlotClasses()">
           <ng-content select="[sidebar-footer]" />
@@ -1003,14 +1005,14 @@ class SidebarComponent {
         <ng-container [ngTemplateOutlet]="body" />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollAreaComponent, selector: "ui-scroll-area", inputs: ["class", "viewportClass"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sidebar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgTemplateOutlet, UiNavIconComponent, UiNavItemComponent],
+                    imports: [NgTemplateOutlet, ScrollAreaComponent, UiNavIconComponent, UiNavItemComponent],
                     host: {
                         role: 'navigation',
                         '[attr.aria-label]': 'ariaLabel()',
@@ -1049,11 +1051,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           }
         </div>
       }
-      <nav [class]="navClasses()">
-        @for (item of resolvedItems(); track item.id) {
-          <ui-nav-item [item]="item" [compact]="isCompact()" />
-        }
-      </nav>
+      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
+        <nav [class]="navClasses()">
+          @for (item of resolvedItems(); track item.id) {
+            <ui-nav-item [item]="item" [compact]="isCompact()" />
+          }
+        </nav>
+      </ui-scroll-area>
       <div [class]="footerClasses()">
         <div [class]="footerSlotClasses()">
           <ng-content select="[sidebar-footer]" />