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.
39 lines
1.6 KiB
39 lines
1.6 KiB
# App Shell & Navigation |
|
## Struktur Layout (Authenticated) |
|
- Grid CSS: sidebar (desktop) + header sticky + area konten |
|
- CSS variables: `--app-header-h`, `--app-bottom-h`, `--app-sidebar-w`, `--app-chrome-offset` |
|
- Footer global di luar shell, margin-left mengikuti lebar sidebar (desktop) |
|
|
|
## Sidebar Desktop (≥1024px) |
|
- Lebar: 17rem (collapsed: 4.75rem) |
|
- Grup menu collapsible: Operations, Directory, Platform, Account |
|
- State collapse disimpan di `localStorage` (`geonet-console-sidebar-collapsed`) |
|
- State grup terbuka disimpan di `localStorage` (`geonet-console-nav-groups`) |
|
- Item aktif: gradient cyan + inset shadow kiri |
|
- Footer sidebar: avatar inisial + nama user + tombol Logout |
|
|
|
## Header |
|
- Sticky top, backdrop blur |
|
- Mobile: tombol hamburger + brand + theme toggle + nama user (≥768px) |
|
- Desktop: theme toggle + nama user (brand disembunyikan, ada di sidebar) |
|
|
|
## Bottom Navigation (<1024px) |
|
- Fixed bottom dengan `safe-area-inset-bottom` |
|
- Admin: Home, Data, Users, Menu (4 item) |
|
- User biasa: Home, API, Menu (3 item) |
|
- Item aktif: warna cyan + underline bawah |
|
|
|
## Mobile Sheet Menu |
|
- Bottom sheet slide-up (`role="dialog"`, `aria-modal`) |
|
- Backdrop + handle drag visual |
|
- Semua grup menu + section Session (Logout) |
|
- Tutup otomatis saat link diklik (`data-nav-close`) |
|
|
|
## Menu per Role |
|
- Admin: Databases, DB Connections, LDAP Users/Groups, API Clients, Mail SMTP, Audit Logs, Profile, API Docs |
|
- User: Profile, API Docs saja (+ bottom nav disederhanakan) |
|
- Sumber: `NavigationMenu::groups()` dan `bottomNav()` |
|
|
|
## Turbo Frame |
|
- Navigasi internal: `data-turbo-frame="app-content"` |
|
- API Docs: `data-turbo-frame="_top"` (full page, Swagger)
|
|
|