Orient and configure
- Overview
- Company settings
- Phone numbers
DigitalAdmin sidebar
A quiet anchor for the workspace.
The admin sidebar keeps company navigation predictable: a warm surface, clear groups, familiar icons, and one strong plum selection.
Demo Home Servicesadmin
Service areas
Define where your team can serve customers.
Active
Denver service area
Page content stays separate from the navigation. The selected destination establishes where you are.
The header handles company switching and account actions. The sidebar handles destinations within the selected company.
Stable groups. Plain labels.
Keep the current order and use the same user-facing labels as the application. Labels describe the business task rather than database entities.
Build the operating model
- Business hours
- Service areas
- Service team
- Services
- Follow-up
- User access
- API keys
- Audit log — admin and owner only
Company context stays visible.
The footer names the current company and its access role. It is context, not another navigation group. Company switching stays in the header.
Selection carries the emphasis.
Resting links stay muted. A white hover surface previews the action; a plum fill and cream text identify the current destination.
Keyboard, semantics, and route matching
- Production items are links in a navigation landmark named Company navigation.
- The selected link exposes
aria-current="page". Icons are decorative and hidden from assistive technology; visible labels name the links. - Preserve the app’s 3px coral focus outline with a 3px offset. Tab moves between links and Enter opens the destination. The specimens above are real links so you can inspect hover and keyboard focus.
- The current implementation selects an exact pathname match. Phone numbers also stays selected on its child routes; other nested detail routes do not currently inherit the parent selection.
- Audit log is shown to admins and owners. Other navigation entries remain visible; write actions within their pages follow the user’s permissions.
The same destinations, in less space.
At 780px and below, the sidebar becomes a horizontal strip below the header. Keep labels and icons; let the strip scroll instead of compressing the destinations.
Mobile navigation · scroll horizontally
OverviewCompany settingsPhone numbersBusiness hoursService areasService teamServicesFollow-upUser accessAPI keysAudit log
Use it consistently.
The sidebar should feel familiar whenever someone changes companies or opens another admin page.
- Keep one selected destination and reserve the plum fill for it.
- Use the existing Lucide icon family with its consistent 2px stroke. Avoid decorative brand colors in navigation icons.
- Keep company-level destinations here; put page-specific tabs, filters, and actions in the content area.
- Use the existing group labels and order when adding related pages. Avoid creating extra groups for a single item.
- Keep white hover surfaces, warm background, and a quiet dividing border. Coral belongs to the content’s actions and focus cues.
Implementation references
apps/admin/components/company-nav.tsx defines labels, icons, order, company context, and Audit log visibility. nav-link.client.tsx defines active-route matching. apps/admin/app/globals.css defines the shell, states, and responsive measurements. apps/admin/lib/permissions.ts defines the access threshold for Audit log.
The specimens use the same Lucide SVGs and scoped copies of the current sidebar styles. They are documentation examples; they do not navigate to or alter company data.