NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

NexaSidebar NX.Sidebar

Menu sidebar bertingkat dengan section buka/tutup, item aktif mengikuti URL (opsional), persist state ke localStorage, dan penyesuaian tautan serta label kategori.

Sumber: assets/modules/Sidebar/NexaSidebar.js · Gaya: assets/modules/Sidebar/NexaSidebar.css (di-bundle lewat assets/modules/nexa.css dengan @import; bisa dimuat dinamis lewat initSidebar / NexaStylesheet).

NX: NX.NexaSidebar, alias NX.Sidebar, plus NX.initSidebar, NX.getSidebarInstance, NX.updateSidebarPath. Named export modul: SidebarMenu (sama dengan NexaSidebar).

Format data

Objek data memetakan nama kategori (key string) ke array item:

{ nama_kategori: [ { name: "Label tampilan", slug: "segment-url" }, ], kategori_lain: [ /* … */ ], }
  • name — teks tampilan (di-escape untuk XSS).
  • slug — dipakai linkGenerator (default: digabung dengan basePath) dan pencocokan item aktif terhadap location.pathname.

Kategori tanpa item (array kosong / falsy) dirender sebagai judul statis (<h3>), bukan section collapsible.

Opsi konstruktor

Opsi Tipe Default Keterangan
container HTMLElement | string — Wajib. Elemen atau selector (harus ada di DOM saat konstruktor jalan).
data Object — Wajib. Struktur kategori → item.
basePath string '/docs' Awalan untuk defaultLinkGenerator: ${basePath}/${item.slug}. Root SPA sering ''.
activeClass string 'active-grid' Class tambahan pada <a class="nx-nav-item"> yang aktif.
expandedByDefault string[] [] Key kategori yang mulai terbuka.
linkGenerator (item, basePath) => string bawaan URL absolut SPA, query string, atau hindari NEXA.url (lihat § SPA).
categoryFormatter (key) => string bawaan Label heading dari key (default: kapital + _ → spasi).
persistState boolean true Simpan section terbuka ke localStorage.
storageKey string 'nexa-sidebar-state' Bedakan per instance jika beberapa sidebar.
autoDetectActive boolean true Setelah load, cocokkan currentPath dengan tautan/slug; buka section terkait.

Alur konstruktor: set currentPath dari window.location.pathname → muat state tersimpan → detectActiveItem() (jika autoDetectActive).

Generator tautan bawaan dan SPA

defaultLinkGenerator membentuk path relatif lalu, jika window.NEXA.url ada dan tautan bukan http(s), menempelkan path ke base aplikasi/API tersebut.

Untuk SPA NexaRoute (mis. /beranda), sering tidak ingin memakai NEXA.url. Solusi: linkGenerator eksplisit, misalnya:

linkGenerator: (item) => `/${String(item.slug).replace(/^\//, "")}`,

Atau samakan NEXA.url dengan origin frontend (jarang untuk menu docs murni).

Method instance

Method Keterangan
init() render() + listener; mengembalikan this
render() Isi ulang container.innerHTML dari data + state expanded/aktif
toggleSection(categoryKey) Buka/tutup satu kategori; simpan state jika persistState
setActiveItem(categoryKey, item) Set item aktif, buka kategori, re-render
updatePath(path) Set currentPath, reset aktif, detectActiveItem(), re-render — penting untuk SPA
updateData(newData) Ganti data, deteksi aktif, re-render
expandAll() / collapseAll() Buka semua / tutup kecuali expandedByDefault; simpan state
destroy() Kosongkan container.innerHTML; listener hilang bersama node

Utilitas global: initSidebar, getSidebarInstance, updateSidebarPath

SidebarManager (singleton): satu sidebar global, muat CSS sekali, sinkron path saat navigasi.

API Keterangan
await NX.initSidebar(options, maxRetries?, retryDelay?) Muat CSS (NX.NexaStylesheet.Dom(['NexaSidebar.css'])), lalu SidebarManager.init. Retry jika container belum ada (default 10 × 200 ms).
NX.getSidebarInstance() Instance aktif atau null
NX.updateSidebarPath(path) Delegasi ke sidebarManager.updatePath(path)

Event yang didengar manager:

  • popstate → updatePath(window.location.pathname)
  • NX:routeChange → jika event.detail.path ada, updatePath(detail.path)

SPA: initSidebar cocok untuk satu sidebar persisten (mis. di layout di luar #main). Sidebar hanya di satu route di #main → lebih aman new NX.Sidebar(...).init() lokal + destroy() saat route dibuang (lihat demo).

Markup & kelas CSS (ringkas)

Container sebaiknya memakai kelas nx-sidebar (lebar, border, scroll — lihat NexaSidebar.css).

  • .nx-sidebar-section — grup kategori
  • .section-header-grid — toggle (Material Symbols chevron_right)
  • .nx-sidebar-nav / .collapsed — daftar link saat collapsed
  • .nx-nav-item — tautan; ditambah activeClass jika aktif

Layout: bawaan .nx-sidebar memakai position: fixed. Sidebar di dalam kontainer route (#main) → override CSS seperti di templates/sidebar.js.

Contoh: instance lokal di route

const data = { utama: [ { name: "Beranda", slug: "beranda" }, { name: "Grid", slug: "grid" }, ], }; const el = document.querySelector("#sidebar-root"); const sb = new NX.Sidebar({ container: el, data, basePath: "", storageKey: "app-sidebar-demo", expandedByDefault: ["utama"], linkGenerator: (item) => `/${item.slug}`, }); sb.init();

Setelah navigasi programmatic: sb.updatePath(location.pathname) — atau andalkan NX:routeChange jika memakai initSidebar.

Demo di proyek

Rute: /sidebar · Modul: templates/sidebar.js — linkGenerator khusus SPA, destroy() sebelum render ulang route yang sama, override CSS fixed untuk sidebar di dalam #main.

Impor modul langsung

import NexaSidebar, { SidebarMenu, initSidebar, getSidebarInstance, updateSidebarPath, } from "/assets/modules/Sidebar/NexaSidebar.js";

SidebarMenu alias kelas yang sama. Setelah nxdom.js, pakai NX.Sidebar / utilitas di atas.

Lihat juga

assets/modules/nxdom.js — pendaftaran Sidebar, initSidebar, dll. · Components (route & modul) — alur route SPA dan event NX:routeChange.