#Navigation structure
#Sidebar
Top
Organization switcher (name, logo, your role)
Dashboard
Dashboard
Infrastructure
ServersProvidersBlueprints
Organization
OrganizationsMembersRoles
Finance
PlansSubscriptionBilling
Audit
Audit Log
Bottom
Collapse toggle
| Item | Route | Visible when | Badge |
|---|---|---|---|
| Dashboard | /dashboard | always (org member) | — |
| Servers | /servers | Servers ≥ view | offline count Assumption |
| Providers | /providers | Providers ≥ view | — |
| Blueprints | /blueprints | Blueprints ≥ view | — |
| Organizations | /organizations | always (lists your organizations) | — |
| Members | /members | Members ≥ view | pending invitations |
| Roles | /roles | Roles ≥ view | — |
| Plans | /plans | Plans ≥ view (owner by default) | — |
| Subscription | /subscription | Subscription ≥ view | "expired" / "trial" |
| Billing | /billing | Billing ≥ view | "low balance" |
| Audit Log | /audit-log | Audit ≥ view | — |
Group headings with no visible items are hidden. Items the plan locks (not the role) stay visible with a lock icon and an upgrade hint.
#Top bar
Breadcrumbs (desktop) · global search (⌘K) · notifications bell · theme toggle · language switcher · user menu (Profile, Security, Notifications settings, API access, Log out).
#Active state
- The longest matching route prefix is active (
/servers/42/databaseshighlights Servers). aria-current="page"on the active link.- Server Details has its own second-level tabs (Overview, Applications, Databases, System Users, Services, …). See Server details.
#Breadcrumbs
Organization name / Section / Item / Sub-page, e.g. Acme / Servers / web-01 / Databases. The organization crumb opens the switcher. On mobile only the last two crumbs show, with a back arrow.
#Mobile drawer
- Below
md(768 px) the sidebar becomes a drawer (shadcnSheet) opened from a hamburger in the top bar. - The drawer has the organization switcher at the top and the same groups. It closes on navigation, Esc, or a tap on the scrim. Focus is trapped while open.
- Server Details tabs become a horizontally scrollable tab bar, or a select.
#Navigation behaviour
| Situation | Behaviour |
|---|---|
| Organization switched | Stay on the same section. Detail pages go back to the list |
| Permission lost while on a page | Next API call 403 → 403 state + "Go to dashboard" |
| Page reload | Current organization restored from the cookie |
| Deep link to another organization's resource | 404 (no information leak) |
| Logout | prefetch={false} on the logout link. Clear stores, go to login |
| Unsaved form changes | Confirm before leaving (forms with dirty state) |
| Collapsed sidebar | Icons only with tooltips. Choice remembered per device |