You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.0 KiB
32 lines
1.0 KiB
# SPA Navigation (Turbo) |
|
## Teknologi |
|
- Hotwire Turbo 8.0.12 (CDN) |
|
- Target frame: `<turbo-frame id="app-content">` |
|
|
|
## Perilaku |
|
- Klik nav internal → hanya frame konten yang diganti |
|
- URL browser di-update (`data-turbo-action="advance"`) |
|
- Progress bar atas frame saat fetch |
|
- Nav active state di-update client-side (`app-spa-nav.js`) |
|
- Grup sidebar auto-expand jika child route aktif |
|
|
|
## Metadata Halaman |
|
- Hidden div: `data-page-route`, `data-page-title` untuk audit beacon |
|
|
|
## Pengecualian Full Page |
|
- API Docs (`_top`) — Swagger butuh full document |
|
- Logout form (`data-turbo="false"`) |
|
- Link eksternal / download |
|
|
|
## Audit Integration |
|
- `audit-client.js` kirim page-view & page-duration beacon |
|
- Routes: `audit.beacon.context`, `audit.beacon.page-view`, `audit.beacon.page-duration` |
|
|
|
## Manfaat UX |
|
- Navigasi terasa instan tanpa reload shell |
|
- Sidebar/header/bottom nav tetap stabil |
|
- State sidebar collapse & theme persist |
|
|
|
## Risiko / Batasan |
|
- Script `@push('frame-scripts')` per halaman harus kompatibel Turbo |
|
- Swagger di frame khusus — tidak SPA
|
|
|