@ojiepermana/angular 0.1.0 → 21.0.0

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -1,176 +1,2266 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable } from '@angular/core';
-
-function getNavigationItemAction(item) {
-    return isNavigationRoutableItem(item) ? item.action : undefined;
-}
-function getNavigationItemVisibilityHandler(item) {
-    return item.isHidden;
-}
-function isNavigationItemHidden(item) {
-    return !!getNavigationItemVisibilityHandler(item)?.(item);
-}
-function shouldRenderNavigationItem(item) {
-    return !isNavigationItemHidden(item);
-}
-function hasNavigationChildren(item) {
-    return Array.isArray(item.children) && item.children.length > 0;
-}
-function getNavigationChildren(item) {
-    return Array.isArray(item.children) ? item.children : [];
-}
-function isNavigationRoutableItem(item) {
-    return item.type === 'basic' || item.type === 'aside' || item.type === 'collapsable';
-}
+import { inject, DestroyRef, signal, computed, Injectable, PLATFORM_ID, input, ChangeDetectionStrategy, Component, ViewContainerRef, viewChild, effect, ElementRef } from '@angular/core';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { filter, map } from 'rxjs/operators';
+import { DOCUMENT, isPlatformBrowser, NgClass, NgTemplateOutlet } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+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 { merge } from 'rxjs';
 
