# 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)