App Layout — Service Shell
A reusable shell component with a left navigation area, top utilities bar, main content region, and an optional split panel for contextual details. Fully keyboard-navigable and responsive down to mobile.
Default layout state
Left nav + top bar + main content. No split panel. Resize below 768 px to see the mobile hamburger menu.
Dashboard
This is the main content region. It scrolls independently. The left nav and top bar stay fixed.
Revenue
—
Users
—
Requests
—
Split panel enabled state
Click the panel-toggle button in the top-right to open/close the details panel. On screens ≥ 1024 px the panel appears side-by-side; on smaller screens it stacks below.
Resources
Select a resource to populate the details panel. Toggle the panel with the button in the top bar.
- api-service-prodRunning
- web-frontend-prodRunning
- db-primaryRunning
Keyboard navigation
| Key | Behaviour |
|---|---|
| Tab / Shift+Tab | Move focus between nav items, top-bar buttons, and main content |
| Enter / Space | Activate the focused nav item or button |
| Escape | Close the mobile nav drawer when open |
Mobile behaviour
- The left sidebar is hidden below the
md(768 px) breakpoint. - A hamburger button in the top bar opens a drawer overlay with nav items.
- The drawer closes on Escape, backdrop click, or nav-item selection.
- On resize back to desktop width, the mobile nav auto-closes.
- The split panel stacks below main content on screens narrower than
lg(1024 px).