+/** Default registry key used when no id is specified. */
+const DEFAULT_NAVIGATION_ID = 'main';
 /**
- * Navigation Service
+ * Signal-based global state untuk navigation (sidebar/topbar).
  *
- * Service ini bertanggung jawab untuk:
- * 1. Store dan retrieve navigation data
- * 2. Menyediakan state aktif dan expanded item
- * 3. Utility functions untuk navigation operations
+ * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
+ * Komponen `ui-sidebar` / `ui-topbar` memilih registry via input `navigationId`.
  */
 class NavigationService {
-    _navigation = signal([], ...(ngDevMode ? [{ debugName: "_navigation" }] : /* istanbul ignore next */ []));
-    _activeItemId = signal(null, ...(ngDevMode ? [{ debugName: "_activeItemId" }] : /* istanbul ignore next */ []));
-    _expandedItemIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedItemIds" }] : /* istanbul ignore next */ []));
-    navigationItems = this._navigation.asReadonly();
-    activeItemId = this._activeItemId.asReadonly();
-    flatNavigation = computed(() => this.getFlatNavigation(this._navigation()), ...(ngDevMode ? [{ debugName: "flatNavigation" }] : /* istanbul ignore next */ []));
-    expandedItemIds = computed(() => Array.from(this._expandedItemIds()), ...(ngDevMode ? [{ debugName: "expandedItemIds" }] : /* istanbul ignore next */ []));
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    /** Internal version counter — incremented on every registry mutation. */
+    _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
+    /** Internal map of registered navigation trees. */
+    _registry = new Map();
     /**
-     * Store navigation data
-     * Biasanya dipanggil saat app initialization
+     * Backward-compatible accessor — returns items for the default (`'main'`) key.
+     * Prefer `getItems(id)` when working with named registries.
      */
-    storeNavigation(navigation) {
-        this._navigation.set(navigation);
+    items = computed(() => this.getItems(DEFAULT_NAVIGATION_ID)(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Sheet drawer terbuka di mobile. */
+    mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+    /** Set id grup / collapsable yang sedang terbuka. */
+    openGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "openGroups" }] : /* istanbul ignore next */ []));
+    /** URL aktif terakhir. Update otomatis dari Router `NavigationEnd`. */
+    activeUrl = signal(this.router.url, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    /** Trail id item yang sedang match dengan URL aktif (across ALL registries). */
+    activeTrail = computed(() => {
+        this._version(); // track changes
+        const url = this.activeUrl();
+        const trail = new Set();
+        const walk = (list, ancestors) => {
+            let matched = false;
+            for (const item of list) {
+                const id = item.id;
+                const link = 'link' in item ? item.link : undefined;
+                let selfMatch = false;
+                if (link) {
+                    selfMatch = url === link || url.startsWith(link + '/') || url.startsWith(link + '?');
+                }
+                const children = 'children' in item ? (item.children ?? []) : [];
+                const nextAncestors = id ? [...ancestors, id] : ancestors;
+                const childMatch = children.length > 0 && walk(children, nextAncestors);
+                if (selfMatch || childMatch) {
+                    if (id)
+                        trail.add(id);
+                    for (const a of ancestors)
+                        trail.add(a);
+                    matched = true;
+                }
+            }
+            return matched;
+        };
+        for (const items of this._registry.values()) {
+            walk(items, []);
+        }
+        return trail;
+    }, ...(ngDevMode ? [{ debugName: "activeTrail" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe((e) => this.activeUrl.set(e.urlAfterRedirects));
     }
-    /**
-     * Get navigation data dari storage
-     */
-    getNavigation() {
-        return this._navigation();
+    registerItems(idOrItems, maybeItems) {
+        const [id, items] = typeof idOrItems === 'string' ? [idOrItems, maybeItems] : [DEFAULT_NAVIGATION_ID, idOrItems];
+        this._registry.set(id, items);
+        this._version.update((v) => v + 1);
+    }
+    /** Remove a named registry entry. */
+    removeItems(id) {
+        this._registry.delete(id);
+        this._version.update((v) => v + 1);
     }
     /**
-     * Delete navigation data dari storage
+     * Computed yang mengembalikan items untuk key tertentu.
+     * Reactive terhadap perubahan registry.
      */
-    deleteNavigation() {
-        if (!this._navigation().length) {
+    getItems(id) {
+        return computed(() => {
+            this._version(); // track changes
+            return this._registry.get(id) ?? [];
+        });
+    }
+    /** Toggle sidebar collapsed (default ↔ thin). */
+    toggleCollapsed() {
+        this.collapsed.update((v) => !v);
+    }
+    setCollapsed(value) {
+        this.collapsed.set(value);
+    }
+    openMobile() {
+        this.mobileOpen.set(true);
+    }
+    closeMobile() {
+        this.mobileOpen.set(false);
+    }
+    toggleMobile() {
+        this.mobileOpen.update((v) => !v);
+    }
+    isGroupOpen(id) {
+        return this.openGroups().has(id);
+    }
+    toggleGroup(id) {
+        const next = new Set(this.openGroups());
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this.openGroups.set(next);
+    }
+    setGroupOpen(id, open) {
+        const next = new Set(this.openGroups());
+        if (open)
+            next.add(id);
+        else
+            next.delete(id);
+        this.openGroups.set(next);
+    }
+    /** Apakah id termasuk dalam active trail saat ini. */
+    isActive(id) {
+        return !!id && this.activeTrail().has(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavigationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const MATERIAL_SYMBOLS_FONT_ATTR = 'data-ui-nav-icon-font';
+const MATERIAL_SYMBOLS_FONT_ID = 'material-symbols-outlined';
+const MATERIAL_SYMBOLS_FONT_HREF = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
+/**
+ * Material Symbols icon renderer.
+ * Menyuntikkan stylesheet font sekali saat dipakai agar consumer tidak perlu
+ * menambahkan `<link>` manual di `index.html`.
+ */
+class UiNavIconComponent {
+    doc = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    fontVariationSettings = '"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24';
+    constructor() {
+        this.ensureFontStylesheet();
+    }
+    classes = computed(() => {
+        const base = 'material-symbols-outlined inline-flex items-center justify-center leading-none select-none';
+        const extra = this.class();
+        return extra ? `${base} ${extra}` : base;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    ensureFontStylesheet() {
+        if (!isPlatformBrowser(this.platformId) || !this.doc.head)
             return;
-        }
-        this._navigation.set([]);
-        this.clearActiveItem();
-        this.clearExpandedItems();
+        const existing = this.doc.head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`);
+        if (existing)
+            return;
+        const link = this.doc.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = MATERIAL_SYMBOLS_FONT_HREF;
+        link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
+        this.doc.head.appendChild(link);
     }
-    setActiveItem(id) {
-        this._activeItemId.set(id);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: UiNavIconComponent, isStandalone: true, selector: "ui-nav-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "size()", "style.font-variation-settings": "fontVariationSettings" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-icon',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[style.font-size.px]': 'size()',
+                        '[style.font-variation-settings]': 'fontVariationSettings',
+                        'aria-hidden': 'true',
+                        translate: 'no',
+                    },
+                    template: `{{ name() }}`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/** Concatenate and dedupe Tailwind class names. */
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Recursive navigation item renderer (vertical context).
+ *
+ * Menerima item polymorphic dan delegasi ke template sesuai `type`.
+ * Mega dirender sebagai group biasa saat muncul di konteks vertical.
+ */
+class UiNavItemComponent {
+    nav = inject(NavigationService);
+    cn = cn;
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    /** Compact / icon-only rendering (sidebar `thin`). */
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    exactMatch = {
+        exact: true,
+        paths: 'exact',
+        queryParams: 'exact',
+        fragment: 'exact',
+        matrixParams: 'exact',
+    };
+    inexactMatch = {
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+    };
+    type = computed(() => this.item().type, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    groupItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "groupItem" }] : /* istanbul ignore next */ []));
+    collapsableItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "collapsableItem" }] : /* istanbul ignore next */ []));
+    megaItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "megaItem" }] : /* istanbul ignore next */ []));
+    asideItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "asideItem" }] : /* istanbul ignore next */ []));
+    basicItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "basicItem" }] : /* istanbul ignore next */ []));
+    headingId = computed(() => {
+        const id = this.item().id ?? '';
+        return `nav-group-${id}`;
+    }, ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
+    isGroupOpen() {
+        const id = this.item().id;
+        if (!id)
+            return false;
+        // auto-open when any descendant is active
+        if (this.nav.isActive(id) && 'children' in this.item())
+            return true;
+        return this.nav.isGroupOpen(id);
+    }
+    isTrailActive() {
+        return this.nav.isActive(this.item().id);
     }
-    clearActiveItem() {
-        this._activeItemId.set(null);
+    toggleGroup() {
+        const id = this.item().id;
+        if (id)
+            this.nav.toggleGroup(id);
     }
-    getActiveItem(navigation = this._navigation()) {
-        const activeItemId = this._activeItemId();
-        if (!activeItemId) {
-            return null;
+    runAction() {
+        const item = this.item();
+        if ('action' in item && typeof item.action === 'function') {
+            item.action(item);
         }
-        return this.getItem(activeItemId, navigation);
     }
-    expandItem(id) {
-        this._expandedItemIds.update((expandedItemIds) => {
-            const nextExpandedItemIds = new Set(expandedItemIds);
-            nextExpandedItemIds.add(id);
-            return nextExpandedItemIds;
-        });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @switch (type()) {
+      @case ('divider') {
+        <hr class="my-2 border-t border-border" role="separator" />
+      }
+      @case ('spacer') {
+        <div class="flex-1"></div>
+      }
+      @case ('group') {
+        <div class="p-3" role="group" [attr.aria-labelledby]="headingId()">
+          @if (!compact()) {
+            <div class="sticky top-0 z-10 bg-background py-3 text-muted-foreground">
+              <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
+                {{ item().title }}
+              </div>
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of groupItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="compact()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('collapsable') {
+        @let id = collapsableItem().id ?? '';
+        @let open = isGroupOpen();
+        <button
+          type="button"
+          [class]="
+            cn(
+              'ui-nav-text group/ni flex w-full items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              isTrailActive() && 'text-primary',
+              item().classes?.wrapper
+            )
+          "
+          [attr.aria-expanded]="open"
+          [attr.aria-controls]="id + '-panel'"
+          [disabled]="collapsableItem().disabled || null"
+          [matTooltip]="compact() ? (collapsableItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()"
+          (click)="toggleGroup()">
+          @if (collapsableItem().icon) {
+            <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+          }
+          @if (!compact()) {
+            <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
+              {{ collapsableItem().title }}
+            </span>
+            @if (collapsableItem().badge; as badge) {
+              <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+            }
+            <ui-nav-icon
+              [name]="'chevron_right'"
+              [size]="18"
+              [class]="cn('transition-transform duration-200', open && 'rotate-90')" />
+          }
+        </button>
+        @if (!compact() && open) {
+          <div [id]="id + '-panel'" role="region" class="ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-3">
+            @for (child of collapsableItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" />
+            }
+          </div>
+        }
+      }
+      @case ('mega') {
+        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->
+        <div class="mt-4 py-3 first:mt-0" role="group">
+          @if (!compact()) {
+            <div class="ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground">
+              {{ item().title }}
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of megaItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="compact()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('aside') {
+        <a
+          [class]="
+            cn(
+              'ui-nav-text flex items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',
+              item().classes?.wrapper
+            )
+          "
+          routerLinkActive="text-primary"
+          #rla="routerLinkActive"
+          [attr.aria-current]="rla.isActive ? 'page' : null"
+          [routerLink]="asideItem().link"
+          [queryParams]="asideItem().queryParams"
+          [fragment]="asideItem().fragment ?? undefined"
+          [target]="asideItem().target ?? undefined"
+          [matTooltip]="compact() ? (asideItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()">
+          @if (asideItem().icon) {
+            <ui-nav-icon [name]="asideItem().icon!" [size]="18" />
+          }
+          @if (!compact()) {
+            <span class="flex-1 truncate">{{ asideItem().title }}</span>
+          }
+        </a>
+      }
+      @default {
+        <!-- basic -->
+        @if (basicItem().link && !basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text flex items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',
+                item().classes?.wrapper
+              )
+            "
+            routerLinkActive="text-primary"
+            #rla="routerLinkActive"
+            [routerLinkActiveOptions]="
+              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)
+            "
+            [attr.aria-current]="rla.isActive ? 'page' : null"
+            [attr.aria-disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            [routerLink]="basicItem().link"
+            [queryParams]="basicItem().queryParams"
+            [queryParamsHandling]="basicItem().queryParamsHandling ?? null"
+            [fragment]="basicItem().fragment ?? undefined"
+            [preserveFragment]="basicItem().preserveFragment ?? false"
+            [target]="basicItem().target ?? undefined"
+            (click)="runAction()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            }
+            @if (!compact()) {
+              <span [class]="cn('flex-1 truncate', item().classes?.title)">{{ basicItem().title }}</span>
+              @if (basicItem().badge; as badge) {
+                <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+              }
+            }
+          </a>
+        } @else if (basicItem().link && basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text flex items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                item().classes?.wrapper
+              )
+            "
+            [attr.href]="basicItem().link"
+            [attr.target]="basicItem().target ?? '_blank'"
+            rel="noopener noreferrer"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="
+              cn(
+                'ui-nav-text flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+                item().classes?.wrapper
+              )
+            "
+            [disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            (click)="runAction()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </button>
+        }
+      }
     }
-    collapseItem(id) {
-        this._expandedItemIds.update((expandedItemIds) => {
-            if (!expandedItemIds.has(id)) {
-                return expandedItemIds;
+  `, isInline: true, dependencies: [{ kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UiNavItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-nav-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [RouterLink, RouterLinkActive, MatTooltip, UiNavIconComponent],
+                    template: `
+    @switch (type()) {
+      @case ('divider') {
+        <hr class="my-2 border-t border-border" role="separator" />
+      }
+      @case ('spacer') {
+        <div class="flex-1"></div>
+      }
+      @case ('group') {
+        <div class="p-3" role="group" [attr.aria-labelledby]="headingId()">
+          @if (!compact()) {
+            <div class="sticky top-0 z-10 bg-background py-3 text-muted-foreground">
+              <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
+                {{ item().title }}
+              </div>
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of groupItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="compact()" />
+            }
+          </div>
+        </div>
+      }
+      @case ('collapsable') {
+        @let id = collapsableItem().id ?? '';
+        @let open = isGroupOpen();
+        <button
+          type="button"
+          [class]="
+            cn(
+              'ui-nav-text group/ni flex w-full items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              isTrailActive() && 'text-primary',
+              item().classes?.wrapper
+            )
+          "
+          [attr.aria-expanded]="open"
+          [attr.aria-controls]="id + '-panel'"
+          [disabled]="collapsableItem().disabled || null"
+          [matTooltip]="compact() ? (collapsableItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()"
+          (click)="toggleGroup()">
+          @if (collapsableItem().icon) {
+            <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+          }
+          @if (!compact()) {
+            <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
+              {{ collapsableItem().title }}
+            </span>
+            @if (collapsableItem().badge; as badge) {
+              <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+            }
+            <ui-nav-icon
+              [name]="'chevron_right'"
+              [size]="18"
+              [class]="cn('transition-transform duration-200', open && 'rotate-90')" />
+          }
+        </button>
+        @if (!compact() && open) {
+          <div [id]="id + '-panel'" role="region" class="ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-3">
+            @for (child of collapsableItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" />
+            }
+          </div>
+        }
+      }
+      @case ('mega') {
+        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->
+        <div class="mt-4 py-3 first:mt-0" role="group">
+          @if (!compact()) {
+            <div class="ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground">
+              {{ item().title }}
+            </div>
+          }
+          <div class="flex flex-col gap-0.5">
+            @for (child of megaItem().children; track child.id) {
+              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="compact()" />
             }
-            const nextExpandedItemIds = new Set(expandedItemIds);
-            nextExpandedItemIds.delete(id);
-            return nextExpandedItemIds;
+          </div>
+        </div>
+      }
+      @case ('aside') {
+        <a
+          [class]="
+            cn(
+              'ui-nav-text flex items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',
+              item().classes?.wrapper
+            )
+          "
+          routerLinkActive="text-primary"
+          #rla="routerLinkActive"
+          [attr.aria-current]="rla.isActive ? 'page' : null"
+          [routerLink]="asideItem().link"
+          [queryParams]="asideItem().queryParams"
+          [fragment]="asideItem().fragment ?? undefined"
+          [target]="asideItem().target ?? undefined"
+          [matTooltip]="compact() ? (asideItem().title ?? '') : ''"
+          matTooltipPosition="right"
+          [matTooltipDisabled]="!compact()">
+          @if (asideItem().icon) {
+            <ui-nav-icon [name]="asideItem().icon!" [size]="18" />
+          }
+          @if (!compact()) {
+            <span class="flex-1 truncate">{{ asideItem().title }}</span>
+          }
+        </a>
+      }
+      @default {
+        <!-- basic -->
+        @if (basicItem().link && !basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text flex items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',
+                item().classes?.wrapper
+              )
+            "
+            routerLinkActive="text-primary"
+            #rla="routerLinkActive"
+            [routerLinkActiveOptions]="
+              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)
+            "
+            [attr.aria-current]="rla.isActive ? 'page' : null"
+            [attr.aria-disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            [routerLink]="basicItem().link"
+            [queryParams]="basicItem().queryParams"
+            [queryParamsHandling]="basicItem().queryParamsHandling ?? null"
+            [fragment]="basicItem().fragment ?? undefined"
+            [preserveFragment]="basicItem().preserveFragment ?? false"
+            [target]="basicItem().target ?? undefined"
+            (click)="runAction()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
+            }
+            @if (!compact()) {
+              <span [class]="cn('flex-1 truncate', item().classes?.title)">{{ basicItem().title }}</span>
+              @if (basicItem().badge; as badge) {
+                <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
+              }
+            }
+          </a>
+        } @else if (basicItem().link && basicItem().externalLink) {
+          <a
+            [class]="
+              cn(
+                'ui-nav-text flex items-center gap-3 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                item().classes?.wrapper
+              )
+            "
+            [attr.href]="basicItem().link"
+            [attr.target]="basicItem().target ?? '_blank'"
+            rel="noopener noreferrer"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="
+              cn(
+                'ui-nav-text flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+                item().classes?.wrapper
+              )
+            "
+            [disabled]="basicItem().disabled || null"
+            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
+            matTooltipPosition="right"
+            [matTooltipDisabled]="!compact()"
+            (click)="runAction()">
+            @if (basicItem().icon) {
+              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
+            }
+            @if (!compact()) {
+              <span class="flex-1 truncate">{{ basicItem().title }}</span>
+            }
+          </button>
+        }
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+
+/**
+ * Vertical navigation (sidebar) — shadcn-styled.
+ *
+ * Variants:
+ * - `default`: 17.5rem, label + icon
+ * - `thin`: 4rem icon-only; hover memunculkan overlay expand (tidak push konten)
+ *
+ * Mobile (`< md`): saat `autoMobile=true` (default), host desktop disembunyikan
+ * dan konten dirender lewat CDK Overlay drawer dengan focus trap. State buka
+ * dikontrol lewat `NavigationService.mobileOpen`.
+ */
+class SidebarComponent {
+    nav = inject(NavigationService);
+    bp = inject(BreakpointObserver);
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    doc = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Registry key di `NavigationService`. Default `'main'`. */
+    navigationId = input(DEFAULT_NAVIGATION_ID, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    header = input(true, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Auto switch ke CDK overlay drawer saat viewport `< md`. */
+    autoMobile = input(true, ...(ngDevMode ? [{ debugName: "autoMobile" }] : /* istanbul ignore next */ []));
+    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
+    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
+    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
+    resolvedItems = computed(() => {
+        const explicit = this.items();
+        return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
+    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    drawerTpl = viewChild.required('drawerTpl');
+    drawerRef = null;
+    focusTrap = null;
+    previouslyFocused = null;
+    /** True saat viewport `< md` (767.98px). */
+    isMobileMedia = toSignal(this.bp.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)), {
+        initialValue: false,
+    });
+    isMobile = computed(() => this.autoMobile() && this.isMobileMedia(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isExpanded = computed(() => this.appearance() === 'default' || this.hovered(), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    isCompact = computed(() => !this.isMobile() && this.appearance() === 'thin' && !this.hovered(), ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Auto-register items ke service untuk active trail (hanya jika input non-kosong).
+        effect(() => {
+            const explicit = this.items();
+            if (this.autoRegister() && explicit.length > 0)
+                this.nav.registerItems(this.navigationId(), explicit);
+        });
+        // Kelola overlay drawer berdasarkan mobileOpen + isMobile.
+        effect(() => {
+            const open = this.nav.mobileOpen();
+            const mobile = this.isMobile();
+            if (mobile && open)
+                this.openDrawer();
+            else
+                this.closeDrawer();
+        });
+        this.destroyRef.onDestroy(() => this.closeDrawer());
+    }
+    hostClasses = computed(() => {
+        const base = ['relative flex shrink-0 bg-background text-foreground', 'transition-[width] duration-200 ease-out'];
+        const appearance = this.appearance();
+        if (appearance === 'thin')
+            base.push('w-16');
+        else
+            base.push('[width:17.5rem]');
+        if (this.position() === 'right')
+            base.push('border-l');
+        else
+            base.push('border-r');
+        base.push('border-border');
+        return [...base, this.class()].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => {
+        const overlayActive = this.appearance() === 'thin' && this.hovered();
+        const base = ['flex h-full flex-col transition-[width] duration-200 ease-out'];
+        if (overlayActive) {
+            base.push('absolute inset-y-0 z-30 bg-background shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0 border-l border-border' : 'left-0 border-r border-border');
+        }
+        else {
+            base.push('w-full');
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    onHoverEnter() {
+        if (this.appearance() === 'thin' && !this.isMobile())
+            this.hovered.set(true);
+    }
+    onHoverLeave() {
+        if (this.appearance() === 'thin')
+            this.hovered.set(false);
+    }
+    /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
+    onHostClick(event) {
+        if (this.appearance() !== 'thin' || this.isMobile())
+            return;
+        if (this.hovered())
+            return;
+        const target = event.target;
+        // Biarkan klik pada control interaktif terus propagate (tidak intercept).
+        if (target && target.closest('a,button,[role="menuitem"]'))
+            return;
+        this.hovered.set(true);
+    }
+    openDrawer() {
+        if (this.drawerRef)
+            return;
+        const side = this.position();
+        const pos = this.overlay.position().global().top('0');
+        if (side === 'right')
+            pos.right('0');
+        else
+            pos.left('0');
+        this.drawerRef = this.overlay.create({
+            positionStrategy: pos,
+            height: '100vh',
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            panelClass: ['ui-sidebar-drawer'],
         });
+        const portal = new TemplatePortal(this.drawerTpl(), this.vcr);
+        const viewRef = this.drawerRef.attach(portal);
+        viewRef.detectChanges();
+        const root = this.drawerRef.overlayElement;
+        this.focusTrap = this.focusTrapFactory.create(root);
+        this.previouslyFocused = this.doc.activeElement;
+        queueMicrotask(() => this.focusTrap?.focusInitialElementWhenReady());
+        this.drawerRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.nav.closeMobile());
+        this.drawerRef
+            .keydownEvents()
+            .pipe(filter((e) => e.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.nav.closeMobile());
     }
-    toggleItemExpanded(id) {
-        if (this.isItemExpanded(id)) {
-            this.collapseItem(id);
+    closeDrawer() {
+        if (!this.drawerRef)
             return;
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+        this.drawerRef.dispose();
+        this.drawerRef = null;
+        this.previouslyFocused?.focus?.();
+        this.previouslyFocused = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SidebarComponent, isStandalone: true, selector: "ui-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="innerClasses()">
+      <ng-container [ngTemplateOutlet]="body" />
+    </div>
+
+    <ng-template #body>
+      @if (header()) {
+        <div class="flex h-12 items-center gap-2 border-b border-border px-3">
+          <ng-content select="[ui-sidebar-header]" />
+        </div>
+      }
+      <nav class="flex-1 overflow-y-auto overflow-x-hidden">
+        @for (item of resolvedItems(); track item.id) {
+          <ui-nav-item [item]="item" [compact]="isCompact()" />
+        }
+      </nav>
+      <div class="border-t border-border h-12">
+        <ng-content select="[ui-sidebar-footer]" />
+      </div>
+    </ng-template>
+
+    <ng-template #drawerTpl>
+      <div
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="ariaLabel()"
+        class="flex h-full w-72 max-w-[85vw] flex-col bg-background text-foreground shadow-xl"
+        [ngClass]="position() === 'right' ? 'border-l border-border' : 'border-r border-border'">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.9", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-sidebar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, NgTemplateOutlet, UiNavItemComponent],
+                    host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'hostClasses()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[attr.data-position]': 'position()',
+                        '[attr.data-expanded]': 'isExpanded()',
+                        '[hidden]': 'isMobile()',
+                        '(mouseenter)': 'onHoverEnter()',
+                        '(mouseleave)': 'onHoverLeave()',
+                        '(focusin)': 'onHoverEnter()',
+                        '(click)': 'onHostClick($event)',
+                    },
+                    template: `
+    <div [class]="innerClasses()">
+      <ng-container [ngTemplateOutlet]="body" />
+    </div>
+
+    <ng-template #body>
+      @if (header()) {
+        <div class="flex h-12 items-center gap-2 border-b border-border px-3">
+          <ng-content select="[ui-sidebar-header]" />
+        </div>
+      }
+      <nav class="flex-1 overflow-y-auto overflow-x-hidden">
+        @for (item of resolvedItems(); track item.id) {
+          <ui-nav-item [item]="item" [compact]="isCompact()" />
         }
-        this.expandItem(id);
+      </nav>
+      <div class="border-t border-border h-12">
+        <ng-content select="[ui-sidebar-footer]" />
+      </div>
+    </ng-template>
+
+    <ng-template #drawerTpl>
+      <div
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="ariaLabel()"
+        class="flex h-full w-72 max-w-[85vw] flex-col bg-background text-foreground shadow-xl"
+        [ngClass]="position() === 'right' ? 'border-l border-border' : 'border-r border-border'">
+        <ng-container [ngTemplateOutlet]="body" />
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMobile", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], drawerTpl: [{ type: i0.ViewChild, args: ['drawerTpl', { isSignal: true }] }] } });
+
+/**
+ * Horizontal navigation (topbar) — shadcn-styled.
+ *
+ * Variants:
+ * - `default`: horizontal list; item `collapsable` buka dropdown
+ * - `megamenu`: item `mega` buka panel full-width multi-kolom
+ */
+class TopbarComponent {
+    nav = inject(NavigationService);
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Registry key di `NavigationService`. Default `'main'`. */
+    navigationId = input(DEFAULT_NAVIGATION_ID, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
+    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
+    /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
+    showHamburger = input(true, ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
+    hamburgerLabel = input('Open navigation', ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
+    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
+    resolvedItems = computed(() => {
+        const explicit = this.items();
+        return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
+    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
+    active = null;
+    dropdownTpl = viewChild.required('dropdownTpl');
+    megaTpl = viewChild.required('megaTpl');
+    constructor() {
+        effect(() => {
+            const explicit = this.items();
+            if (this.autoRegister() && explicit.length > 0)
+                this.nav.registerItems(this.navigationId(), explicit);
+        });
+        this.destroyRef.onDestroy(() => this.closeAll());
     }
-    isItemExpanded(id) {
-        return this._expandedItemIds().has(id);
+    hostClasses = computed(() => {
+        return [
+            'sticky top-0 z-20 flex w-full items-center border-b border-border bg-background text-foreground',
+            this.class(),
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    asBasic(i) {
+        return i;
     }
-    clearExpandedItems() {
-        this._expandedItemIds.set(new Set());
+    asCollapsable(i) {
+        return i;
     }
-    /**
-     * Flatten navigation array
-     * Convert nested structure menjadi flat array (hanya basic items)
-     * Berguna untuk search, analytics, atau operations lainnya
-     */
-    getFlatNavigation(navigation, flatNavigation = []) {
-        for (const item of navigation) {
-            if (item.type === 'basic') {
-                flatNavigation.push(item);
-            }
-            if (hasNavigationChildren(item)) {
-                this.getFlatNavigation(getNavigationChildren(item), flatNavigation);
-            }
+    asGroup(i) {
+        return i;
+    }
+    asMega(i) {
+        return i;
+    }
+    isItemActive(id) {
+        return this.nav.isActive(id);
+    }
+    megaColsClass(columns) {
+        const c = Math.min(Math.max(columns ?? 4, 1), 6);
+        switch (c) {
+            case 1:
+                return 'grid-cols-1';
+            case 2:
+                return 'md:grid-cols-2';
+            case 3:
+                return 'md:grid-cols-3';
+            case 5:
+                return 'md:grid-cols-5';
+            case 6:
+                return 'md:grid-cols-6';
+            default:
+                return 'md:grid-cols-4';
         }
-        return flatNavigation;
     }
-    /**
-     * Get item by ID dari navigation tree
-     * Recursive search untuk find item dengan id tertentu
-     */
-    getItem(id, navigation) {
-        for (const item of navigation) {
-            if (item.id === id) {
-                return item;
-            }
-            if (hasNavigationChildren(item)) {
-                const childItem = this.getItem(id, getNavigationChildren(item));
-                if (childItem) {
-                    return childItem;
-                }
-            }
+    toggleDropdown(trigger, item) {
+        if (this.openId() === item.id)
+            this.closeAll();
+        else
+            this.openDropdown(trigger, item);
+    }
+    openDropdown(trigger, item) {
+        if (this.openId() === item.id)
+            return;
+        this.closeAll();
+        this.attach(trigger, item, this.dropdownTpl(), /*fullWidth*/ false);
+    }
+    toggleMega(trigger, item) {
+        if (this.openId() === item.id)
+            this.closeAll();
+        else
+            this.openMega(trigger, item);
+    }
+    openMega(trigger, item) {
+        if (this.openId() === item.id)
+            return;
+        this.closeAll();
+        this.attach(trigger, item, this.megaTpl(), /*fullWidth*/ true);
+    }
+    attach(trigger, item, tpl, fullWidth) {
+        const strategy = this.overlay
+            .position()
+            .flexibleConnectedTo(trigger)
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions(fullWidth
+            ? [
+                {
+                    originX: 'center',
+                    originY: 'bottom',
+                    overlayX: 'center',
+                    overlayY: 'top',
+                    offsetY: 4,
+                },
+                {
+                    originX: 'center',
+                    originY: 'top',
+                    overlayX: 'center',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                },
+            ]
+            : [
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                    offsetY: 4,
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                    offsetY: -4,
+                },
+            ]);
+        const ref = this.overlay.create({
+            positionStrategy: strategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: fullWidth ? ['ui-mega-panel'] : ['ui-dropdown-panel'],
+            width: fullWidth ? '100vw' : undefined,
+            maxWidth: fullWidth ? '100vw' : undefined,
+        });
+        const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });
+        ref.attach(portal);
+        this.active = { ref, id: item.id ?? '' };
+        this.openId.set(item.id ?? null);
+        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter((e) => e.key === 'Escape')))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.closeAll();
+            trigger.focus();
+        });
+    }
+    closeAll() {
+        if (this.active) {
+            this.active.ref.dispose();
+            this.active = null;
         }
-        return null;
+        this.openId.set(null);
     }
-    /**
-     * Get parent dari item dengan id tertentu
-     * Berguna untuk breadcrumb atau navigation path
-     */
-    getItemParent(id, navigation, parent) {
-        for (const item of navigation) {
-            if (item.id === id) {
-                return parent;
-            }
-            if (hasNavigationChildren(item)) {
-                const result = this.getItemParent(id, getNavigationChildren(item), item);
-                if (result) {
-                    return result;
-                }
-            }
+    /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
+    onMenubarKeydown(event) {
+        const key = event.key;
+        const root = this.host.nativeElement;
+        const triggers = Array.from(root.querySelectorAll('ul[role="menubar"] [role="menuitem"]')).filter((el) => !el.hasAttribute('disabled'));
+        if (triggers.length === 0)
+            return;
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (key === 'ArrowDown' && currentIndex !== -1) {
+            event.preventDefault();
+            // Jika open, fokus item pertama panel; jika belum, focus tetap (panel akan dibuka via click/mouseenter).
+            queueMicrotask(() => this.focusFirstInPanel());
+            return;
+        }
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End')
+            return;
+        let nextIndex = currentIndex;
+        if (key === 'ArrowRight')
+            nextIndex = (currentIndex + 1 + triggers.length) % triggers.length;
+        else if (key === 'ArrowLeft')
+            nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        else if (key === 'Home')
+            nextIndex = 0;
+        else if (key === 'End')
+            nextIndex = triggers.length - 1;
+        if (nextIndex !== currentIndex && triggers[nextIndex]) {
+            event.preventDefault();
+            triggers[nextIndex].focus();
+        }
+    }
+    /** Arrow-key navigation dalam dropdown/mega panel. */
+    onPanelKeydown(event) {
+        const key = event.key;
+        if (key !== 'ArrowDown' &&
+            key !== 'ArrowUp' &&
+            key !== 'ArrowLeft' &&
+            key !== 'ArrowRight' &&
+            key !== 'Home' &&
+            key !== 'End')
+            return;
+        const panel = this.active?.ref.overlayElement;
+        if (!panel)
+            return;
+        const items = this.collectPanelFocusables(panel);
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        let nextIndex = currentIndex;
+        if (key === 'ArrowDown' || key === 'ArrowRight')
+            nextIndex = (currentIndex + 1 + items.length) % items.length;
+        else if (key === 'ArrowUp' || key === 'ArrowLeft')
+            nextIndex = (currentIndex - 1 + items.length) % items.length;
+        else if (key === 'Home')
+            nextIndex = 0;
+        else if (key === 'End')
+            nextIndex = items.length - 1;
+        if (nextIndex !== currentIndex && items[nextIndex]) {
+            event.preventDefault();
+            items[nextIndex].focus();
         }
-        return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NavigationService, providedIn: 'root' });
+    collectPanelFocusables(root) {
+        return Array.from(root.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
+    }
+    focusFirstInPanel() {
+        const panel = this.active?.ref.overlayElement;
+        if (!panel)
+            return;
+        const items = this.collectPanelFocusables(panel);
+        items[0]?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TopbarComponent, isStandalone: true, selector: "ui-topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "megaTpl", first: true, predicate: ["megaTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex h-14 w-full items-center gap-3 px-3">
+      <div data-ui-topbar-slot="start" class="flex shrink-0 items-center gap-2">
+        @if (showHamburger()) {
+          <button
+            type="button"
+            class="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+            [attr.aria-label]="hamburgerLabel()"
+            [attr.aria-expanded]="nav.mobileOpen()"
+            (click)="nav.toggleMobile()">
+            <ui-nav-icon name="menu" [size]="18" />
+          </button>
+        }
+        <ng-content select="[ui-topbar-start]" />
+      </div>
+
+      <div data-ui-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
+        <ul
+          class="flex min-w-0 flex-1 items-center justify-center gap-1"
+          role="menubar"
+          (keydown)="onMenubarKeydown($event)">
+          @for (item of resolvedItems(); track item.id) {
+            <li role="none" class="relative">
+              @switch (item.type) {
+                @case ('basic') {
+                  @let basic = asBasic(item);
+                  <a
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary"
+                    [routerLink]="basic.link"
+                    routerLinkActive
+                    #rla="routerLinkActive"
+                    [class.text-primary]="rla.isActive"
+                    [attr.aria-current]="rla.isActive ? 'page' : null"
+                    [target]="basic.target ?? undefined">
+                    @if (basic.icon) {
+                      <ui-nav-icon [name]="basic.icon" [size]="18" />
+                    }
+                    <span>{{ basic.title }}</span>
+                  </a>
+                }
+                @case ('collapsable') {
+                  @let col = asCollapsable(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(col.id)"
+                    [attr.aria-expanded]="openId() === col.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (col.icon) {
+                      <ui-nav-icon [name]="col.icon" [size]="18" />
+                    }
+                    <span>{{ col.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @case ('group') {
+                  @let group = asGroup(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(group.id)"
+                    [attr.aria-expanded]="openId() === group.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (group.icon) {
+                      <ui-nav-icon [name]="group.icon" [size]="18" />
+                    }
+                    <span>{{ group.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @case ('mega') {
+                  @let mega = asMega(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(mega.id)"
+                    [attr.aria-expanded]="openId() === mega.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleMega(trigger, item)"
+                    (mouseenter)="openMega(trigger, item)">
+                    @if (mega.icon) {
+                      <ui-nav-icon [name]="mega.icon" [size]="18" />
+                    }
+                    <span>{{ mega.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @default {
+                  <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
+                    {{ item.title }}
+                  </span>
+                }
+              }
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div data-ui-topbar-slot="end" class="flex shrink-0 items-center justify-end gap-2">
+        <ng-content select="[ui-topbar-end]" />
+      </div>
+    </div>
+
+    <!-- Dropdown template -->
+    <ng-template #dropdownTpl let-item>
+      <div
+        role="menu"
+        class="min-w-56 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
+        (keydown)="onPanelKeydown($event)">
+        @for (child of item.children; track child.id) {
+          <ui-nav-item [item]="child" />
+        }
+      </div>
+    </ng-template>
+
+    <!-- Mega panel template -->
+    <ng-template #megaTpl let-item>
+      <div
+        role="menu"
+        class="w-screen max-w-[min(90vw,72rem)] rounded-md border border-border bg-popover p-6 text-popover-foreground shadow-lg"
+        (keydown)="onPanelKeydown($event)">
+        <div class="grid gap-6" [ngClass]="megaColsClass(item.columns)">
+          @for (col of item.children; track col.id) {
+            <div>
+              <div class="ui-nav-heading mb-2 text-muted-foreground">
+                {{ col.title }}
+              </div>
+              <div class="flex flex-col gap-0.5">
+                @for (leaf of col.children ?? []; track leaf.id) {
+                  <ui-nav-item [item]="leaf" />
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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.8", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TopbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-topbar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],
+                    host: {
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'hostClasses()',
+                        '[attr.data-appearance]': 'appearance()',
+                    },
+                    template: `
+    <div class="flex h-14 w-full items-center gap-3 px-3">
+      <div data-ui-topbar-slot="start" class="flex shrink-0 items-center gap-2">
+        @if (showHamburger()) {
+          <button
+            type="button"
+            class="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
+            [attr.aria-label]="hamburgerLabel()"
+            [attr.aria-expanded]="nav.mobileOpen()"
+            (click)="nav.toggleMobile()">
+            <ui-nav-icon name="menu" [size]="18" />
+          </button>
+        }
+        <ng-content select="[ui-topbar-start]" />
+      </div>
+
+      <div data-ui-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
+        <ul
+          class="flex min-w-0 flex-1 items-center justify-center gap-1"
+          role="menubar"
+          (keydown)="onMenubarKeydown($event)">
+          @for (item of resolvedItems(); track item.id) {
+            <li role="none" class="relative">
+              @switch (item.type) {
+                @case ('basic') {
+                  @let basic = asBasic(item);
+                  <a
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary"
+                    [routerLink]="basic.link"
+                    routerLinkActive
+                    #rla="routerLinkActive"
+                    [class.text-primary]="rla.isActive"
+                    [attr.aria-current]="rla.isActive ? 'page' : null"
+                    [target]="basic.target ?? undefined">
+                    @if (basic.icon) {
+                      <ui-nav-icon [name]="basic.icon" [size]="18" />
+                    }
+                    <span>{{ basic.title }}</span>
+                  </a>
+                }
+                @case ('collapsable') {
+                  @let col = asCollapsable(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(col.id)"
+                    [attr.aria-expanded]="openId() === col.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (col.icon) {
+                      <ui-nav-icon [name]="col.icon" [size]="18" />
+                    }
+                    <span>{{ col.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @case ('group') {
+                  @let group = asGroup(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(group.id)"
+                    [attr.aria-expanded]="openId() === group.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleDropdown(trigger, item)"
+                    (mouseenter)="openDropdown(trigger, item)">
+                    @if (group.icon) {
+                      <ui-nav-icon [name]="group.icon" [size]="18" />
+                    }
+                    <span>{{ group.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @case ('mega') {
+                  @let mega = asMega(item);
+                  <button
+                    #trigger
+                    type="button"
+                    role="menuitem"
+                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    [class.text-primary]="isItemActive(mega.id)"
+                    [attr.aria-expanded]="openId() === mega.id"
+                    [attr.aria-haspopup]="'menu'"
+                    (click)="toggleMega(trigger, item)"
+                    (mouseenter)="openMega(trigger, item)">
+                    @if (mega.icon) {
+                      <ui-nav-icon [name]="mega.icon" [size]="18" />
+                    }
+                    <span>{{ mega.title }}</span>
+                    <ui-nav-icon name="expand_more" [size]="18" />
+                  </button>
+                }
+                @default {
+                  <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
+                    {{ item.title }}
+                  </span>
+                }
+              }
+            </li>
+          }
+        </ul>
+      </div>
+
+      <div data-ui-topbar-slot="end" class="flex shrink-0 items-center justify-end gap-2">
+        <ng-content select="[ui-topbar-end]" />
+      </div>
+    </div>
+
+    <!-- Dropdown template -->
+    <ng-template #dropdownTpl let-item>
+      <div
+        role="menu"
+        class="min-w-56 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
+        (keydown)="onPanelKeydown($event)">
+        @for (child of item.children; track child.id) {
+          <ui-nav-item [item]="child" />
+        }
+      </div>
+    </ng-template>
+
+    <!-- Mega panel template -->
+    <ng-template #megaTpl let-item>
+      <div
+        role="menu"
+        class="w-screen max-w-[min(90vw,72rem)] rounded-md border border-border bg-popover p-6 text-popover-foreground shadow-lg"
+        (keydown)="onPanelKeydown($event)">
+        <div class="grid gap-6" [ngClass]="megaColsClass(item.columns)">
+          @for (col of item.children; track col.id) {
+            <div>
+              <div class="ui-nav-heading mb-2 text-muted-foreground">
+                {{ col.title }}
+              </div>
+              <div class="flex flex-col gap-0.5">
+                @for (leaf of col.children ?? []; track leaf.id) {
+                  <ui-nav-item [item]="leaf" />
+                }
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], megaTpl: [{ type: i0.ViewChild, args: ['megaTpl', { isSignal: true }] }] } });
 
-/* Navigation state and utility exports. */
+const DemoNavigationData = [
+    {
+        id: 'documentation',
+        title: 'Documentation',
+        subtitle: 'Guides and getting started resources',
+        type: 'group',
+        icon: 'menu_book',
+        children: [
+            {
+                id: 'documentation-introduction',
+                title: 'Introduction',
+                type: 'basic',
+                icon: 'menu_book',
+                link: '/docs/introduction',
+            },
+            {
+                id: 'documentation-installation',
+                title: 'Installation',
+                type: 'basic',
+                icon: 'download',
+                link: '/docs/installation',
+            },
+            {
+                id: 'documentation-getting-started',
+                title: 'Getting started',
+                type: 'basic',
+                icon: 'rocket_launch',
+                link: '/docs/getting-started',
+            },
+            {
+                id: 'documentation-upgrade-guide',
+                title: 'Upgrade Guide',
+                type: 'basic',
+                icon: 'arrow_circle_up',
+                link: '/docs/upgrade-guide',
+            },
+            {
+                id: 'documentation-changelog',
+                title: 'Changelog',
+                type: 'basic',
+                icon: 'history',
+                link: '/docs/changelog',
+            },
+            {
+                id: 'documentation-icon-lucide',
+                title: 'Lucide Icons',
+                type: 'basic',
+                icon: 'star',
+                link: '/lucide-icons',
+                badge: {
+                    title: 'Demo',
+                    classes: 'ml-2 px-2 py-0.5 rounded-full text-xs bg-blue-500 text-white',
+                },
+            },
+        ],
+    },
+    {
+        id: 'user-interface',
+        title: 'User Interface',
+        subtitle: 'Components and design elements',
+        type: 'group',
+        icon: 'dashboard',
+        children: [
+            {
+                id: 'user-interface-material-components',
+                title: 'Material Components',
+                type: 'collapsable',
+                icon: 'deployed_code',
+                children: [
+                    {
+                        id: 'user-interface-material-components-inputs-forms',
+                        title: 'Inputs & Forms',
+                        type: 'collapsable',
+                        icon: 'input',
+                        children: [
+                            {
+                                id: 'user-interface-material-components-inputs-forms-autocomplete',
+                                title: 'Autocomplete',
+                                type: 'basic',
+                                icon: 'search',
+                                link: '/ui/material/autocomplete',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-checkbox',
+                                title: 'Checkbox',
+                                type: 'basic',
+                                icon: 'check_box',
+                                link: '/ui/material/checkbox',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-datepicker',
+                                title: 'Datepicker',
+                                type: 'basic',
+                                icon: 'calendar_today',
+                                link: '/ui/material/datepicker',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-form-field',
+                                title: 'Form field',
+                                type: 'basic',
+                                icon: 'text_fields',
+                                link: '/ui/material/form-field',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-input',
+                                title: 'Input',
+                                type: 'basic',
+                                icon: 'text_fields',
+                                link: '/ui/material/input',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-radio-button',
+                                title: 'Radio button',
+                                type: 'basic',
+                                icon: 'radio_button_checked',
+                                link: '/ui/material/radio',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-select',
+                                title: 'Select',
+                                type: 'basic',
+                                icon: 'expand_more',
+                                link: '/ui/material/select',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-slider',
+                                title: 'Slider',
+                                type: 'basic',
+                                icon: 'tune',
+                                link: '/ui/material/slider',
+                            },
+                            {
+                                id: 'user-interface-material-components-inputs-forms-slide-toggle',
+                                title: 'Slide toggle',
+                                type: 'basic',
+                                icon: 'toggle_on',
+                                link: '/ui/material/slide-toggle',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-material-components-buttons-actions',
+                        title: 'Buttons & Actions',
+                        type: 'collapsable',
+                        icon: 'ads_click',
+                        children: [
+                            {
+                                id: 'user-interface-material-components-buttons-actions-button',
+                                title: 'Button',
+                                type: 'basic',
+                                icon: 'crop_square',
+                                link: '/ui/material/button',
+                            },
+                            {
+                                id: 'user-interface-material-components-buttons-actions-button-toggle',
+                                title: 'Button toggle',
+                                type: 'basic',
+                                icon: 'view_column',
+                                link: '/ui/material/button-toggle',
+                            },
+                            {
+                                id: 'user-interface-material-components-buttons-actions-chips',
+                                title: 'Chips',
+                                type: 'basic',
+                                icon: 'label',
+                                link: '/ui/material/chips',
+                                badge: {
+                                    title: 'New',
+                                    classes: 'ml-2 px-2 py-0.5 rounded-full text-xs bg-green-500 text-white',
+                                },
+                            },
+                            {
+                                id: 'user-interface-material-components-buttons-actions-menu',
+                                title: 'Menu',
+                                type: 'basic',
+                                icon: 'menu',
+                                link: '/ui/material/menu',
+                            },
+                            {
+                                id: 'user-interface-material-components-buttons-actions-ripples',
+                                title: 'Ripples',
+                                type: 'basic',
+                                icon: 'waves',
+                                link: '/ui/material/ripples',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-material-components-layout-containers',
+                        title: 'Layout & Containers',
+                        type: 'collapsable',
+                        icon: 'dashboard',
+                        children: [
+                            {
+                                id: 'user-interface-material-components-layout-containers-card',
+                                title: 'Card',
+                                type: 'basic',
+                                icon: 'credit_card',
+                                link: '/ui/material/card',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-divider',
+                                title: 'Divider',
+                                type: 'basic',
+                                icon: 'remove',
+                                link: '/ui/material/divider',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-expansion-panel',
+                                title: 'Expansion Panel',
+                                type: 'basic',
+                                icon: 'expand_more',
+                                link: '/ui/material/expansion',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-grid-list',
+                                title: 'Grid list',
+                                type: 'basic',
+                                icon: 'grid_view',
+                                link: '/ui/material/grid-list',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-list',
+                                title: 'List',
+                                type: 'basic',
+                                icon: 'list',
+                                link: '/ui/material/list',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-sidenav',
+                                title: 'Sidenav',
+                                type: 'basic',
+                                icon: 'view_sidebar',
+                                link: '/ui/material/sidenav',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-tabs',
+                                title: 'Tabs',
+                                type: 'basic',
+                                icon: 'tab',
+                                link: '/ui/material/tabs',
+                            },
+                            {
+                                id: 'user-interface-material-components-layout-containers-toolbar',
+                                title: 'Toolbar',
+                                type: 'basic',
+                                icon: 'build',
+                                link: '/ui/material/toolbar',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-material-components-data-display',
+                        title: 'Data & Display',
+                        type: 'collapsable',
+                        icon: 'bar_chart',
+                        children: [
+                            {
+                                id: 'user-interface-material-components-data-display-badge',
+                                title: 'Badge',
+                                type: 'basic',
+                                icon: 'verified',
+                                link: '/ui/material/badge',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-icon',
+                                title: 'Icon',
+                                type: 'basic',
+                                icon: 'star',
+                                link: '/ui/material/icon',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-paginator',
+                                title: 'Paginator',
+                                type: 'basic',
+                                icon: 'first_page',
+                                link: '/ui/material/paginator',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-progress-bar',
+                                title: 'Progress bar',
+                                type: 'basic',
+                                icon: 'hourglass_empty',
+                                link: '/ui/material/progress-bar',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-progress-spinner',
+                                title: 'Progress spinner',
+                                type: 'basic',
+                                icon: 'progress_activity',
+                                link: '/ui/material/progress-spinner',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-sort',
+                                title: 'Sort header',
+                                type: 'basic',
+                                icon: 'swap_vert',
+                                link: '/ui/material/sort',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-table',
+                                title: 'Table',
+                                type: 'basic',
+                                icon: 'table_chart',
+                                link: '/ui/material/table',
+                            },
+                            {
+                                id: 'user-interface-material-components-data-display-tree',
+                                title: 'Tree',
+                                type: 'basic',
+                                icon: 'hub',
+                                link: '/ui/material/tree',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-material-components-overlays-modals',
+                        title: 'Overlays & Modals',
+                        type: 'collapsable',
+                        icon: 'layers',
+                        children: [
+                            {
+                                id: 'user-interface-material-components-overlays-modals-bottom-sheet',
+                                title: 'Bottom Sheet',
+                                type: 'basic',
+                                icon: 'south',
+                                link: '/ui/material/bottom-sheet',
+                            },
+                            {
+                                id: 'user-interface-material-components-overlays-modals-dialog',
+                                title: 'Dialog',
+                                type: 'basic',
+                                icon: 'chat',
+                                link: '/ui/material/dialog',
+                            },
+                            {
+                                id: 'user-interface-material-components-overlays-modals-snack-bar',
+                                title: 'Snack-bar',
+                                type: 'basic',
+                                icon: 'notifications',
+                                link: '/ui/material/snack-bar',
+                            },
+                            {
+                                id: 'user-interface-material-components-overlays-modals-tooltip',
+                                title: 'Tooltip',
+                                type: 'basic',
+                                icon: 'help',
+                                link: '/ui/material/tooltip',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-material-components-navigation-stepper',
+                        title: 'Navigation & Steps',
+                        type: 'collapsable',
+                        icon: 'account_tree',
+                        children: [
+                            {
+                                id: 'user-interface-material-components-navigation-stepper-stepper',
+                                title: 'Stepper',
+                                type: 'basic',
+                                icon: 'account_tree',
+                                link: '/ui/material/stepper',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'user-interface-angular-cdk',
+                title: 'Angular CDK',
+                type: 'collapsable',
+                icon: 'widgets',
+                children: [
+                    {
+                        id: 'user-interface-angular-cdk-accessibility-navigation',
+                        title: 'Accessibility & Navigation',
+                        type: 'collapsable',
+                        icon: 'accessibility',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-accessibility-navigation-a11y',
+                                title: 'Accessibility',
+                                type: 'basic',
+                                icon: 'accessibility',
+                                link: '/ui/cdk/a11y',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-accessibility-navigation-focus-trap',
+                                title: 'Focus Trap',
+                                type: 'basic',
+                                icon: 'center_focus_strong',
+                                link: '/ui/cdk/focus-trap',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-accessibility-navigation-live-announcer',
+                                title: 'Live Announcer',
+                                type: 'basic',
+                                icon: 'campaign',
+                                link: '/ui/cdk/live-announcer',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-accessibility-navigation-listbox',
+                                title: 'Listbox',
+                                type: 'basic',
+                                icon: 'list',
+                                link: '/ui/cdk/listbox',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-accessibility-navigation-menu-cdk',
+                                title: 'Menu',
+                                type: 'basic',
+                                icon: 'menu',
+                                link: '/ui/cdk/menu',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-angular-cdk-layout-positioning',
+                        title: 'Layout & Positioning',
+                        type: 'collapsable',
+                        icon: 'dashboard',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-layout-positioning-layout',
+                                title: 'Layout',
+                                type: 'basic',
+                                icon: 'dashboard',
+                                link: '/ui/cdk/layout',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-layout-positioning-overlay',
+                                title: 'Overlay',
+                                type: 'basic',
+                                icon: 'layers',
+                                link: '/ui/cdk/overlay',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-layout-positioning-portal',
+                                title: 'Portal',
+                                type: 'basic',
+                                icon: 'radio_button_checked',
+                                link: '/ui/cdk/portal',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-layout-positioning-scrolling',
+                                title: 'Scrolling',
+                                type: 'basic',
+                                icon: 'unfold_more',
+                                link: '/ui/cdk/scrolling',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-layout-positioning-virtual-scrolling',
+                                title: 'Virtual Scrolling',
+                                type: 'basic',
+                                icon: 'view_agenda',
+                                link: '/ui/cdk/virtual-scrolling',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-angular-cdk-interaction-behavior',
+                        title: 'Interaction & Behavior',
+                        type: 'collapsable',
+                        icon: 'pan_tool',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-interaction-behavior-drag-drop',
+                                title: 'Drag and Drop',
+                                type: 'basic',
+                                icon: 'open_with',
+                                link: '/ui/cdk/drag-drop',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-interaction-behavior-observers',
+                                title: 'Observers',
+                                type: 'basic',
+                                icon: 'visibility',
+                                link: '/ui/cdk/observers',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-interaction-behavior-platform',
+                                title: 'Platform',
+                                type: 'basic',
+                                icon: 'devices',
+                                link: '/ui/cdk/platform',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-interaction-behavior-stepper-cdk',
+                                title: 'Stepper',
+                                type: 'basic',
+                                icon: 'account_tree',
+                                link: '/ui/cdk/stepper',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-angular-cdk-forms-data',
+                        title: 'Forms & Data',
+                        type: 'collapsable',
+                        icon: 'storage',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-forms-data-accordion',
+                                title: 'Accordion',
+                                type: 'basic',
+                                icon: 'expand_more',
+                                link: '/ui/cdk/accordion',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-forms-data-table-cdk',
+                                title: 'Table',
+                                type: 'basic',
+                                icon: 'table_chart',
+                                link: '/ui/cdk/table',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-forms-data-tree-cdk',
+                                title: 'Tree',
+                                type: 'basic',
+                                icon: 'hub',
+                                link: '/ui/cdk/tree',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-angular-cdk-utilities-helpers',
+                        title: 'Utilities & Helpers',
+                        type: 'collapsable',
+                        icon: 'build',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-utilities-helpers-bidi',
+                                title: 'Bidirectionality',
+                                type: 'basic',
+                                icon: 'swap_horiz',
+                                link: '/ui/cdk/bidi',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-utilities-helpers-clipboard',
+                                title: 'Clipboard',
+                                type: 'basic',
+                                icon: 'content_paste',
+                                link: '/ui/cdk/clipboard',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-utilities-helpers-coercion',
+                                title: 'Coercion',
+                                type: 'basic',
+                                icon: 'shuffle',
+                                link: '/ui/cdk/coercion',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-utilities-helpers-collections',
+                                title: 'Collections',
+                                type: 'basic',
+                                icon: 'folder',
+                                link: '/ui/cdk/collections',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-utilities-helpers-keycodes',
+                                title: 'Keycodes',
+                                type: 'basic',
+                                icon: 'keyboard',
+                                link: '/ui/cdk/keycodes',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-angular-cdk-testing-tools',
+                        title: 'Testing Tools',
+                        type: 'collapsable',
+                        icon: 'bug_report',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-testing-tools-component-harnesses',
+                                title: 'Component Harnesses',
+                                type: 'basic',
+                                icon: 'science',
+                                link: '/ui/cdk/testing',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-testing-tools-test-harnesses',
+                                title: 'Test Harnesses',
+                                type: 'basic',
+                                icon: 'science',
+                                link: '/ui/cdk/test-harnesses',
+                            },
+                        ],
+                    },
+                    {
+                        id: 'user-interface-angular-cdk-advanced-feature',
+                        title: 'Advanced feature',
+                        type: 'collapsable',
+                        icon: 'settings',
+                        children: [
+                            {
+                                id: 'user-interface-angular-cdk-advanced-feature-dialog-cdk',
+                                title: 'Dialog',
+                                type: 'basic',
+                                icon: 'chat',
+                                link: '/ui/cdk/dialog',
+                            },
+                            {
+                                id: 'user-interface-angular-cdk-advanced-feature-text-field',
+                                title: 'Text Field',
+                                type: 'basic',
+                                icon: 'text_fields',
+                                link: '/ui/cdk/text-field',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'user-interface-tailwind',
+                title: 'Tailwind CSS',
+                type: 'collapsable',
+                icon: 'air',
+                children: [
+                    {
+                        id: 'user-interface-tailwind-css-heading',
+                        title: 'Heading',
+                        type: 'basic',
+                        icon: 'text_fields',
+                        link: '/ui/tailwind/heading',
+                    },
+                    {
+                        id: 'user-interface-tailwind-data-display',
+                        title: 'Data Display',
+                        type: 'basic',
+                        icon: 'bar_chart',
+                        link: '/ui/tailwind/data-display',
+                    },
+                    {
+                        id: 'user-interface-tailwind-list',
+                        title: 'List',
+                        type: 'basic',
+                        icon: 'list',
+                        link: '/ui/tailwind/list',
+                    },
+                    {
+                        id: 'user-interface-tailwind-form',
+                        title: 'Form',
+                        type: 'basic',
+                        icon: 'dynamic_form',
+                        link: '/ui/tailwind/form',
+                    },
+                    {
+                        id: 'user-interface-tailwind-feedback',
+                        title: 'Feedback',
+                        type: 'basic',
+                        icon: 'report',
+                        link: '/ui/tailwind/feedback',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: 'feature',
+        title: 'Features',
+        subtitle: 'Advanced functionality and customization options',
+        type: 'group',
+        icon: 'settings',
+        children: [
+            {
+                id: 'feature-theme',
+                title: 'Themes',
+                type: 'collapsable',
+                icon: 'palette',
+                children: [
+                    {
+                        id: 'feature-theme-dark-mode',
+                        title: 'Dark Mode',
+                        type: 'basic',
+                        icon: 'dark_mode',
+                        link: '/feature/theme/dark-mode',
+                    },
+                    {
+                        id: 'feature-theme-color',
+                        title: 'Color Schemes',
+                        type: 'basic',
+                        icon: 'palette',
+                        link: '/feature/theme/color-schemes',
+                        badge: {
+                            title: 'Beta',
+                            classes: 'ml-2 px-2 py-0.5 rounded-full text-xs bg-yellow-500 text-white',
+                        },
+                    },
+                    {
+                        id: 'feature-layout',
+                        title: 'Layout',
+                        type: 'collapsable',
+                        icon: 'dashboard',
+                        children: [
+                            {
+                                id: 'feature-layout-apps',
+                                title: 'Application',
+                                type: 'collapsable',
+                                icon: 'web',
+                                children: [
+                                    {
+                                        id: 'feature-layout-apps-vertical',
+                                        title: 'Vertical',
+                                        type: 'basic',
+                                        icon: 'view_sidebar',
+                                        link: '/feature/layout/application/vertical',
+                                    },
+                                    {
+                                        id: 'feature-layout-apps-horizontal',
+                                        title: 'Horizontal',
+                                        type: 'basic',
+                                        icon: 'view_column',
+                                        link: '/feature/layout/application/horizontal',
+                                    },
+                                ],
+                            },
+                            {
+                                id: 'feature-layout-page',
+                                title: 'Pages',
+                                type: 'collapsable',
+                                icon: 'description',
+                                children: [
+                                    {
+                                        id: 'feature-layout-page-page',
+                                        title: 'Page',
+                                        type: 'basic',
+                                        icon: 'description',
+                                        link: '/feature/layout/page/page',
+                                    },
+                                    {
+                                        id: 'feature-layout-page-content',
+                                        title: 'Content',
+                                        type: 'basic',
+                                        icon: 'description',
+                                        link: '/feature/layout/page/content',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 'feature-navigation',
+                title: 'Navigation',
+                type: 'collapsable',
+                icon: 'navigation',
+                children: [
+                    {
+                        id: 'feature-navigation-horizontal-navigation',
+                        title: 'Horizontal ',
+                        type: 'basic',
+                        icon: 'view_column',
+                        link: '/feature/navigation/horizontal',
+                    },
+                    {
+                        id: 'feature-navigation-vertical-navigation',
+                        title: 'Vertical ',
+                        type: 'collapsable',
+                        icon: 'view_agenda',
+                        children: [
+                            {
+                                id: 'feature-navigation-vertical-navigation-default',
+                                title: 'Default',
+                                type: 'basic',
+                                icon: 'view_agenda',
+                                link: '/feature/navigation/vertical/default',
+                            },
+                            {
+                                id: 'feature-navigation-vertical-navigation-thin',
+                                title: 'Thin',
+                                type: 'basic',
+                                icon: 'view_agenda',
+                                link: '/feature/navigation/vertical/thin',
+                            },
+                            {
+                                id: 'feature-navigation-vertical-navigation-compact',
+                                title: 'Compact',
+                                type: 'basic',
+                                icon: 'view_agenda',
+                                link: '/feature/navigation/vertical/compact',
+                            },
+                            {
+                                id: 'feature-navigation-vertical-navigation-dense',
+                                title: 'Dense',
+                                type: 'basic',
+                                icon: 'view_agenda',
+                                link: '/feature/navigation/vertical/dense',
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+/*
+ * Public API Surface of @ojiepermana/angular/navigation
+ */
+// Core
+const NAVIGATION_VERSION = '0.0.1';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NavigationService, getNavigationChildren, getNavigationItemAction, getNavigationItemVisibilityHandler, hasNavigationChildren, isNavigationItemHidden, isNavigationRoutableItem, shouldRenderNavigationItem };
+export { DEFAULT_NAVIGATION_ID, DemoNavigationData, NAVIGATION_VERSION, NavigationService, SidebarComponent, TopbarComponent, UiNavIconComponent, UiNavItemComponent };
 //# sourceMappingURL=ojiepermana-angular-navigation.mjs.map