Navigation & Layout
Every page in the staff panel shares the same basic layout: navigation on the left and page content on the right.
Desktop sidebar
Section titled “Desktop sidebar”On wider screens, a fixed sidebar runs along the left edge of the viewport. It contains:
| Element | Position | Behavior |
|---|---|---|
| Stenbee logo | Top of sidebar | Links to the chat page |
| Nav items | Center of sidebar | Links to each page |
| Logout button | Bottom of sidebar | Ends your session |
Nav items by role
Section titled “Nav items by role”All roles see:
- Dashboard
- Chat
- Contacts
Admin additionally sees:
- Documents
- Products
- Settings
- Staff
- Channels
The active page is highlighted in the sidebar with the gold accent color.
Mobile layout
Section titled “Mobile layout”On smaller screens:
- The sidebar is hidden by default
- A menu button appears at the top-left corner
- Tapping it opens a slide-out drawer with the same navigation items
- Tap outside the drawer to close it
Shared UI components
Section titled “Shared UI components”Toast notifications
Section titled “Toast notifications”Toasts are brief popup messages that appear after an action.
| Type | When it appears |
|---|---|
| Success | Action completed, such as saved, created, or deleted |
| Error | Action failed, such as a connection issue, validation error, or permission issue |
Confirmation dialogs
Section titled “Confirmation dialogs”Some actions require confirmation, especially delete and archive actions. A centered dialog appears with:
- A title and description of the action
- Cancel button to abort
- Confirm button to proceed
For permanent deletion, read the dialog carefully before confirming.